介紹Ajax：

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

是一種交互式網(wǎng)頁應(yīng)用的開發(fā)技術(shù)，不加載頁面的情況下，與服務(wù)器實現(xiàn)交互數(shù)據(jù)

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

創(chuàng)建：

• 創(chuàng)建 ajax 對象以后，我們就使? ajax 對象的?法去發(fā)送請求和接受響應(yīng)

1.創(chuàng)建實例

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

通過xhr我們就可以發(fā)送ajax請求了

配置屬性：

• xhr.status ：服務(wù)器的HTTP狀態(tài)碼 如（404 ： 未找到文件 ， 200： 成功）
• ~.responseText:? 服務(wù)器響應(yīng)? 返回的數(shù)據(jù)? ? ? ??
• ~.statusText: 服務(wù)器返回的狀態(tài)文本信息
• ~.onreadyStateChange :? 事件監(jiān)聽服務(wù)端與你的通信狀態(tài)?

????????????????他是監(jiān)聽 readyState??的狀態(tài)，只要readyState??發(fā)生變化就會觸發(fā)這個事件? ?

???????? ?????????一般我們會監(jiān)聽??readyState??是不是===4? 因為===4 代表成功

• ~.readyState : 請求的狀態(tài)，有四個狀態(tài)?

????????0 : xhr被創(chuàng)建 但是沒被調(diào)用open()方法? ?

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

????????2：send（）方法被調(diào)用，并且已經(jīng)可以獲取狀態(tài)碼和響應(yīng)頭?

????????3：響應(yīng)體下載中 responseText 屬性已包含部分?jǐn)?shù)據(jù)?

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

2.建立連接

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

3.發(fā)送請求

//發(fā)送請求 xhr.send()

4.onreadyStateChange 監(jiān)聽通信狀態(tài)

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

5.發(fā)送請求時攜帶參數(shù)

5.1，?get與post的區(qū)別?

• get參數(shù)會在url地址顯示,post不會
• get相比post更快，更穩(wěn)定
• post可以向服務(wù)器發(fā)送大量數(shù)據(jù)，沒有數(shù)據(jù)限制

5.2，get傳參 直接在url后面進(jìn)行拼接?

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。