仿jq封装ajax

/**
 * 封装ajax
 */
function ajax () {
  var ajaxData = {
    type: arguments[0].type || ‘GET‘,
    url: arguments[0].url || ‘‘,
    async: arguments[0].async || ‘true‘,
    data: arguments[0].data || null,
    dataType: arguments[0].dataType || ‘text‘,
    contentType: arguments[0].contentType || ‘application/x-www-form-urlencoded‘,
    beforeSend: arguments[0].beforeSend || function () { },
    success: arguments[0].success || function () { },
    error: arguments[0].error || function () { }
  }
  ajaxData.beforeSend()
  var xhr = createxmlHttpRequest()
  xhr.responseType = ajaxData.dataType
  xhr.open(ajaxData.type, ajaxData.url, ajaxData.async)
  xhr.setRequestHeader(‘Content-Type‘, ajaxData.contentType)
  xhr.send(convertData(ajaxData.data))
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        ajaxData.success(xhr.response)
      } else {
        ajaxData.error()
      }
    }
  }
}

function createxmlHttpRequest () {
  if (window.ActiveXObject) {
    return new ActiveXObject(‘Microsoft.XMLHTTP‘)
  } else if (window.XMLHttpRequest) {
    return new XMLHttpRequest()
  }
}

function convertData (data) {
  if (typeof data === ‘object‘) {
    var convertResult = ‘‘
    for (var c in data) {
      convertResult += c + ‘=‘ + data[c] + ‘&‘
    }
    convertResult = convertResult.substring(0, convertResult.length - 1)
    return convertResult
  } else {
    return data
  }
}

  此代码复制自 https://www.cnblogs.com/webSong/p/7224546.html

原文地址:https://www.cnblogs.com/handsome-jm/p/8193346.html

时间: 2024-11-08 11:46:29

仿jq封装ajax的相关文章

js jq封装ajax方法

json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"admin1",password:"123"} ] } js: window.onload=function(){ var txtName=..; var txtPwd=..; var url="Login.aspx?name="+txtName.value+&qu

轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)

hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + XML(异步JavaScript和XML )) 二.效果 实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦) 三.本质 可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们

js实现jq的ajax

本文将介绍如何使用js封装一段代码,实现jq的ajax功能,每一步代码均有注释便于理解 实现代码 function ajax(){ //获取ajax的相应值(请求类型,请求地址,同步或异步,传递数据,接收数据类型,成功失败函数等) var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true&qu

封装ajax支持get、post

为什么要封装ajax,因为-- for(var i=0;i<20;i++){ $.ajax(--) } 的时候,整个页面都卡死了,于是,我开始找答案. 后来,找到了,就是jquery的ajax属于全局,当上文不执行完毕,其他的都动不了.于是乎有了封装ajax,将ajax作为局部使用,即可解决掉. function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUp

jq中ajax的使用

jq中ajax必须在服务器环境下使用 $.ajax({ url:"json.json", //请求的url地址 dataType:"json", //返回格式为json type:"GET", //请求方式 beforeSend:function(){ $('#div3').html('加载中...') }, success:function(data,status){//第一个参数包含获取的内容,第二个参数为执行的状态 var tt="

原生JS封装ajax方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 10 <script> 11 12 //将对象序列

怎么用jq封装插件

怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再移除 class就行: 2.不用class,直接改变background属性: 直接开干,这里用第二种方法. 第一步: 模板 jq有一个基本框架,直接搬过来呗 (function($){ $.fn.yourName = function(options){ //各种属性.参数 } var optio

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v