Ajax程式設計

目錄ajax 執行原理及實現

請求報文

請求引數的格式

獲取伺服器端的響應

ajax錯誤處理

低版本 ie 瀏覽器的快取問題

ajax 非同步程式設計

ajax：標準讀音 [ˈeɪˌdʒæks] ，中文音譯：阿賈克斯

頁面上拉載入更多資料

列表資料無重新整理分頁

表單項離開焦點資料驗證

搜尋框提示文字下拉列表

ajax 技術需要執行在**環境中才能生效，當前使用node建立的伺服器作為**伺服器。

//引入express框架

const express = require('express');
//路徑處理模組
const path = require('path');
//建立web伺服器
//靜態資源訪問服務功能
//監聽埠
//控制台提示輸出
console.log('伺服器啟動成功');

將html頁面放在專案路徑下public檔案中

建立 ajax 物件

var xhr = new xmlhttprequest();

xhr.open('get', 'http://localhost/first');

xhr.send();

xhr.onload = function ()

​ 在真實的專案中，伺服器端大多數情況下會以 json 物件作為響應資料的格式。當客戶端拿到響應資料時，要將 json 資料和 html 字串進行拼接，然後將拼接的結果展示在頁面中。

json.parse() // 將 json 字串轉換為json物件

xhr.open('get', 'http://localhost?name=zhangsan&age=20');

引數需要自己拼接在請求位址的後面

//設定請求引數格式的型別(post請求必須要設定)

xhr.send('name=zhangsan&age=20');

setrequestheader()方法是用來設定請求報文（請求頭）

​ 在 http 請求和響應的過程中傳遞的資料塊就叫報文，包括要傳送的資料和一些附加資訊，這些資料和資訊要遵守規定好的格式。

name=zhangsan&age=20&***=男

json.stringify() // 將json物件轉換為json字串

ajax 狀態碼

在建立ajax物件，配置ajax物件，傳送請求，以及接收完伺服器端響應資料，這個過程中的每乙個步驟都會對應乙個數值，這個數值就是ajax狀態碼。

目前這個技術比較久，了解即可，推薦使用onload的方式

0：請求未初始化(還沒有呼叫open())

1：請求已經建立，但是還沒有傳送(還沒有呼叫send())

2：請求已經傳送

3：請求正在處理中，通常響應中已經有部分資料可以用了

4：響應已經完成，可以獲取並使用伺服器的響應了

xhr.readystate // 獲取ajax狀態碼

onreadystatechange 事件

當 ajax 狀態碼發生變化時將自動觸發該事件。

在事件處理函式中可以獲取 ajax 狀態碼並對其進行判斷，當狀態碼為 4 時就可以通過 xhr.responsetext 獲取伺服器端的響應資料了。

// 當ajax狀態碼發生變化時

xhr.onreadystatechange = function () 
}

兩種獲取伺服器端響應方式的區別

區別描述

onload事件

onreadystatechange事件

是否相容ie低版本

不相容相容

是否需要判斷ajax狀態碼

不需要需要

被呼叫次數

一次多次

目前主流都是使用onload事件進行ajax請求，如果專案考慮相容ie低版本則使用onreadystatechange事件

網路暢通，伺服器端能接收到請求，伺服器端返回的結果不是預期結果。

可以判斷伺服器端返回的狀態碼，分別進行處理。xhr.status 獲取http狀態碼

網路暢通，伺服器端沒有接收到請求，返回404狀態碼。

檢查請求位址是否錯誤，也可能存在伺服器沒有這個位址。

網路暢通，伺服器端能接收到請求，伺服器端返回500狀態碼。

伺服器端錯誤，找後端程式設計師進行溝通。

網路中斷，請求無法傳送到伺服器端。

會觸發xhr物件下面的onerror事件，在onerror事件處理函式中對錯誤進行處理。

問題：在低版本的 ie 瀏覽器中，ajax 請求有嚴重的快取問題，即在請求位址不發生變化的情況下，只有第一次請求會真正傳送到伺服器端，後續的請求都會從瀏覽器的快取中獲取結果。即使伺服器端的資料更新了，客戶端依然拿到的是快取中的舊資料。

xhr.open('get', '' + math.random());

同步

console.log('before'); 

console.log('after');

非同步

console.log('before');

settimeout(
() => , 2000);
console.log('after');

問題：傳送一次請求**過多，傳送多次請求**冗餘且重複。

解決方案：將請求**封裝到函式中，發請求時呼叫函式即可。

function ajax(options) ,

header: ,
success: function() {},
error: function() {}
};// 使用options物件中的屬性覆蓋defaults物件中的屬性
object.assign(defaults, options);
// 建立ajax物件
// 拼接請求引數的變數
var params = '';
// 迴圈使用者傳遞進來的物件格式引數
for (var attr in defaults.data) 
// 將引數最後面的&擷取掉 
// 將擷取的結果重新賦值給params變數
params = params.substr(0, params.length - 1);
// 判斷請求方式
if (defaults.type == 'get') 
// 配置ajax物件
xhr.open(defaults.type, defaults.url);
// 如果請求方式為post
if (defaults.type == 'post')  else 
} else 
// 監聽xhr物件下面的onload事件
// 當xhr物件接收完響應資料後觸發
xhr.onload = function() 
// 當http狀態碼等於200的時候
if (xhr.status == 200)  else 
}}//呼叫示例
ajax(
})

Ajax程式設計基礎

ajax需要執行在 環境中才有效，不能直接雙擊html檔案執行。建立ajax物件 告訴ajax請求位址和引數 xhr.open get 傳送請求 xhr.send 獲取伺服器端給客戶端的響應資料 xhr.onload function 在http請求與響應過程中，無論是請求引數還是相應內容，如果是物...

Ajax 非同步程式設計

1.1 同步 1.2 非同步 doctype html en utf 8 viewport content width device width,initial scale 1.0 document title head function ajax options header success fu...

Ajax程式設計 Ajax的基礎知識

06.伺服器端響應的資料格式 07.請求引數的傳遞 08.獲取服務端響應的另一種方式 09.ajax錯誤處理 10.低版本瀏覽器的快取問題 11.同步非同步概述 12.ajax封裝 三 模板引擎 四 formdata 物件 五 二進位制檔案 六 ajax請求限制 七 ajax 方法 八 restfu...