專業(yè)網(wǎng)站建設顧問長沙網(wǎng)站托管seo優(yōu)化公司
一、Ajax簡介
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現(xiàn)有標準的創(chuàng)新方法。
AJAX 最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。
AJAX 不需要任何瀏覽器插件，但需要用戶允許 JavaScript在瀏覽器上執(zhí)行。
XMLHttpRequest 只是實現(xiàn) Ajax 的一種方式。
二、同步與異步
同步：發(fā)送?個請求，需要等待響應返回，然后才能夠發(fā)送下?個請求，如果該請求沒有響應，不能發(fā)送下?個請求，客戶端會處于?直等待過程中。
異步：發(fā)送?個請求，不需要等待響應返回，隨時可以再發(fā)送下?個請求，即不需要等待。
三、實現(xiàn)Ajax
1. 原生JS實現(xiàn)
實現(xiàn)步驟：
1、定義?個XMLHttpRequest核?對象xhr;
2、通過xhr.open?法給當前對象提供訪問?式、URL等。
3、發(fā)送當前的請求?指定的URL
4、接收返回值并處理
案例：前臺??通過?個按鈕向后臺發(fā)送?個Ajax請求，后臺做完處理后向前臺??響應?段?本信息顯示在??上
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">function testJsAjax(){//1. 創(chuàng)建核?對象var xmlhttp = new XMLHttpRequest();//2.通過核?對象?法給當前的對象提供訪問?式和URL路徑xmlhttp.open("GET","http://localhost/getmsg",true);//3.發(fā)送當前的請求?指定的URLxmlhttp.send();//4.接收返回值并處理xmlhttp.onreadystatechange=function(){//xmlhttp.readyState==4代表XMLHttpRequest對象讀取服務器的響應結束//xmlhttp.status==200響應成功if (xmlhttp.readyState==4 && xmlhttp.status==200){var msg = xmlhttp.responseText;document.getElementById("msg").innerHTML=msg;}}}
</script>
</head> <body> <div id="msg"></div> <input type="button" name="btn" value="JS原??式實現(xiàn)異步" οnclick="testJsAjax()">
</body>
</html>2.JQuery實現(xiàn)
JS版的Ajax僅做為了解，我們重點學習jQuery版的Ajax，jQuery是?個優(yōu)秀的js框架，?然對JS原?的Ajax進?了封裝，封裝后的Ajax的操作?法更簡潔，功能更強?，這也是程序員最普遍使?，語法結構簡單，代碼可讀性好。
與Ajax操作相關的jQuery?法經(jīng)常使?的有三種：
2.1 ajax請求
$.ajax({url:"",data:{},type:"post/get",async:true,dataType:"text",success:function(obj){},error:function(){}
})
注意事項：
- 每個屬性后都要跟隨?個英?逗號，最后?個不?。
- 每?個屬性都是鍵值對的形式存在，中間?英?冒號:隔開
- data:{} 是?個特殊的寫法，值是?個{}，??使?鍵值對存儲
例如：data:{“鍵1”:值1, “鍵2”:值2, “鍵3”:值3}- 以上屬性沒有先后順序要求
2.2 get請求
$.get(URL,data,function(data,status,xhr),dataType)
| 參數(shù) | 含義 |
|---|---|
| URL | 必需。規(guī)定您需要請求的 URL。 |
| data | 可選。規(guī)定連同請求發(fā)送到服務器的數(shù)據(jù)。 |
| function(data,status,xhr) | 可選。規(guī)定當請求成功時運行的回調函數(shù)。 額外的參數(shù)： ? data 包含來自請求的結果數(shù)據(jù)" ? status 包含請求的狀態(tài)（“success”、“notmodified”、“error”、“timeout”、“parsererror”） ? xhr 包含 XMLHttpRequest 對象 |
| dataType | 可選。規(guī)定預期的服務器響應的數(shù)據(jù)類型。 ? 默認地，jQuery 會智能判斷。 ? 可能的類型： ? “xml” - 一個 XML 文檔 ? “html” - HTML 作為純文本 ? “text” - 純文本字符串 ? “script” - 以 JavaScript 運行響應，并以純文本返回 ? “json” - 以 JSON 運行響應，并以 JavaScript 對象返回 ? “jsonp” - 使用 JSONP 加載一個 JSON 塊，將添加一個 “?callback=?” 到 URL 來規(guī)定回調 |
注意事項：
- 這種寫法功能和$.ajax是?樣的，但是嚴格要求屬性順序。
實例：
請求 “/try/ajax/test.php”，但是忽略返回結果：
$.get("/try/ajax/test.php");
請求 “/try/ajax/test.php” 并連同請求發(fā)送一些額外的數(shù)據(jù)（忽略返回結果）：
$.get("/try/ajax/test.php", { name:"Donald", town:"Ducktown" });
請求 “/try/ajax/test.php” 并傳遞數(shù)據(jù)數(shù)組到服務器（忽略返回結果）：
$.get("/try/ajax/test.php", { 'colors[]' : ["Red","Green","Blue"] });
請求 “/try/ajax/test.php” 并提醒請求的結果：
$.get("/try/ajax/test.php", function(data){
alert("Data: " + data);
});
2.3 post請求
$(selector).post(URL,data,function(data,status,xhr),dataType)
實例：使用 AJAX 的 POST 請求來改變div元素的文本
$.post("demo_ajax_gethint.html",{suggest:txt},function(result){$("span").html(result);
});
參考資料：
- CSDN博主「PIKapikaaaa」
https://blog.csdn.net/PIKapikaaaa/article/details/124914380- 菜鳥教程 AJAX 教程
https://www.runoob.com/ajax/ajax-tutorial.html