面试题二十：Ajax 原理是什么？ajax 是如何实现的？

Ajax全称：

Async Javascript and XML，翻译后就是异步的JavaScript 和XML，可以在不重选加载页面的情况下，与服务器交换数据，并实现部分页面更新。

Ajax原理：

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

Ajax实现过程：

1.新建 一个 XmlHttpRequest 实例化对象；

const xhr = new XmlHttpRequest();

2.通过 XmlHttpRequest 对象的open()方法连接服务器；

xhr.open(method,url,[async]...)

3.通过 XmlHttpRequest 对象的send()方法传递数据至服务器；

xhr.send([body])

4.通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器通信状态；
readyState五个状态：

• 0 —— 未连接
• 1 —— 已打开
• 2 —— 已获取响应头
• 3 —— 正在下载
• 4 —— 传输结束

5.根据服务器返回的状态及数据，处理更新页面。

Ajax封装：

 

function ajax(options){
// 创建xhr实例
const xhr = new XMLHttpRequest();

//初始化参数内容
options = options || {} ;
options.type = (options.type || 'GET').toUpperCase();
options.dataType = options.dataType || 'json';
const params = options.data;

//发送请求
if( options.type === 'GET' ){
  xhr.open('GET',options.url+'?'+params,true);
  xhr.send(null);
}else if(options.type === 'POST'){
  xhr.open('POST',options.url,true);
  xhr.send(params)
}

//接收请求
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status>=200 && xhr.status<300){
      options.success && options.success(xhr.responseText,xhr.responseXML);
    }else{
      options.fail && options.fail(status)
    }
  }
}

}

Ajax使用：

 

 

ajax({
    type:'get/post',
    dataType:'json',
    url:'',
    data:'',
    success:function(text){
        console.log(text)
    },
    fail: function(status){
        console.log(status)
    }
})