今日內容
1. AJAX：
2. 原生js方式實現Ajax(瞭解即可，因為太麻煩)
3. jQuery通用方式實現Ajax（重點掌握，以後常用）
4. jQuery中get方式實現Ajax(重點掌握，簡單常用)
5. jQuery中post方式實現Ajax(重點掌握，簡單常用)
複製程式碼
1、AJAX學習：
1. 概念： ASynchronous JavaScript And XML 非同步的JavaScript 和 XML
1. 非同步和同步：客戶端和伺服器端相互通訊的基礎上
* 客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
* 客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中，客戶端可以進行其他的操作。
Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。 [1]
通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。
提升使用者的體驗
2. 實現方式：
1. 原生的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);
}
}
2. JQeury實現方式
1. $.ajax()
* 語法：$.ajax({鍵值對});
//使用$.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"//設定接受到的響應資料的格式
});
2. $.get()：傳送get請求
* 語法：$.get(url, [data], [callback], [type])
* 引數：
* url：請求路徑
* data：請求引數
* callback：回撥函式
* type：響應結果的型別
3. $.post()：傳送post請求
* 語法：$.post(url, [data], [callback], [type])
* 引數：
* url：請求路徑
* data：請求引數
* callback：回撥函式
* type：響應結果的型別
複製程式碼2、原生js方式實現Ajax
(具體實現方式參照w3cschool線上文件) www.w3school.com.cn/
程式碼如下：
複製程式碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js方式實現Ajax</title>
<script>
//定義方法
function fun() {
//傳送非同步請求（w3cscool文件中檢視js實現的程式碼 https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp）
//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、建立連線（get post）
/**
* 引數： 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
/**
* onreadystatechange 儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
readyState
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
status
200: "OK"
404: 未找到頁面
*/
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//獲取伺服器的響應結果
var responseText=xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="傳送非同步請求" onclick="fun();">
<input>
</body>
</html>
複製程式碼2、jQuery通用方式實現Ajax
程式碼如下：
複製程式碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery通用方法實現Ajax</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
//定義方法
function fun() {
//使用$.ajax方式實現ajax
$.ajax({
url:"ajaxServlet", //請求路徑
type:"post", //請求方式
//data:"username=jack&age=20", //請求引數
data:{"username":"jack","age":20}, //json方式設定請求引數
success:function (data) {
alert(data);
},//響應成功後的回撥函式
error:function () {
alert("出錯了。。。");
},//表示如果請求響應出現錯誤，會執行的回撥函式
dataType:"json" //設定接受到的響應資料的格式
});
}
</script>
</head>
<body>
<input type="button" value="傳送非同步請求" onclick="fun();">
<input>
</body>
</html>
複製程式碼4、jQuery中get方式實現Ajax
程式碼如下：
複製程式碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery通用方法實現Ajax</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
//定義方法
/**
* 引數： 1、url：請求路徑
* 2、data: 請求引數（可選）
* 3、callback: 回撥函式 （可選）
* 4、type: 響應結果的型別 （可選）
*/
function fun() {
$.get("ajaxServlet",{"username":"jack"},function (data) {
alert(data);
},"json");
}
</script>
</head>
<body>
<input type="button" value="傳送非同步請求" onclick="fun();">
<input>
</body>
</html>
複製程式碼5、jQuery中post方式實現Ajax
程式碼如下
複製程式碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery通用方法實現Ajax</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
//定義方法
/**
* 引數： 1、url：請求路徑
* 2、data: 請求引數（可選）
* 3、callback: 回撥函式 （可選）
* 4、type: 響應結果的型別 （可選）
*/
function fun() {
$.post("ajaxServlet",{"username":"jack"},function (data) {
alert(data);
},"json");
}
</script>
</head>
<body>
<input type="button" value="傳送非同步請求" onclick="fun();">
<input>
</body>
</html>
複製程式碼心得體會：Ajax相當的重要，以後要達到使用者完美的體驗度，採用非同步請求處理方式傳送數
據，所以ajax技術就相當的重要了，所以還是通過這篇文章來鞏固學習把！
複製程式碼6、寫在最後
推薦作者的Github地址：github.com/Lmobject