、jQuery的Ajax編程
1.回顧傳統Ajax開發步驟
①:創建xmlHttpRequest對象
var xmlHttp = creatHttpRequest();
②:綁定回調函數
xmlHttp.onreadystatechange = function(){……}
③:建立連接
xmlHttp.open(“GET”,”url”);
④:發送數據
xmlHttp.send(null) //GET請求
如果是POST請求需要設置編碼格式:
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.send(“key=value?key=value”)
⑤:書寫回調函數
if(readyState == 4){
if(status ==200){
……
//操作xmlHttp.responseText主要針對返回HTML片段和json
//操作xmlHttp.responseXML主要針對返回XML片段。
}
}
2.jQuery的Ajax開發
jQuery提供了最底層的Ajax調用方法:$.ajax
$.ajax{
type:”POST”
url: “some.php”
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
}
// 因為使用比較繁瑣,所以在實際開發中,應用很少
為了簡化Ajax開發,jQuery提供了對$.ajax()進一步的封裝方法$load、$get、$post。這三個方法不支持跨域,$getJSON、$getScript支持跨域。
①:load方法
load方法是jQuery中最為簡單和常用的Ajax方法,處理HTML片段此方法最為合適。
語法
$("jquery對象").load("url","data") ;
url:Ajax訪問服務器地址
data:請求參數
返回內容HTML片段 ,自動放入$("jquery對象")innerHTML 中(如果返回的數據需要處理,我們可以使用get或者post)
load()方法的傳遞參數根據參數data來自動自定。如過沒有參數的傳遞,采用GET方式傳遞,否則采用POST方式
練習一:校驗用戶名是否存在
此練習在第五章的第三小節有實現代碼,這里使用jQuery的方式進行簡要的列出核心代碼:
$(function(){
// 為用戶名添加離焦事件
$("input[name='username']").blur(function(){
// 獲得當前輸入 username
var username = $(this).val();
// 提交Ajax校驗
$("#info").load("/Ajax/checkUsername" , {'username': username});
});
});
<form>
<!-- div display:block 自動換行效果 span display:inline; 不會換行 -->
用戶名 <input type="text" name="username" /><span id="info"></span> <br/>
密碼 <input type="password" name="password"/><br/>
<input type="submit" value="注冊" />
</form>
②:get方法和post方法
語法 :
$.get/$.post("url","parameter",function(data){...});
url Ajax訪問服務器地址
parameter 代表請求參數
function 回調函數 data 代表從服務器返回數據內容
這里data代表各種數據內容 : HTML片段、JSON、XML
如果傳遞參數給服務器使用 $.post , 不需要傳參數 可以使用 $.get
當今數字時代,互聯網的發展讓我們的網頁愈發交互且動感十足。你是否曾想過這些令人驚艷的網頁是如何實現的呢?答案之一就在于 Ajax(Asynchronous JavaScript and XML)技術。在本文中動手實現屬于你自己的 Ajax 請求!
Ajax,這個聽起來充滿未知魔力的縮寫,實際上代表了一種讓網頁實現異步數據交換的技術。通過 Ajax,我們能夠在不刷新整個頁面的情況下,動態地加載和更新數據,為用戶提供更加流暢和即時的體驗。
你是否曾想過,這些異步請求是如何工作的?只需一點前端魔法的指引,你也能夠輕松掌握手寫 Ajax 的技巧。
在本文中,我們將深入了解 Ajax 的工作原理,并通過實際動手的方式,逐步構建一個簡單而強大的異步請求。
// 兼容性·IE6.0以前 現在沒什么必要 IE -> Edge
const xhr =
XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP')
xhr.open('GET', url, false)
// 宏任務 事件
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4)
// 叼一下 表現一下 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 對象進行同步(xhr.open('GET', url, false))Ajax 請求的操作。讓我逐步解釋這段
代碼:
const xhr = XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
if (window.XMLHttpRequest) {
// 現代瀏覽器支持
XMLHttpRequest xhr = new XMLHttpRequest();
} else {
// 舊版 Internet Explorer 使用 ActiveXObject
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
xhr.open('GET', url, false);
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4)
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.responseText))
}
};
在這個條件分支中,檢查 xhr.status,它表示 HTTP 響應的狀態碼。狀態碼 200 表示成功,而 304 表示資源未被修改,可以從緩存中加載。如果狀態碼是 200 或 304,則將 Promise 置為成功狀態,調用 resolve 函數,傳遞響應文本 (xhr.responseText)。如果狀態碼不是 200 或 304,則說明請求失敗,將 Promise 置為拒絕狀態,調用 reject 函數,并傳遞一個包含錯誤信息的新 Error 對象。講到這里,我要提醒一下大家,在面試的過程中,當你的代碼中出現狀態碼,那么請做好準備,面試官很有可能會把所有的HTTP狀態碼都問你一遍,這其實是好事,可以增加你在面試過程中的時間,幫你更輕松的度過面試死亡時間,因為比起面試官的其他問題,這個狀態碼簡直不要太簡單,希望大家有時間就看看,并沒有多少。我在文章結尾會補充說明把狀態碼發出來,希望對你有所幫助。
xhr.send();
總體來說,這段代碼是一個非?;A的使用 XMLHttpRequest 對象進行同步 Ajax 請求的例子。然而,現代的 web 開發更傾向于使用異步請求,通常使用 fetch 或類似的 API,因為它們提供更好的性能和用戶體驗。
在本文中,我們深入研究了 Ajax 技術的本質,揭示了它在現代前端開發中的不可或缺的角色。通過手寫 Ajax,我們掌握了異步請求的核心概念,以及如何使用純粹的 JavaScript 在網頁上實現動態數據交換。
我們了解到,Ajax 不再是前端魔法師的專屬工具,而是每個開發者都能夠掌握的技能。通過實際動手的練習,我們發現了異步編程的奇妙之處,以及在網頁交互中如何利用 Ajax 構建更加響應式和流暢的用戶體驗。
但這只是前端開發旅程的開始。在未來的學習中,你可以進一步探索現代工具和框架,如 Fetch API、Axios 等,它們提供了更強大和便捷的方式來處理異步請求。同時,深入理解 Promise 和 async/await 等概念將使你更加游刃有余地處理異步編程挑戰。
無論你是初學者還是經驗豐富的開發者,手寫 Ajax 是一個深入理解前端技術根基的重要一步。希望本文能夠激發你對前端開發的興趣,并為你在這個令人興奮的領域中邁出更大的步伐提供了堅實的基礎。
感謝閱讀,愿你在前端的旅途中不斷探索、學習、創造,成為一位優秀的前端工程師!如果文章對你有所幫助,還望點個贊支持一下。
HTTP 協議使用狀態碼(HTTP status codes)來表示請求的處理結果。狀態碼是服務器對客戶端發起的請求的響應的一部分,它提供了關于請求處理成功與否、出現錯誤的信息。
以下是常見的 HTTP 狀態碼,它們不僅適用于 HTML,也適用于其他資源的請求:
編寫你自己的Ajax:探索前端異步世界
原文鏈接:https://juejin.cn/post/7311893415151517736
jax指的是異步JavaScript和XML,是一套綜合了多項技術的瀏覽器端網頁開發技術。也是目前網頁前端設計較為流行使用的技術。Ajax能夠真正實現網頁前端與業務后臺的分離,體現出網頁設計大前端的設計思想。所有的前端設計只需要通過Ajax將消息傳遞給業務邏輯,運算完直接發送前端。其實現原理如下:
工作原理及過程
一般情況下,在處理具體業務是網頁通常采用發送HTTP請求中帶有參數形式傳遞命令與數據,處理頁面接收到數據之后進行處理。這種情況需要頁面跳轉或者頁面刷新,增加了服務器與客戶端通信的開銷。而使用Ajax技術進行業務處理時只需要通過Ajax與Json實現在不刷新頁面前提下完成業務功能,在滿足前后端分離的基礎上進一步降低網絡通信量。本文針對初學者以實例形式對Ajax應用進行說明,希望對初學者有所幫助。
案例描述:前端為用戶信息查詢頁面login.html,提供文本框用于接收用戶姓名,業務邏輯處理頁面為query.php,模擬接收用戶姓名,執行查詢,返回用戶基本信息,前端login.html通過Ajax回調函數讀取信息并以table形式進行輸出顯示。其前端頁面設計如下:
前端測試頁面
(1) XMLHttpRequest對象
XMLHttpRequest是 AJAX 的基礎。用于向服務器發送request請求實現數據交換。由于是對象XMLHttpRequest在使用的時候需要用new進行對象的實例化。如:var xmlhttp = new XMLHttpRequest();
(2) 發送請求open()與send()
通過使用open與send方法將客戶端Ajax請求發送到服務器端,其中open請求帶有請求類型等參數,send可以帶傳遞的參數值。兩函數基本語法如下:
open(method,url,async)//方法、處理URL,異步/同步 send(string)//post類型時傳遞參數
(3) onreadystatechange 事件
通過使用該事件用于響應服務器端狀態的改變,readyState與status,其中readyState=4表示服務器請求已完成,響應已就緒。status=200表示已就緒。因此可以在該事件響應函數中去接收服務端傳遞數據。
(4) 服務器返回值類型responseText與responseXML,其中responseText表示接收服務器發送過來的字符串。
(1)獲取表單用戶名值 var uname=document.getElementById('name').value;
(2)發送Ajax POST請求
Ajax Post請求
(3)(服務器請求處理)業務邏輯處理
php處理業務邏輯
(4)前端獲取服務器值并輸出顯示表格
前端顯示服務器發送數據(在不刷新頁面情況下)
以上給出使用JavaScript原生態Ajax進行服務器與客戶端瀏覽器進行數據交互的簡單例題,重點為XMLHttpRequest對象的使用,業務邏輯處理使用了PHP。整體實現效果GIF動圖描述如下:
Ajax實現效果
本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。期待大家關注!如需案例完整代碼請關注并私信,往期前端設計文章鏈接如下:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。