1. ajax的介紹
1.1 含義
ajax 的全稱是Asynchronous JavaScript and XML
簡單理解下:ajax就是異步的js和服務端的資料
1.2 組成
異步的js:事件,物件等
其他js:資料處理和決議的js
服務器的載體:xhr物件
服務端的資料:json,xhr,html,txt等字符型資料
1.3 作用
它作為前端向后端發送資料請求的重要手段,可以實作網頁無重繪加載資料.
1.4 利弊
與傳統的form表單的get和post方式相比較,ajax的優點很明顯
優點:1.提升加載速度,實作區域加載
2.節省性能,能很好提升用戶體驗
當然,事物都是相對的,缺點如下
缺點:1.破壞了瀏覽器的前進后退功能
2.破壞了seo的網路優化
2. ajax的書寫
2.1.1 ajax的GET請求方式
GET請求的資料會附在URL之后， 以 ? 分割URL和傳輸資料， 引數之間以 & 相連
//1.創建xhr物件
var xhr = new XMLHttpRequest();
//2.xhr的發送方式:get
xhr.open("GET", url, true)
//引數1:請求方式
//引數2:url是后端檔案所在服務器的位置
//引數3:異步true;同步false
//3.監聽xhr物件的狀態
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//客戶端狀態碼為4:回應內容決議完成,可以呼叫
//服務端的狀態碼為200:交易成功
console.log(xhr.responseTxt)
//回傳回應資訊
}
//4.發送資訊
xhr.send();
2.1.2 小bug
以上是最基本的ajax代碼,有兩處小bug, 在封裝程序中會解決
bug1:傳的引數為空時,會報錯
bug2:瀏覽器的快取干擾使得資料無法重繪
2.1.3 ajax的Get方式封裝
//接收三個引數:后端檔案地址,回呼函式和資料(物件格式)
function ajaxGet(url, callback, data) {
//1.決議發送的資料
data = https://www.cnblogs.com/mutuo/p/data || {};
//修復bug1:引數為空變為空物件
var str ="";
for (var i in data) {
str += `${i}=${data[i]}&`;
//拼接get的資料格式
}
//2.拼接url
var d = new Date();
url = url + "?" + str + "__sjc=" + d.getTime();
//修復bug2:拼接一個不會重復的時間戳,欺騙快取;
//時間戳的命名應該盡量復雜,防止后端讀取到.
//3. 準備ajax
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
}
xhr.send();
}
2.2.1 ajax的POST請求方式
ajax的POST和GET的結構大體相同,但有以下三點區別
區別1:post發送資料位置是send()內,而不是拼接在url后
區別2:open的請求方式變為POST
區別3:send會原樣發送資料,為確保后端能識別,必須設定資料格式為表單格式
2.2.1 ajax的POST方式封裝
function ajaxPost(url, callback, data) {
data = https://www.cnblogs.com/mutuo/p/data || {};
var str ="";
for (var i in data) {
str += `${i}=${data[i]}&`;
}
//不必拼接時間戳
var xhr = new XMLHttpRequest();
//區別2
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
}
//區別3:發送前設定資料格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//區別1:資料發送在send內
xhr.send(str);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179041.html
標籤：JavaScript