终于明白如何去写原生AJAX面试常问的题----手写原生AJAX。以下是个人的归纳总结,希望对大家有帮助。首先我们根

面试常问的题----手写原生AJAX。以下是个人的归纳总结,希望对大家有帮助。

一）原生JavaScript写出AJAX

首先我们根据文档进行相应的步骤分析。第一步：创建对象第二步：初始化 HTTP 请求参数第三步：发送请求第四步：监听请求状态，执行对应回调函数

前置知识

onreadystatechange 每次状态改变所触发事件的事件。

responseText 从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

responseXML 对请求的响应，解析为 XML 并作为 Document 对象返回。

status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

status Text 请求的 HTTP 的状态代码

readyState HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误

4 (完成) 数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据

记住这张图

1、创建对象

IE5、6不兼容XMLHttpRequest，所以要使用ActiveXObject()对象，并传入 'Microsoft.XMLHTTP'，达到兼容目的。

    var xhq = null
    if (XMLHttpRequest) {
        xhq = new XMLHttpRequest() // 创建对象
    } else {
        xhq = new ActiveXObject("Microsoft.XMLHTTP") // 兼容IE5、6
    }

2、初始化 HTTP 请求参数

语法： open(method, url, async, username, password) 参数说明：必填 method 请求的类型值包括 GET、POST 和 HEAD 必填 url 请求的路径需要向服务器请求的路径可选 async 此次请求的方式默认为true 即为异步可选 username 与 password 此次请求需要的身份验证

同时该请求会将 readyState 设置为1，并把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。

xhq.open('get', 'https://www.easy-mock.com/mock/5cf7654cf8ab93502742fb99/example/query', true)

此处接口使用easy-mock模拟。

3、发送此次请求

语法： send(body) 参数说明：可选传递的参数列表

  xhq.send({
        username: '123'
    })

请求发送后， send()会把 readyState 设置为 2，并触发 onreadystatechange 事件。

当所有的 HTTP 响应头部已经接收，send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件。

当响应完成，send() 或后台线程把 readyState 设置为 4，并最后一次触发事件。

4、监听请求状态，执行对应回调函数

当readyState为4时，且服务器响应为200时

    xhq.onreadystatechange = function () {
        if ( xhq.readystate == 4 && xhq.status == 200 ) {
            // success 回调
            success(xhq.responseText)
        }  else if (xhq.readyState == 4 && xhq.status !== 200) {
            // error 回调
            error()
        }
    }

以函数方式合并所有内容为


function sendAjax(obj) {
// get方式传入时，将内容进行data内容进行拼接
    function splicStr(data) {
        var str = ''
        for (var i in data) {
            str = i + '=' + data[i]
        }
        return str
    }
// 原生ajax实现 步骤分析
// 一、声明XMLHttpRequest, 为了兼容IE5、6需要使用ActiveXObject()
    var xhq = null
    if (XMLHttpRequest) {
        xhq = new XMLHttpRequest() // 创建对象
    } else {
        xhq = new ActiveXObject("Microsoft.XMLHTTP") // 兼容IE5、6
    }
// 二、初始化HTTP请求参数， 只初始化并不会发送
    if (obj.method.toUpperCase() === 'GET') { // get方法
        xhq.open(obj.method, obj.url + '?' + splicStr(obj.data),  typeof obj.async === 'boolean'? obj.async : true) // 路径拼接
        // 三、发送此次请求
        xhq.send()
    }
    else if (obj.method.toUpperCase() === 'POST') { // post方法
        xhq.open(obj.method, obj.url, typeof obj.async === 'boolean'? obj.async : true)
        xhq.setRequestHeader("content-type","application/x-www-form-urlencoded") // 以表单提交
        // 三、发送此次请求
        xhq.send(obj.data)
    }


//四、监听发送
    xhq.onreadystatechange = function () {
        if ( xhq.readyState == 4 && xhq.status == 200 ) {
            // success 回调
            success(xhq.responseText)
        } else if (xhq.readyState == 4 && xhq.status !== 200) {
            // error 回调
            error()
        }
    }
}

sendAjax({
    url: 'your url',
    method: 'post',
    async: true,
    data: {
        username: 'xiong',
        pwd: '123'
    },
    success: function (data) {
        console.log(data)
    },
    error: function () {
        console.log('发生了错误')
    }
})

以原型构造的方式合并为

function sendAjax(obj) {
    this.xhq = null
    this.method = obj.method || 'get'
    this.url = obj.url
    this.data = obj.data
    this.async = typeof obj.async === 'boolean'? obj.async : true
    this.success = obj.success
    this.error = obj.error
    this.init()
}
sendAjax.prototype = {
    init: function () {
        if (XMLHttpRequest) {
            this.xhq = new XMLHttpRequest() // 创建对象
        } else {
            this.xhq = new ActiveXObject("Microsoft.XMLHTTP") // 兼容IE5、6
        }
        this.openReq()
        this.watchReq()
    },
    openReq: function () {
        if (this.method.toUpperCase() === 'GET') { // get方法
            this.xhq.open(this.method, this.url + '?' + this.splicStr(this.data), this.async) // 路径拼接
            // 三、发送此次请求
            this.xhq.send()
        }
        else if (this.method.toUpperCase() === 'POST') { // post方法
            this.xhq.open(this.method, this.url, this.async)
            this.xhq.setRequestHeader("content-type","application/x-www-form-urlencoded") // 以表单提交
            // 三、发送此次请求
            this.xhq.send(this.data)
        }
    },
    watchReq: function () {
        var that = this
        this.xhq.onreadystatechange = function () {
            if ( that.xhq.readyState == 4 && that.xhq.status == 200 ) {
                // success 回调
                that.success(that.xhq.responseText)
            } else if (that.xhq.readyState == 4 && that.xhq.status !== 200) {
                // error 回调
                that.error()
            }
        }
    },
    splicStr: function (data) {
        var str = ''
        for (var i in data) {
            str = i + '=' + data[i]
        }
        return str
    }
}
new sendAjax({
    url: 'https://www.easy-mock.com/mock/5cf7654cf8ab93502742fb99/example/query',
    method: 'get',
    async: true,
    data: {
        username: 'xiong',
        pwd: '123'
    },
    success: function (data) {
        console.log(data)
    },
    error: function () {
        console.log('发生了错误')
    }
})

案例没有处理所有可能，但是已经够基本使用。熊吉祝大家学习愉快。

文章内容借鉴了W3school关于XMLHttpRequest文档

终于明白如何去写原生AJAX