Ajax系列
Ajax
同步交互與異步交互
-
所謂同步交互就是指客戶端向服器端發送請求後,必須等待結果返回才能進行下一次請求html
- 舉例: 好比A跟B說給我一杯水，B去倒水,A等着B去倒水，B倒完水回來給A，A喝完水以後，A繼續作其餘事情!
- 所謂異步交互就是不須要等待結果返回就能夠直接向服務器端發送下一次請求
-舉例: 好比A跟B說給我一杯水，B去倒水，A去作其餘事情，B倒完水，跟A說水來了，A放下其餘事情喝水，A喝完水繼續作其餘事情 - 總結: 同步就是要一個事情一個事情的作,而異步就是同時作多個事情
分析圖:
緩存
實現Ajax異步交互的步驟
- 建立XMLHTTPRequest對象
- 調用XMLHTTPRequest對象的open()方法
- 調用XMLHttpRequest對象的send()方法
- 利用XMLHTTPRequest對象的onreadystatechange事件
- 將接收到的結果更新到HTML頁面
示例代碼:服務器
<body>
<button id="btn">噠噠噠</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 經過ID屬性獲取節點
var btn = document.getElementById('btn');
// 爲獲取的ID屬性綁定點擊事件
btn.addEventListener('click',function () {
// 實現Ajax的異步交互
// 1.建立XMLHTTPRequest對象
var xhr = createXMLHttpRequest();
/*
2.調用XMLHTTPRequest對象的open()方法
* 做用 - 與服務器端創建鏈接
open(method,url)方法
* method - 表示當前的請求方式
* 常見的請求方式爲GET和POST
* url - 表示當前請求的服務器端地址連接
*/
xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.測試XMLHTTPRequest對象.html?');
/*
3.調用XMLHttpRequest對象的send()方法
* 做用 - 將客戶端頁面的數據發送給服務器端
send()方法
* 若是不傳遞任何數據內容時 - 向該方法傳遞null
*/
xhr.send(null);
/*
4.利用XMLHTTPRequest對象的onreadystatechange事件
* 做用 - 用於監聽服務器端的通訊狀態
* 服務器端的通訊狀態中 - 存在着處理完畢(信號)
* 接收服務器端返回的處理結果
*/
xhr.onreadystatechange = function () {// 監聽服務器端的通訊狀態
/*
XMLHttpRequest對象的readyState屬性
* 做用 - 表示服務器端的通訊狀態
* 值:
* 0 - 表示未初始化
* 1 - 表示open()方法被調用
* 2 - 表示send()方法被調用
* 3 - 表示正在響應
* 4 - 表示響應已完畢
*/
if (xhr.readyState === 4) {
/*
接收服務器端返回的處理結果
XMLHttpRequest對象的responseText屬性
* 做用 - 用於接收服務器端的響應結果
*/
console.log(xhr.responseText);
}
}
/*
5.將接收到的結果更新到HTML頁面
*/
});
</script>
</body>
readyState屬性
-
XMLHttpRequest對象的readyState屬性app
- 做用 - 表示服務器端的通訊狀態
-
值:異步
- 0 - 未初始化
- 1 - open()方法被調用
- 2 - send()方法被調用
- 3 - 正在響應
- 4 - 響應已完畢
示例代碼:post
<body>
<button id="btn">噠噠噠</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 經過ID屬性獲取指定元素
var btn = document.getElementById('btn');
// 爲獲取的屬性綁定點擊事件
btn.addEventListener('click',function () {
// 1.建立XMLHttpRequest對象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {// 監聽服務器端的通訊狀態
/*
XMLHttpRequest對象的readyState屬性
* 做用 - 表示服務器端的通訊狀態
* 值
* 0 - 未初始化
* 1 - open()方法被調用
* 2 - send()方法被調用
* 3 - 正在響應
* 4 - 響應已完畢
*/
// console.log(xhr.readyState);
if (xhr.readyState === 4) {
/*
保證當前的異步請求必定是正確的
* XMLHttpRequest對象的status屬性
* 做用 - 獲得當前請求以後的響應狀態碼
* 200 - 表示請求成功
* 304 - 表示請求的資源未變化(轉向獲取本地緩存)
* 404 - 表示服務器端地址未找到
*/
console.log(xhr.status);
if (xhr.status === 200) {
/*
接收服務器端響應的結果
* responseText屬性 - 專門接收字符串類型的結果內容
* responseXML屬性 - 專門接收XML數據格式的結果內容
*/
console.log(xhr.responseText);
}
}
/*if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}*/
};
xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.測試XMLHTTPRequest對象.html?');
xhr.send(null);
});
</script>
</body>
send()方法
-
send(data)方法測試
- 參數data - 表示向服務器端發送的請求數據
-
請求方式url
- 若是當前的請求方式爲GET的話 - send()方法中只能傳遞null值
- 將請求數據添加到請求地址連接中
-
兩種狀況:spa
-
請求數據的格式code
- 若是具備多個請求數據的話，之間使用"&"進行分隔
- 每一個數據格式 -> name=value
-
示例代碼:
<body>
<!--
提交表單時,向服務器端發送數據
* 請求數據被添加請求連接地址中
* 請求數據的格式
1. 若是具備多個請求數據的話,之間使用"&"進行分隔
2. 每一個數據格式 - name=value
-->
<form action="#" method="get">
<input type="text" id="user" name="user">
<input type="text" id="pwd" name="pwd">
<input type="submit">
</form>
<button id="btn">噠噠噠</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 經過ID屬性獲取到指定元素
var btn = document.getElementById('btn');
// 爲獲取到的元素綁定點擊事件
btn.addEventListener('click',function () {
// 1.建立XMLHttpRequest對象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){// 監聽服務器端的通訊狀態
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.測試XMLHTTPRequest對象.html?');
/*
向服務器端發送請求數據
send(data)方法
* 參數data - 表示向服務器端發送的請求數據
* 請求方式
* 若是當前的請求方式爲GET的話 - send()方法中只能傳遞null值
* 將請求數據添加到請求地址連接中
* 兩種狀況:
* 請求數據的格式
1.若是具備多個請求數據的話，之間使用"&"進行分隔
2.每一個數據格式 -> name=value
*
*/
// 人爲方式獲取當前的數據，構建成指定的數據格式
xhr.send(null);
});
</script>
</body>
請求方式
- 若是是GET，send()方法只能傳遞null值 -> 請求數據添加在請求地址中
- 若是是POST，send()方法傳遞請求數據
示例代碼:
<body>
<!--
表單提交時 - MIME類型的默認值
application/x-www-form-urlencoded
-->
<form action="#" enctype="application/x-www-form-urlencoded">
<input type="text" id="user" name="user">
<input type="text" id="pwd" name="pwd">
<input type="submit">
</form>
<button id="btn">噠噠噠</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 經過ID屬性獲取到指定元素
var btn = document.getElementById('btn');
// 爲獲取到的元素綁定點擊事件
btn.addEventListener('click',function(){
// 1.建立XMLHttpRequest對象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){// 監聽服務器端的通訊狀態
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.open('post','http://localhost:63342/untitled/Study2/Ajax系列-01/1.測試XMLHTTPRequest對象.html?');
// 設置請求頭部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/*
send()方法
* 若是是GET，send()方法只能傳遞null值 -> 請求數據添加在請求地址中
* 若是是POST，send()方法傳遞請求數據
*/
xhr.send('user=zhangwuji&pwd=123456');
});
</script>
</body>
相關文章
- 1. jQuery系列：Ajax
- 2. [Ajax系列]Ajax介紹
- 3. web系列之Ajax
- 4. react學習系列之ajax
- 5. django 筆記15 ajax系列
- 6. AJAX系列之一——概述
- 7. HTTP系列 -- AJAX 基礎
- 8. Ajax - ASP.NET MVC 4 系列
- 9. HTTP系列 -- AJAX 進階
- 10. ASP.NET AJAX入門系列
- 更多相關文章...
- • AJAX 簡介 - PHP教程
- • PHP - AJAX 與 PHP - PHP教程
- • PHP Ajax 跨域問題最佳解決方案
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery系列：Ajax
- 2. [Ajax系列]Ajax介紹
- 3. web系列之Ajax
- 4. react學習系列之ajax
- 5. django 筆記15 ajax系列
- 6. AJAX系列之一——概述
- 7. HTTP系列 -- AJAX 基礎
- 8. Ajax - ASP.NET MVC 4 系列
- 9. HTTP系列 -- AJAX 進階
- 10. ASP.NET AJAX入門系列