js实现jq的ajax

Posted 2020-09-25 元庆

本文将介绍如何使用js封装一段代码，实现jq的ajax功能，每一步代码均有注释便于理解

实现代码

function ajax(){
 //获取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();    //创建 XMLHttpRequest 对象
  xhr.responseType=ajaxData.dataType;  //预期服务器返回的数据类型
  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  //规定请求的类型、URL 以及是否异步处理请求
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  //发送信息至服务器时内容编码类型(向请求添加 HTTP 头)
  xhr.send(convertData(ajaxData.data));                     //将请求发送到服务器
  //当请求被发送到服务器时，我们需要执行一些基于响应的任务。
  //每当 readyState 改变时，就会触发 onreadystatechange 事件。
  //readyState 属性存有 XMLHttpRequest 的状态信息。
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if(xhr.status == 200){
        ajaxData.success(xhr.response)
      }else{
        ajaxData.error()
      }
    }
  }
}
//创建 XMLHttpRequest 对象
function createxmlHttpRequest() {
  if (window.ActiveXObject) {
    // IE6, IE5 浏览器执行代码
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    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;
  }
}

调用方法

ajax({
      type:"POST",
      url:"ajax.php",
      dataType:"json",
      data:{"val1":"abc","val2":123,"val3":"456"},
      beforeSend:function(){
        //some js code
      },
      success:function(msg){
        console.log(msg)
      },
      error:function(){
        console.log("error")
      }
    })