Ajax实现原理是什么? 如何实现
介紹Ajax:
創(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類型
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 数据结构实验-病人看病模拟程序
- 下一篇: excel没有办法输入汉字和英文字母一输