什么是ajax

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

傳統方法的缺點:

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

XMLHttpRequest 對象

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

五步使用法:

　　1.創建XMLHTTPRequest對象

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

　　3.設置發送的數據，開始和服務器端交互

　　4.注冊事件

　　5.更新界面

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

get請求：

// 步驟一：創建異步對象

var ajax = new XMLHTTPRequest()

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

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

//? 步驟三：發送請求

ajax.send()

//? 步驟四：注冊事件? onreadystatechange 狀態改變就會調用

ajax.onreadystaterchange = function(){

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

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

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

　　}

}

?

post請求：

//? 步驟一：創建異步對象

var xhr = new XMLHTTPRequest()

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

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

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

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

//? 步驟三：發送請求

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

//? 步驟四：注冊事件? onreadystatechange 狀態改變就會調用

xhr.onreadyStatechange = function(){

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

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

　　　　console.log(xhr.responseText)

　　}

}

?

轉載于:https://www.cnblogs.com/mengyage/p/9560237.html

總結

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

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