终于明白如何去写原生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), obj.async) // 路径拼接
 // 三、发送此次请求
 xhq.send()
 }
 else if (obj.method.toUpperCase() === 'POST') { // post方法
 xhq.open(obj.method, obj.url, obj.async)
 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 = 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('发生了错误')
 }
})
复制代码

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