今日內容
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