Ajax學習（重點）
今日內容
1. AJAX：
2. 原生js方式實現Ajax(瞭解便可，由於太麻煩)
3. jQuery通用方式實現Ajax（重點掌握，之後經常使用）
4. jQuery中get方式實現Ajax(重點掌握，簡單經常使用)
5. jQuery中post方式實現Ajax(重點掌握，簡單經常使用)
複製代碼
一、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：響應結果的類型
複製代碼
二、原生js方式實現Ajax
(具體實現方式參照w3cschool在線文檔) www.w3school.com.cn/html
代碼以下：
複製代碼
<!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）
//一、建立核心對象（根據不一樣瀏覽器進行選擇）
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");
}
//二、創建鏈接（get post）
/**
* 參數： 一、請求方式：get post
* * get方式：請求參數在url後邊拼接,send後邊不拼參數
* * post方式：請求參數在send中定義
* 二、請求的URL：
* 三、同步或異步請求 true(異步) false(同步)
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//三、發送請求
xmlhttp.send();
//四、接受並處理來自服務器的響應結果
//接受並處理來自服務器的響應結果
//獲取方式： 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>
複製代碼
二、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>
複製代碼
四、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>
//定義方法
/**
* 參數： 一、url：請求路徑
* 二、data: 請求參數（可選）
* 三、callback: 回調函數 （可選）
* 四、type: 響應結果的類型 （可選）
*/
function fun() {
$.get("ajaxServlet",{"username":"jack"},function (data) {
alert(data);
},"json");
}
</script>
</head>
<body>
<input type="button" value="發送異步請求" onclick="fun();">
<input>
</body>
</html>
複製代碼
五、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>
//定義方法
/**
* 參數： 一、url：請求路徑
* 二、data: 請求參數（可選）
* 三、callback: 回調函數 （可選）
* 四、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技術就至關的重要了，因此仍是經過這篇文章來鞏固學習把！
複製代碼
六、寫在最後
推薦做者的Github地址：github.com/Lmobjectjquery
相關文章
- 1. nginx學習重點
- 2. HTTP和AJAX重點知識
- 3. python 學習手冊重點
- 4. python學習之路（重點）
- 5. python學習之路重點
- 6. 20160801java學習重點：函數
- 7. JavaScript學習重點四（題點）
- 8. 【AJAX】Ajax學習總結
- 9. AJAX學習（一）瞭解 AJAX
- 10. AJAX學習
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. nginx學習重點
- 2. HTTP和AJAX重點知識
- 3. python 學習手冊重點
- 4. python學習之路（重點）
- 5. python學習之路重點
- 6. 20160801java學習重點：函數
- 7. JavaScript學習重點四（題點）
- 8. 【AJAX】Ajax學習總結
- 9. AJAX學習（一）瞭解 AJAX
- 10. AJAX學習