什么是ajax

　　ajax的出現(xiàn),剛好解決了傳統(tǒng)方法的缺陷。AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術。通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

傳統(tǒng)方法的缺點:

　　傳統(tǒng)的web交互是用戶觸發(fā)一個http請求服務器,然后服務器收到之后,在做出響應到用戶,并且返回一個新的頁面,,每當服務器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。這個做法浪費了許多帶寬，由于每次應用的交互都需要向服務器發(fā)送請求，應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。

XMLHttpRequest 對象

　　XMLHttpRequest對象是ajax的基礎,XMLHttpRequest 用于在后臺與服務器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。目前所有瀏覽器都支持XMLHttpRequest

五步使用法:

　　1.創(chuàng)建XMLHTTPRequest對象

　　2.使用open方法設置和服務器的交互信息

　　3.設置發(fā)送的數(shù)據(jù)，開始和服務器端交互

　　4.注冊事件

　　5.更新界面

下面給大家列出get請求和post請求的例子

get請求：

// 步驟一：創(chuàng)建異步對象

var ajax = new XMLHTTPRequest()

//? 步驟二：設置請求的url參數(shù)，參數(shù)一是請求的類型，參數(shù)二是請求的url，可以帶參數(shù)，動態(tài)的傳遞參數(shù)starName到服務端

ajax.open('get','getStar.php?starName='+name)

//? 步驟三：發(fā)送請求

ajax.send()

//? 步驟四：注冊事件? onreadystatechange 狀態(tài)改變就會調(diào)用

ajax.onreadystaterchange = function(){

　　if(ajax.readyState==4 && ajax.status==200){

　　　　//? 步驟五：如果能夠進到這個判斷 說明 數(shù)據(jù)完美的回來了，并且請求的頁面是存在的

　　　　console.log(ajax.responseText)? ? // 輸入相應的內(nèi)容

　　}

}

?

post請求：

//? 步驟一：創(chuàng)建異步對象

var xhr = new XMLHTTPRequest()

//? 步驟二：設置請求的類型及url

//? ?post請求一定要添加請求頭才行，不然會報錯

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

xhr.open('post','02.post.php')

//? 步驟三：發(fā)送請求

xhr.send('name=fox&age=18')

//? 步驟四：注冊事件? onreadystatechange 狀態(tài)改變就會調(diào)用

xhr.onreadyStatechange = function(){

　　//??步驟五：如果能夠進到這個判斷 說明 數(shù)據(jù)完美的回來了，并且請求的頁面是存在的

　　if(xhr.readyState==4&&xhr.status==200){

　　　　console.log(xhr.responseText)

　　}

}

?

轉(zhuǎn)載于:https://www.cnblogs.com/mengyage/p/9560237.html

總結(jié)

以上是生活随笔為你收集整理的原生js的ajax请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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