js-ajax-,JavaScript实现Ajax

1：基本概念

jQuery的Ajax请求实际上是封装的一个XHLHttpRequest，从字面意思来看是，XML是一种文件格式，Http是一个网络请求，Request最开始是用于请求XML文件的，后来不断扩展可以请求多种类型的文件。

XHLHttpRequest，网络请求模块，或者是一个浏览器网络线程。用于从URL网络上获取数据，有了对象，就可以实现页面的无刷新请求数据，就可以做到一个局部的更新，也可以获取多种类型的数据(ftp、文件)。

2：要实现和使用XMLHttpRequest

它是一个对象，首先我们需要实例化，定义一个：

var xhr = new XMLHttpRequest();

3：初始化请求，给定一些必要的配置，给它一些property

//Ajax请求时的参数设置

method 请求方式

url 请求地址

async 是否异步

user 用户名

password 密码

xhr.open(method,url,async,user,password);

4：发送请求(encodeURLComponent)

xhr.send(data);

等待接收

5：接收网络请求返回

一般有如下属性：

responseText，请求返回的数据内容，可以是一段文本，是一段二进制或者是一个json

responseXML，是一个文件，如果响应头内容是text/xml，这个属性将保留响应数据的XML、DOM文档。

status，响应的HTTP状态，如 200(正常，200-300之间都表示成功) 304(使用缓存) 404(没找到) 500(服务器内部错误)等

statusText，HTTP状态说明

readyStatus，请求/响应过程的当前活动阶段，一共有5个值：0(未被调用open)，1(已被调用open但未发送)，2(已调用send)，3(已接收到请求返回的数据)，4(请求已完成)。

timeout，设置请求超时时间

xhr.onreadystatechange = () => {

if (xhr.readyStatus === 4) {

/* HTTP 状态在 200-300 之间表示请求成功 */

/* HTTP 状态为 304 表示请求内容未发生改变，可直接从缓存中读取 */

if (xhr.status >= 200 &&

xhr.status < 300 ||

xhr.status == 304) {

console.log('请求成功', xhr.responseText)

}

}

}

6：封装(promise)

function ajax (options) {

/* 获取请求地址 */

let url = options.url;

/* 获取请求方法 */

const method = options.method.toLocaleLowerCase() || 'get';

/* 默认异步 */

const async = options.async != false;

/* 获取请求request数据 */

const data = options.data;

/* 实例化XMLHttpRequest */

const xhr = new XMLHttpRequest();

/* 设置超时时间 */

if (options.timeout && options.timeout > 0) {

xhr.timeout = options.timeout

}

return new Promise ( (resolve, reject) => {

/* 添加超时回调 */

xhr.ontimeout = () => reject && reject('请求超时');

/* 成功回调 */

xhr.onreadystatechange = () => {

if (xhr.readyState == 4) {

if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

resolve && resolve(xhr.responseText);

} else {

reject && reject();

}

}

}

/* 失败回调 */

xhr.onerror = err => reject && reject(err);

/* 拼接参数 */

let paramArr = [];

let encodeData;

if (data instanceof Object) {

for (let key in data) {

paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) );

}

encodeData = paramArr.join('&');

}

/* get请求 */

if (method === 'get') {

const index = url.indexOf('?')

if (index === -1) url += '?'

else if (index !== url.length -1) url += '&'

url += encodeData

}

/* 初始化请求 */

xhr.open(method, url, async);

/* get直接发送拼接的URL */

if (method === 'get') xhr.send(null);

if (method === 'post') {

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')

xhr.send(encodeData)

}

})

}

总结：

关于网络请求，一般常用的有四种：

一个是get，获取网络资源

然后是post，一般用于提交数据，提交数据的参数是放在请求的body里面的

delete，删除

put，标准的一个修改

关于Http的简单请求和非简单请求或者是跨域，在跨域时由于浏览器的安全机制，涉及到一个问题关于在Ajax请求 ，是在请求之后还是请求之前判断跨域，这时候就需要了解一下简单请求和复杂请求。

简单请求是先把资源请求回来，然后再去判断是否跨域。如果是一个复杂请求，浏览器会先去发送一个嗅探或者是欲请求(一般是一个option)，先判断是否跨域，如果不是跨域那就执行，如果是跨域那就直接不请求了。一般来讲，如果get不修改它的Content-Type，那么基本上都是简单请求。post如果采用www-form的形式，也是一个简单请求。

这篇文章主要是分享了Javascript中XMLHttpRequest对象的基本属性和方法, 从实例化、初始化、发送和接受四个阶段完成了Ajax网络请求核心内容封装。