1：基本概念

jQuery的Ajax請求實際上是封裝的一個XHLHttpRequest，從字面意思來看是，XML是一種文件格式，Http是一個網(wǎng)絡請求，Request最開始是用于請求XML文件的，后來不斷擴展可以請求多種類型的文件。

XHLHttpRequest，網(wǎng)絡請求模塊，或者是一個瀏覽器網(wǎng)絡線程。用于從URL網(wǎng)絡上獲取數(shù)據(jù)，有了對象，就可以實現(xiàn)頁面的無刷新請求數(shù)據(jù)，就可以做到一個局部的更新，也可以獲取多種類型的數(shù)據(jù)(ftp、文件)。

2：要實現(xiàn)和使用XMLHttpRequest

它是一個對象，首先我們需要實例化，定義一個：

var xhr = new XMLHttpRequest();

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

//Ajax請求時的參數(shù)設置

method 請求方式

url 請求地址

async 是否異步

user 用戶名

password 密碼

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

4：發(fā)送請求(encodeURLComponent)

xhr.send(data);

等待接收

5：接收網(wǎng)絡請求返回

一般有如下屬性：

responseText，請求返回的數(shù)據(jù)內容，可以是一段文本，是一段二進制或者是一個json

responseXML，是一個文件，如果響應頭內容是text/xml，這個屬性將保留響應數(shù)據(jù)的XML、DOM文檔。

status，響應的HTTP狀態(tài)，如 200(正常，200-300之間都表示成功) 304(使用緩存) 404(沒找到) 500(服務器內部錯誤)等

statusText，HTTP狀態(tài)說明

readyStatus，請求/響應過程的當前活動階段，一共有5個值：0(未被調用open)，1(已被調用open但未發(fā)送)，2(已調用send)，3(已接收到請求返回的數(shù)據(jù))，4(請求已完成)。

timeout，設置請求超時時間

xhr.onreadystatechange = () => {

if (xhr.readyStatus === 4) {

/* HTTP 狀態(tài)在 200-300 之間表示請求成功 */

/* HTTP 狀態(tài)為 304 表示請求內容未發(fā)生改變，可直接從緩存中讀取 */

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數(shù)據(jù) */

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);

/* 拼接參數(shù) */

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直接發(fā)送拼接的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)

}

})

}

總結：

關于網(wǎng)絡請求，一般常用的有四種：

一個是get，獲取網(wǎng)絡資源

然后是post，一般用于提交數(shù)據(jù)，提交數(shù)據(jù)的參數(shù)是放在請求的body里面的

delete，刪除

put，標準的一個修改

關于Http的簡單請求和非簡單請求或者是跨域，在跨域時由于瀏覽器的安全機制，涉及到一個問題關于在Ajax請求 ，是在請求之后還是請求之前判斷跨域，這時候就需要了解一下簡單請求和復雜請求。

簡單請求是先把資源請求回來，然后再去判斷是否跨域。如果是一個復雜請求，瀏覽器會先去發(fā)送一個嗅探或者是欲請求(一般是一個option)，先判斷是否跨域，如果不是跨域那就執(zhí)行，如果是跨域那就直接不請求了。一般來講，如果get不修改它的Content-Type，那么基本上都是簡單請求。post如果采用www-form的形式，也是一個簡單請求。

這篇文章主要是分享了Javascript中XMLHttpRequest對象的基本屬性和方法, 從實例化、初始化、發(fā)送和接受四個階段完成了Ajax網(wǎng)絡請求核心內容封裝。

總結

以上是生活随笔為你收集整理的js-ajax-,JavaScript实现Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。