jQuery的Ajax開發(fā)步驟

、jQuery的Ajax編程

1.回顧傳統(tǒng)Ajax開發(fā)步驟

①：創(chuàng)建xmlHttpRequest對象

var xmlHttp = creatHttpRequest();

②：綁定回調(diào)函數(shù)

xmlHttp.onreadystatechange = function(){……}

③：建立連接

xmlHttp.open(“GET”,”url”);

④：發(fā)送數(shù)據(jù)

xmlHttp.send(null) //GET請求

如果是POST請求需要設(shè)置編碼格式：

xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

xmlHttp.send(“key=value?key=value”)

⑤：書寫回調(diào)函數(shù)

if(readyState == 4){

if(status ==200){

……

//操作xmlHttp.responseText主要針對返回HTML片段和json

//操作xmlHttp.responseXML主要針對返回XML片段。

}

2.jQuery的Ajax開發(fā)

jQuery提供了最底層的Ajax調(diào)用方法：$.ajax

$.ajax{

type:”POST”

url: “some.php”

data: "name=John&location=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}

// 因為使用比較繁瑣，所以在實際開發(fā)中，應(yīng)用很少

為了簡化Ajax開發(fā)，jQuery提供了對$.ajax（）進(jìn)一步的封裝方法$load、$get、$post。這三個方法不支持跨域，$getJSON、$getScript支持跨域。

①：load方法

load方法是jQuery中最為簡單和常用的Ajax方法，處理HTML片段此方法最為合適。

語法

$("jquery對象").load("url","data") ;

url：Ajax訪問服務(wù)器地址

data：請求參數(shù)

返回內(nèi)容HTML片段，自動放入$("jquery對象")innerHTML 中(如果返回的數(shù)據(jù)需要處理，我們可以使用get或者post)

load()方法的傳遞參數(shù)根據(jù)參數(shù)data來自動自定。如過沒有參數(shù)的傳遞，采用GET方式傳遞，否則采用POST方式

練習(xí)一：校驗用戶名是否存在

此練習(xí)在第五章的第三小節(jié)有實現(xiàn)代碼，這里使用jQuery的方式進(jìn)行簡要的列出核心代碼：

$(function(){

// 為用戶名添加離焦事件

$("input[name='username']").blur(function(){

// 獲得當(dāng)前輸入 username

var username = $(this).val();

// 提交Ajax校驗

$("#info").load("/Ajax/checkUsername" , {'username': username});

});

<form>

用戶名 <input type="text" name="username" /><span id="info"></span> <br/>

密碼 <input type="password" name="password"/><br/>

</form>

②：get方法和post方法

語法：

$.get/$.post("url","parameter",function(data){...});

url Ajax訪問服務(wù)器地址

parameter 代表請求參數(shù)

function 回調(diào)函數(shù) data 代表從服務(wù)器返回數(shù)據(jù)內(nèi)容

這里data代表各種數(shù)據(jù)內(nèi)容： HTML片段、JSON、XML

如果傳遞參數(shù)給服務(wù)器使用 $.post , 不需要傳參數(shù) 可以使用 $.get

為Ajax：

當(dāng)今數(shù)字時代，互聯(lián)網(wǎng)的發(fā)展讓我們的網(wǎng)頁愈發(fā)交互且動感十足。你是否曾想過這些令人驚艷的網(wǎng)頁是如何實現(xiàn)的呢？答案之一就在于 Ajax（Asynchronous JavaScript and XML）技術(shù)。在本文中動手實現(xiàn)屬于你自己的 Ajax 請求！

Ajax，這個聽起來充滿未知魔力的縮寫，實際上代表了一種讓網(wǎng)頁實現(xiàn)異步數(shù)據(jù)交換的技術(shù)。通過 Ajax，我們能夠在不刷新整個頁面的情況下，動態(tài)地加載和更新數(shù)據(jù)，為用戶提供更加流暢和即時的體驗。

你是否曾想過，這些異步請求是如何工作的？只需一點前端魔法的指引，你也能夠輕松掌握手寫 Ajax 的技巧。

在本文中，我們將深入了解 Ajax 的工作原理，并通過實際動手的方式，逐步構(gòu)建一個簡單而強大的異步請求。

手寫代碼：

 // 兼容性·IE6.0以前 現(xiàn)在沒什么必要 IE -> Edge
                const xhr =
                    XMLHttpRequest
                        ? new XMLHttpRequest()
                        : new ActiveXObject('Microsoft.XMLHTTP')
                xhr.open('GET', url, false)
                // 宏任務(wù) 事件
                xhr.onreadystatechange = function () {
                    if (xhr.readyState !== 4)
                        // 叼一下 表現(xiàn)一下 304 Not Modified 沒有修改
                        if (xhr.status === 200 || xhr.status === 304) {
                            resolve(xhr.responseText);
                        } else {
                            rejecct(new Error(xhr.responseText))
                        }
                }
                xhr.send();
                // onreadyStateChange 
                // setTimeout(() => {
                //     resolve('gigi')
                // }, 1000)
            })
        };

在這段代碼中，主要完成了使用 XMLHttpRequest 對象進(jìn)行同步（xhr.open('GET', url, false)）Ajax 請求的操作。讓我逐步解釋這段

代碼：

創(chuàng)建 XMLHttpRequest 對象：

const xhr = XMLHttpRequest
                ? new XMLHttpRequest()
                : new ActiveXObject('Microsoft.XMLHTTP');

if (window.XMLHttpRequest) { 
// 現(xiàn)代瀏覽器支持
XMLHttpRequest xhr = new XMLHttpRequest();
} else { 
// 舊版 Internet Explorer 使用 ActiveXObject 
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }

這里使用了三元運算符來檢測瀏覽器是否支持 XMLHttpRequest 對象,當(dāng)然也可以使用if判斷的方式。如果支持，就創(chuàng)建一個新的 XMLHttpRequest 對象；否則，使用 ActiveXObject('Microsoft.XMLHTTP') 來創(chuàng)建對象，適配一些較舊的瀏覽器。其實對于現(xiàn)在絕大多數(shù)瀏覽器中，基本不會存在不支持XMLHttpRequest的情況，所以上面那份代碼其實是可以不寫的。但在面試的過程中，手寫Ajax對于我們來說是必備的，當(dāng)然其他面試者一樣如此，所以可以加入上面的代碼，告訴面試官你是為了避免出現(xiàn)由于舊版瀏覽器不支持XMLHttpRequest使得Ajax無法實現(xiàn),加入一個判斷，用于避免這種情況。這樣一來，你就比其他面試者更具優(yōu)勢，面試官也會更容易記住你。初始化 XMLHttpRequest 對象：

xhr.open('GET', url, false);

這行代碼使用 open 方法初始化 XMLHttpRequest 對象。它指定了請求的類型（GET）、URL 和是否使用異步（false 表示同步）。值得注意的是，同步請求在現(xiàn)代 web 開發(fā)中已不推薦使用，因為它可能會導(dǎo)致頁面凍結(jié)，用戶體驗差，且在主流瀏覽器中逐漸被廢棄。

監(jiān)聽 onreadystatechange 事件：

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4)
        if (xhr.status === 200 || xhr.status === 304) {
            resolve(xhr.responseText);
        } else {
            reject(new Error(xhr.responseText))
        }
};

onreadystatechange 事件是一個在 XMLHttpRequest 對象的 readyState 屬性發(fā)生變化時觸發(fā)的事件。readyState 屬性表示請求的狀態(tài)，其中 4 表示請求已完成。當(dāng) readyState 不等于 4 時，這段代碼不執(zhí)行任何操作，因為這表示請求仍在進(jìn)行中。當(dāng) readyState 等于 4 時，表示請求已完成，進(jìn)入這個條件分支。

在這個條件分支中，檢查 xhr.status，它表示 HTTP 響應(yīng)的狀態(tài)碼。狀態(tài)碼 200 表示成功，而 304 表示資源未被修改，可以從緩存中加載。如果狀態(tài)碼是 200 或 304，則將 Promise 置為成功狀態(tài)，調(diào)用 resolve 函數(shù)，傳遞響應(yīng)文本 (xhr.responseText)。如果狀態(tài)碼不是 200 或 304，則說明請求失敗，將 Promise 置為拒絕狀態(tài)，調(diào)用 reject 函數(shù)，并傳遞一個包含錯誤信息的新 Error 對象。講到這里，我要提醒一下大家，在面試的過程中，當(dāng)你的代碼中出現(xiàn)狀態(tài)碼，那么請做好準(zhǔn)備，面試官很有可能會把所有的HTTP狀態(tài)碼都問你一遍，這其實是好事，可以增加你在面試過程中的時間，幫你更輕松的度過面試死亡時間，因為比起面試官的其他問題，這個狀態(tài)碼簡直不要太簡單，希望大家有時間就看看，并沒有多少。我在文章結(jié)尾會補充說明把狀態(tài)碼發(fā)出來，希望對你有所幫助。

發(fā)送請求：
ini
復(fù)制代碼

xhr.send();

最后，使用 send 方法發(fā)送請求。

總體來說，這段代碼是一個非常基礎(chǔ)的使用 XMLHttpRequest 對象進(jìn)行同步 Ajax 請求的例子。然而，現(xiàn)代的 web 開發(fā)更傾向于使用異步請求，通常使用 fetch 或類似的 API，因為它們提供更好的性能和用戶體驗。

總結(jié)：

在本文中，我們深入研究了 Ajax 技術(shù)的本質(zhì)，揭示了它在現(xiàn)代前端開發(fā)中的不可或缺的角色。通過手寫 Ajax，我們掌握了異步請求的核心概念，以及如何使用純粹的 JavaScript 在網(wǎng)頁上實現(xiàn)動態(tài)數(shù)據(jù)交換。

我們了解到，Ajax 不再是前端魔法師的專屬工具，而是每個開發(fā)者都能夠掌握的技能。通過實際動手的練習(xí)，我們發(fā)現(xiàn)了異步編程的奇妙之處，以及在網(wǎng)頁交互中如何利用 Ajax 構(gòu)建更加響應(yīng)式和流暢的用戶體驗。

但這只是前端開發(fā)旅程的開始。在未來的學(xué)習(xí)中，你可以進(jìn)一步探索現(xiàn)代工具和框架，如 Fetch API、Axios 等，它們提供了更強大和便捷的方式來處理異步請求。同時，深入理解 Promise 和 async/await 等概念將使你更加游刃有余地處理異步編程挑戰(zhàn)。

無論你是初學(xué)者還是經(jīng)驗豐富的開發(fā)者，手寫 Ajax 是一個深入理解前端技術(shù)根基的重要一步。希望本文能夠激發(fā)你對前端開發(fā)的興趣，并為你在這個令人興奮的領(lǐng)域中邁出更大的步伐提供了堅實的基礎(chǔ)。

感謝閱讀，愿你在前端的旅途中不斷探索、學(xué)習(xí)、創(chuàng)造，成為一位優(yōu)秀的前端工程師！如果文章對你有所幫助，還望點個贊支持一下。

補充說明：HTTP狀態(tài)碼

HTTP 協(xié)議使用狀態(tài)碼（HTTP status codes）來表示請求的處理結(jié)果。狀態(tài)碼是服務(wù)器對客戶端發(fā)起的請求的響應(yīng)的一部分，它提供了關(guān)于請求處理成功與否、出現(xiàn)錯誤的信息。

以下是常見的 HTTP 狀態(tài)碼，它們不僅適用于 HTML，也適用于其他資源的請求：

1xx（信息）：

100 Continue：服務(wù)器已經(jīng)接收到請求頭，并且客戶端應(yīng)繼續(xù)發(fā)送請求體。

2xx（成功）：

200 OK：請求成功。
201 Created：請求已經(jīng)被實現(xiàn)，新資源已經(jīng)依據(jù)請求的需要而建立。
204 No Content：服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。

3xx（重定向）：

301 Moved Permanently：被請求的資源已永久移動到新位置。
302 Found：被請求的資源在新的位置臨時找到。
304 Not Modified：資源未被修改，可以使用緩存的版本。

4xx（客戶端錯誤）：

400 Bad Request：服務(wù)器未能理解請求。
401 Unauthorized：請求要求身份驗證。
403 Forbidden：服務(wù)器理解請求，但拒絕執(zhí)行。
404 Not Found：服務(wù)器找不到請求的資源。

5xx（服務(wù)器錯誤）：

500 Internal Server Error：服務(wù)器遇到了一個未曾預(yù)料的狀況，導(dǎo)致了它無法完成對請求的處理。
502 Bad Gateway：作為網(wǎng)關(guān)或代理工作的服務(wù)器嘗試執(zhí)行請求時，從上游服務(wù)器接收到無效的響應(yīng)。
503 Service Unavailable：服務(wù)器目前無法使用（由于超載或停機維護(hù)）。通常，這只是暫時狀態(tài)。

編寫你自己的Ajax：探索前端異步世界
原文鏈接：https://juejin.cn/post/7311893415151517736

jax指的是異步JavaScript和XML，是一套綜合了多項技術(shù)的瀏覽器端網(wǎng)頁開發(fā)技術(shù)。也是目前網(wǎng)頁前端設(shè)計較為流行使用的技術(shù)。Ajax能夠真正實現(xiàn)網(wǎng)頁前端與業(yè)務(wù)后臺的分離，體現(xiàn)出網(wǎng)頁設(shè)計大前端的設(shè)計思想。所有的前端設(shè)計只需要通過Ajax將消息傳遞給業(yè)務(wù)邏輯，運算完直接發(fā)送前端。其實現(xiàn)原理如下：

工作原理及過程

一般情況下，在處理具體業(yè)務(wù)是網(wǎng)頁通常采用發(fā)送HTTP請求中帶有參數(shù)形式傳遞命令與數(shù)據(jù)，處理頁面接收到數(shù)據(jù)之后進(jìn)行處理。這種情況需要頁面跳轉(zhuǎn)或者頁面刷新，增加了服務(wù)器與客戶端通信的開銷。而使用Ajax技術(shù)進(jìn)行業(yè)務(wù)處理時只需要通過Ajax與Json實現(xiàn)在不刷新頁面前提下完成業(yè)務(wù)功能，在滿足前后端分離的基礎(chǔ)上進(jìn)一步降低網(wǎng)絡(luò)通信量。本文針對初學(xué)者以實例形式對Ajax應(yīng)用進(jìn)行說明，希望對初學(xué)者有所幫助。

設(shè)計案例

案例描述：前端為用戶信息查詢頁面login.html,提供文本框用于接收用戶姓名，業(yè)務(wù)邏輯處理頁面為query.php,模擬接收用戶姓名，執(zhí)行查詢，返回用戶基本信息，前端login.html通過Ajax回調(diào)函數(shù)讀取信息并以table形式進(jìn)行輸出顯示。其前端頁面設(shè)計如下：

前端測試頁面

基本語法

(1) XMLHttpRequest對象

XMLHttpRequest是 AJAX 的基礎(chǔ)。用于向服務(wù)器發(fā)送request請求實現(xiàn)數(shù)據(jù)交換。由于是對象XMLHttpRequest在使用的時候需要用new進(jìn)行對象的實例化。如：var xmlhttp = new XMLHttpRequest();

(2) 發(fā)送請求open()與send()

通過使用open與send方法將客戶端Ajax請求發(fā)送到服務(wù)器端，其中open請求帶有請求類型等參數(shù)，send可以帶傳遞的參數(shù)值。兩函數(shù)基本語法如下：

open(method,url,async)//方法、處理URL，異步/同步
send(string)//post類型時傳遞參數(shù)

(3) onreadystatechange 事件

通過使用該事件用于響應(yīng)服務(wù)器端狀態(tài)的改變，readyState與status，其中readyState=4表示服務(wù)器請求已完成，響應(yīng)已就緒。status=200表示已就緒。因此可以在該事件響應(yīng)函數(shù)中去接收服務(wù)端傳遞數(shù)據(jù)。

(4) 服務(wù)器返回值類型responseText與responseXML,其中responseText表示接收服務(wù)器發(fā)送過來的字符串。

案例實現(xiàn)

（1）獲取表單用戶名值 var uname=document.getElementById('name').value;

（2）發(fā)送Ajax POST請求

Ajax Post請求

（3）（服務(wù)器請求處理）業(yè)務(wù)邏輯處理

php處理業(yè)務(wù)邏輯

（4）前端獲取服務(wù)器值并輸出顯示表格

前端顯示服務(wù)器發(fā)送數(shù)據(jù)（在不刷新頁面情況下）

以上給出使用JavaScript原生態(tài)Ajax進(jìn)行服務(wù)器與客戶端瀏覽器進(jìn)行數(shù)據(jù)交互的簡單例題，重點為XMLHttpRequest對象的使用，業(yè)務(wù)邏輯處理使用了PHP。整體實現(xiàn)效果GIF動圖描述如下：

Ajax實現(xiàn)效果

本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！如需案例完整代碼請關(guān)注并私信，往期前端設(shè)計文章鏈接如下：

前端設(shè)計-響應(yīng)式頁面開發(fā)基礎(chǔ)
Web開發(fā)前端、后端與全棧的區(qū)別是什么？

在線咨詢

上一篇：Sublime Text：一個讓你愛不釋手的文本編輯器
下一篇：HTML屬性及實例

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商