當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax获取数据的流程

發布時間：2023/12/31 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax获取数据的流程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、Ajax的對象 XMLHttpRequest的方法

方法描述

abort()	停止當前請求
getAllResponseHeaders()	把 HTTP請求的所有響應首部作為健／值對返回
getResponseHdader(“header”)	返回指定首部的串值
open(“method”,”url”)	建立對服務器端調用。Method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL
send(conten)	向服務器發送請求
setRequestHeader(“header”,”value”)	把制定首部設置為所提供的值。在設置任何首部之前必須先調用open()

二、發送請求

setRequestHeader(header,value)

當瀏覽器向服務器請求頁面時，它會伴隨著這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據（metadata）.首部信息用來聲明一個請求是GET還是 POST。
Ajax請求中，發送首部信息的工作可以由setRequestHeader完成
參數header :首部的名字；參數 value：首部的值
如果用POST請求向服務器發送數據，需要將”Content-type” 的首部設置為 “application/x-www-form-urlencoded”.它會告知服務器正在發送數據，并且數據已經符合URL編碼來。
該方法必須在open()之后才能調用

三、接收響應

readyState

readyState屬性表示Ajax請求的當前狀態。它的值用數字代表。

0 代表未初始化，還沒有調用open 方法
1 代表正在加載，open方法已經被調用，但 send方法還沒有被調用
2 代表加載完畢。send方法已被調用，請求已經開始
3 代表交互中。服務器正在發送響應
4 代表完成。響應發送完畢
每次readyState值的改變，都會觸發readystatechange事件。如果把onreadystatechange事件處理函數賦給一個函數，那么每次 readyState的值的改變都會引發該函數的執行。
readyState值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把readyState的值統一設為4.

實例代碼呈現

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>window.onload=function(){ // 1、獲取a節點，并為其添加onclick響應函數document.getElementsByTagName("a")[0].onclick=function(){ // 3、創建一個XMLHttpRequest對象var request=null;request= new XMLHttpRequest(); // 4、準備發送請求對數據：url // 增加時間戳起到禁用緩存對目的var url= this.href+"?time="+new Date(); // var method="GET";var method="POST";// 5、調用XMLHttpRequest 對象對open方法request.open(method,url);request.setRequestHeader("ContentType","application/x-www-form-urlencoded");// 6、調用XMLHttpRequest對send方法request.send("name='atguigu'");// 7、為XMLHttpRequest 對象添加onreadystatechange響應函數request.onreadystatechange=function(){if(request.readyState==4){if(request.status==200||request.status==304){alert(request.responseText);}}}// 8、判斷響應是否完成： XMLHttpRequest對象對readyState 屬性值為4對時候 // 9、再判斷響應是否可用：XMLHttpRequest對象對status屬性值為200 // 10、打印響應結果：responseText // 2、取消a節點對默認行為return false;}}</script> </head> <body><a href="helloAjax.txt" >Ajax</a> </body> </html>

總結

以上是生活随笔為你收集整理的Ajax获取数据的流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。