AJAX介紹和使用
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
菜鳥教程地址
https://www.runoob.com/ajax/ajax-tutorial.html
簡介
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標准的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
異步和同步
客戶端和服務器端相互通信的基礎上
- 客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。
- 客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。
實現方式
使用js
//1.創建核心對象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立連接
/*
參數：
1. 請求方式：GET、POST
* get方式，請求參數在URL后邊拼接。send方法為空參
* post方式，請求參數在send方法中定義
2. 請求的URL：
3. 同步或異步請求：true（異步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.發送請求
xmlhttp.send();
//4.接受並處理來自服務器的響應結果
//獲取方式 ：xmlhttp.responseText
//什么時候獲取？當服務器響應成功后再獲取
//當xmlhttp對象的就緒狀態改變時，觸發事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//獲取服務器的響應結果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
使用jquery
$.ajax實現
$.ajax({
url:"ajaxServlet1111" , // 請求路徑
type:"POST" , //請求方式
//data: "username=jack&age=23",//請求參數
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//響應成功后的回調函數
error:function () {
alert("出錯啦...")
},//表示如果請求響應出現錯誤，會執行的回調函數
dataType:"text"//設置接受到的響應數據的格式
});
$.get 發送get請求
-
語法：$.get(url, [data], [callback], [type])
-
參數：
url：請求路徑
data：請求參數
callback：回調函數
type：響應結果的類型
$.post() 發送post請求
-
語法：$.post(url, [data], [callback], [type])
-
參數：
url：請求路徑
data：請求參數
callback：回調函數
type：響應結果的類型
感謝
菜鳥教程
黑馬程序員
萬能的網絡
以及勤勞的自己
關注公眾號： 歸子莫，獲取更多的資料，還有更長的學習計划