介紹Ajax：

Ajax全稱：Async JavaScript and Xml （異步JavaScript和XML）

是一種交互式網頁應用的開發技術，不加載頁面的情況下，與服務器實現交互數據

簡單的來說通過XmlHttprequest對象向服務器發送異步請求，獲取數據后。使用JavaScript操作dom元來刷新頁面

創建：

• 創建 ajax 對象以后，我們就使? ajax 對象的?法去發送請求和接受響應

1.創建實例

?// 創建實例化 xhr異步對象const xhr = new XMLHttpRequest()

通過xhr我們就可以發送ajax請求了

配置屬性：

• xhr.status ：服務器的HTTP狀態碼 如（404 ： 未找到文件 ， 200： 成功）
• ~.responseText:? 服務器響應? 返回的數據? ? ? ??
• ~.statusText: 服務器返回的狀態文本信息
• ~.onreadyStateChange :? 事件監聽服務端與你的通信狀態?

????????????????他是監聽 readyState??的狀態，只要readyState??發生變化就會觸發這個事件? ?

???????? ?????????一般我們會監聽??readyState??是不是===4? 因為===4 代表成功

• ~.readyState : 請求的狀態，有四個狀態?

????????0 : xhr被創建 但是沒被調用open()方法? ?

????????1：open()方法被調用，建立連接，

????????2：send（）方法被調用，并且已經可以獲取狀態碼和響應頭?

????????3：響應體下載中 responseText 屬性已包含部分數據?

????????4：完成 可以使用responseText

2.建立連接

open ?法有三個參數 第?個 請求?式 第?個 url 地址 第三個 是本次請求是否異步，默認為true 表示異步，false 同步 xhr.open('?式', '地址', 是否異步)

3.發送請求

//發送請求 xhr.send()

4.onreadyStateChange 監聽通信狀態

xhr.onreadystatechange = function () {//是否發送成功,if (xhr.readyState == 4) {//200代表后臺響應成功 成功之后我們就可以通過responseText拿取數據if (xhr.status == 200) {console.log(xhr.responseText)}//如果沒有成功,就獲取錯誤狀態碼else {console.log(xhr.status);}}}

5.發送請求時攜帶參數

5.1，?get與post的區別?

• get參數會在url地址顯示,post不會
• get相比post更快，更穩定
• post可以向服務器發送大量數據，沒有數據限制

5.2，get傳參 直接在url后面進行拼接?

const xhr = new XMLHttpRequest() // 直接在地址后面加一個 ?，然后以 key=value 的形式傳遞 // 多個數據用&分割 xhr.open('get', './wqh.text?a=100&b=200') xhr.send()

5.3，post請求傳參是攜帶在請求體中的

?POST發送請求必須設置在 setRequestHeader 請求頭
? ? ? ? ? ? ? ? ? ? application/x-www-form-urlencoded ? ?表單字符類型
? ? ? ? ? ? ? ? ????multiline/form-data ? ? ?表單類型
? ? ? ? ? ? ? ? ? ??application/json? ?json類型

const xhr = new XMLHttpRequest()xhr.open('post', './wqh.text')//Content-type設置類型 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//以key=value&key=value形式發送 xhr.send('key=value&key=value')

6，簡單封裝下-仿jq中$.ajax

/*type 請求方式url 請求url路徑data 要發送的數據success 成功以后執行的函數error 失敗以后執行的函數.toLowerCase()將字符串轉換成小寫 對其他類型不影響*/function $ajax({type = "get",url,data,success,error}) { //當type不傳值的時候給他默認值getxhr = new XMLHttpRequest(); // 實例化xhr對象/*** 如果請求方式為get 并且data參數存在的話* 我們就要和地址進行拼接 因為get傳參方式是在url后邊拼接 * 我們要對他進行處理**/if (type.toLowerCase() == "get" && data) {url += "?" + querystring(data);}xhr.open(type, url, true);if (type.toLowerCase() == "get") {xhr.send();} else {//設置提交數據格式 :content-typexhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//如果data有數據的話 我們就在將參數放到send中 沒有的話就直接請求data ? xhr.send(querystring(data)) : xhr.send();}//監聽通信xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {if (success) {success(xhr.responseText); //將接收的數據拋出}} else {if (error) {error("Error：" + xhr.status); //將錯誤的狀態碼拋出}}}}}function querystring(obj) { //querystring函數就是對我們接收data對象進行處理var str = '';for (var attr in obj) { //首先循環obj這個對像str += attr + "=" + obj[attr] + "&"; //拿到里邊的 鍵值 以 = 號進行拼接 在末尾加上 & }return str.substring(0, str.length - 1); //這一步是因為拼接完成的str 末尾會有一個& }window.onload = function () {var aBtns = document.getElementsByTagName("button");aBtns[0].onclick = function () {$ajax({url: "abc.txt",data: {username: "老六",age: 66,password: "sixsix"},success: function (result) {alert("GET請求到的數據：" + result);},error: function (msg) {alert("GET請求數據錯誤：" + msg);}})}aBtns[1].onclick = function () {$ajax({type: "post",url: "http://localhost:3000/data",// data: {// username: "小王",// age: 18,// password: "200202"// },success: function (result) {alert("POST請求到的數據：" + result);},error: function (msg) {alert("POST請求數據錯誤：" + msg);}})}}

總結

以上是生活随笔為你收集整理的Ajax实现原理是什么？ 如何实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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