写在前面

这个封装只包括最简单的get,post方法，主要是仿照jQuery中的ajax()函数，使用方法也类似。

1. 创建XMLHttpRequest异步对象

那么什么是XMLHttpRequest对象呢？
XMLHttpRequest是ajax的基础，XMLHttpRequest对象用于和服务器交换数据并且获得服务器的响应。XMLHtppRequest用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
下面是创建一个异步对象的代码。

var xmlhttp;
if (window.XMLHttpRequest)
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
else
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

2. 设置请求方式和请求地址并发送请求

用到XMLHttpRequest对象的open和send方法向服务器发送请求。

open(method, url, async)
// method - 请求类型 GET或是POST
// url - 文件在服务器上的位置
// async - 异步true 同步false

send(string)
// string - 仅用于post请求
// GET请求时可以sned()或是send(null)

2.1 GET or POST

GET相对于POST更快也更简单，适用于大部分情况。
当遇到下列情形时必须使用POST

• 需要更新服务器上的文件或数据库
• 向服务器发送大量数据
• 发送包含未知字符的用户输入时，POST比GET更稳定可靠

2.2 GET请求

一些GET实例

xmlhttp.open("GET", "try/test.php", true);
xmlhttp.send();
// 可能得到缓存的结果，所以可以向url中添加唯一的ID
xmlhttp.open("GET", "try/test.php?t=" + Math.random(), true);
// 如果需要发送信息，则将信息添加到url中,格式如下
xmlhttp.open("GET", "try/test.php?title=ajax&name=xuejiachen", true);

通过上面的例子我们可以知道GET请求的基本格式，如果需要发送信息时，对data进行相应的格式处理添加到url后面即可。所以在我们这个封装ajax的例子中，我们这样操作：

// 对option.data进行预处理
let params = [];
 Object.keys(option.data).forEach(key => {
     params.push(key + '= ' + option.data[key]);
 })
 let sendData = params.join('&');
 if(option.type === "GET") {
     xhr.open("GET", option.url + '?' + sendData, true);
     xhr.send(null);
 }

2.3 POST请求

POST 数据时，需要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据。

// 一个简单的post例子
xmlhttp.open("POST", "try/demo.php", true);
xmlhttp.send();

// 当需要POST数据时，则必须要添加HTTP头
setRequestHeader(header, value)
// header - 规定头的名称
// value - 规定头的值

xmlhttp.open("POST", "try/test.php", true);
xmlhttp.setRequestHeader("Content-type", "appliaction/x-www-form-urlencoded");
xmlhttp.send("title=ajax&name=xuejiachen");

setRequestHeader()又可以分为表单格式或是json格式

xhr.open("POST", option.url, true);
// 设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.send(JSON.stringify(option.data));
// 若数据为表单格式
xhr.setRequestHeader('Content-Type', 'application/x-ww-form-urlencoded');
xhr.send(sendData); // 这里的sendData与之前GET方法中加在url后面的数据格式一致

3. 监听状态的变化，处理返回的结果

这里涉及到XMLHttpRequest对象三个重要的属性onreadystatechange, readyState, status

onreadystatechange
存储函数名，每当readyState属性改变时，就会调用该函数

readyState 返回当前文档的载入状态
0 - 请求未初始化 还没有调用send()方法
1 - 服务器连接已建立 已调用send()方法，正在发送请求
2 - 请求已接收 send()方法执行完成，已经接收到全部响应内容
3 - 请求处理中 正在解析响应内容
4 - 请求已完成 响应内容及解析完成，可以在客户端调用了

status
200 'OK'
404 未找到页面

当readyState等于4且state为200时，表示响应已就绪；在这里接收后台返回的数据。

下面是整个过程的代码

function ajax(option) {
    option = option || {};
    option.type = (option.type || "GET").toUpperCase();
    option.dataType = option.dataType || "json";

    // 1.创建一个异步对象
    const xhr;
    // 考虑兼容性
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    // 兼容IE6以下版本
    else if(window.ActiveXObject) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 2.设置请求方式和请求地址
    // 3.发送请求
    // 对option.data进行预处理
    let params = [];
    Object.keys(option.data).forEach(key => {
        params.push(key + '= ' + option.data[key]);
    })
    let sendData = params.join('&');
    if(option.type === "GET") {
        xhr.open("GET", option.url + '?' + sendData, true);
        xhr.send(null);
    }
    else if(option.type === "POST") {
    	xhr.open("POST", option.url, true);
        // 设置表单提交时的内容类型
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhr.send(JSON.stringify(option.data));
        // 若数据为表单格式
        // xhr.setRequestHeader('Content-Type', 'application/x-ww-form-urlencoded');
        // xhr.send(sendData);
    }

    // 4.监听状态的变化
    // 5.处理返回的结果
    /* onreadystatechange
    存储函数名，每当readyState属性改变时，就会调用该函数*/

    /* readyState 返回当前文档的载入状态
    0 - 请求未初始化 还没有调用send()方法
    1 - 服务器连接已建立 已调用send()方法，正在发送请求
    2 - 请求已接收 send()方法执行完成，已经接收到全部响应内容
    3 - 请求处理中 正在解析响应内容
    4 - 请求已完成 响应内容及解析完成，可以在客户端调用了*/

    /* status
    200 'OK'
    404 未找到页面*/
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4) {
            let status = xhr.status;
            if(status === 200) {
                let response = xhr.responseText;
                if(responseType === 'json') { // ?
                    response = JSON.parse(xhr.responseText); // 将ajax返回的data转为对象格式
                }
                option.onSuccess(response, xhr);
            }
            else {
                option.onError(xhr);
            }
        }
    }
}
        

最近着手巩固，全面复习js的基础知识。通过浏览大神的博客和自己的理解，自己尝试着封装了一下ajax请求。

1.Ajax是什么？

    Ajax是一种无需重现加载，就可以实现网页部分更新的技术。全称全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。

2.创建一个Ajax的基本步骤：

•     创建一个XMLHttprequest对象。
•     填写请求方法，url，时候异步请求。即xhr.open(method, url, async).
•     发送请求xhr.send()。//如果是post请求，则将data填入到send中。否则将data以编码的形式写入到url中。

3.先大致了解一些XMLHTTPREQUEST。在XHLHTTPREQUEST1的版本中，返回响应的属性：

• responseText：响应文本。
• status：响应状态。根据响应状态可以判断请求是否成功。
• reponseXML：如果响应的内容类型是“text/xml”或者“application\xml”，这个属性将保存着相应数据的xml dom文档。
• statusText：HTTP状态说明。

4.xhr存在readyState属性，通过这个属性的不同状态，可以监听请求的不同响应操作：

•   0：未初始化。未调用open()方法。
•   1：启动。以调用open()方法，

5.在XMLHTTPREQUEST2.0版本中：

新增了表单序列化函数：new FormData（）；

可以给函数直接传form表单的信息到，或者获取后以append（“键”, “值”）的方式去添加。同时，也增加了超时连接设置xhr.time，还提供了xhr.timeout =function(){}响应事件。

基本知识了解完了，再附上我自己参考别人和自己稍微修改的ajax请求：

封装Ajax 命名Ajax.js

function ajax(options) {
    let defaults={
        type:'get',
        url:'',
        data:{},
        header:{'Content-type':'application/json'},
        success:function(){},
        error:function(){}
    }
    // 使用options覆盖defaults
    Object.assign(defaults,options)
    // 创建ajax对象
    let xhr = new XMLHttpRequest();
    let dataArr=[];

    // 循环data
    for (let key in defaults.data) {
        dataArr.push(`${key}=${defaults.data[key]}`)
    }
    let params=dataArr.join('&');
    // 如果是get请求
    if (defaults.type=='get') {
        defaults.url=defaults.url+'?'+params
    }
    // 给ajax赋值请求地址和请求方式
    xhr.open(defaults.type,defaults.url);
    if (defaults.type=='post') {
        xhr.setRequestHeader("Content-Type",defaults.header['content-type'])
        xhr.send(JSON.stringify(defaults.data));
    }else{
        // 发送请求
        xhr.send();
    }
   
    // 获取请求数据
    xhr.onreadystatechange = function () {
        //请求完成并且成功的时候，才调用success
        if (xhr.readyState == 4 && xhr.status == 200) {
            let result =xhr.responseText;
            //判断响应的头部类型，如果是json格式，则转换成json返回给success
            let header=xhr.getResponseHeader('Content-Type')
            if (header.includes('application/json')) {
                result=JSON.parse(result)
            }
            options.success && options.success(result)
        }else if(xhr.readyState==4 && xhr.status!=200){
            options.error && options.error(xhr.status,xhr)
        }
    }
}

使用封装Ajax.js

<script src="js/ajax.js"></script>

ajax({
      type:'',//请求的类型
      url:'',//访问的地址
      data:{},//参数”xxx“:xxx
      success:function(data){//请求成功 data后台返回的数据
        console.log(data)
      },
      error:function(){//请求异常
      }
    })