了解ajax工作原理及手写ajax

1.ajax工作原理

工作原理：

创建XMLHttpRequest对象，发送异步请求，提供网页加载后在后台与服务器进行通信的方法，可在不刷新页面的情况下获得新数据

 

2.手写ajax原生代码

手写原生ajax步骤:

1.创建xhr对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判断数据传输方式(GET/POST)转换数据格式

3.打开链接 open()

4.发送 send()

5.当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

1.创建xhr对象

区分标准写法和ie(ie5,ie6)写法

//通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest

 

2.当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。

1)XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。

注意，千万不要把第三个参数指定为false，否则浏览器将停止响应(false表示同步)，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

 

2)最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

1. async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
2. method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
3. contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
4. data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
5. headers：发送的额外的HTTP头，必须是一个object；
6. dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

♥如果需要使用JSONP，可以在ajax()中设置jsonp: 'callback'，jsonpCallback:"本地函数名"让jquery实现JSONP跨域加载数据。

 

2.1 readyState状态码

• 对象属性 readyState状态码

readyState	状态	描述
0	onsent	未初始化，及还未调用open()方法
1	opened	启动，未调用send()方法
2	headers_received	发送，未收到响应
3	loading	接受，取得部分收据
4	done	下载操作已完成

• 对象事件 

         - onReadyStateChange  // readyState 状态码改变时触发
         - onError  // ajax 请求错误时触发

 

2.2 源码：

function createxmlHttpRequest() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else {
    return new ActiveXObject('Microsoft.XMLHTTP');
  }
}
//元数据格式 data:{"user":"abc","pwd":"123"};
//目标数据格式 convertData(data):"user=abc&pwd=123"
function convertData(data) {
  if (typeof data === 'object') {
    var convertResult = "";
    for (var i in data) {
      convertResult += i + "=" + data[i] + "&";
    }
    // 去掉最后一个&
    convertResult.substring(0, convertResult.length - 1);
    return convertResult;
  } else {
    return data;
  }
}

// 原生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.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 {
        ajax.error()
      }
    }
  }
}

//使用案例
ajax({
  type: "POST",
  url: 'ajax.php',
  dataType: 'json',
  data: {
    "val1": "abc",
    "val2": 123,
    "val3": "def"
  },
  beforeSend: function () {

  },
  success: function (msg) {
    console.log(msg);
  },
  error: function (msg) {
    console.log(msg);
  }
})

 

结束

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~