什麼是ajax
傳統方法的缺點:
傳統的web互動是使用者觸發乙個http請求伺服器,然後伺服器收到之後,在做出響應到使用者,並且返回乙個新的頁面,,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的互動、只需從伺服器端得到很簡單的乙個資料,都要返回乙個完整的html頁,而使用者每次都要浪費時間和頻寬去重新讀取整個頁面。這個做法浪費了許多頻寬,由於每次應用的互動都需要向伺服器傳送請求,應用的響應時間就依賴於伺服器的響應時間。這導致了使用者介面的響應比本地應用慢得多。
xmlhttprequest 物件
五步使用法:
1.建立xmlhttprequest物件
2.使用open方法設定和伺服器的互動資訊
3.設定傳送的資料,開始和伺服器端互動
4.註冊事件
5.更新介面
下面給大家列出get請求和post請求的例子
get請求:
// 步驟一:建立非同步物件
// 步驟二:設定請求的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請求:
// 步驟一:建立非同步物件
// 步驟二:設定請求的型別及url
// post請求一定要新增請求頭才行,不然會報錯
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)
js原生ajax請求
建立向後台伺服器的乙個請求 確定傳送的方式方法 傳送請求 確定後台載入完畢 獲取到請求返回的資料 ajax 能夠處理那些型別檔案 文型別檔案 如 html txt js css json xml ajax,需要配合js 的基本事件以及dom操作共同使用。ajax負責的是獲取資料,但是將獲取到的資料放...
原生js的ajax請求
針對get方法 針對post方法 注意 1.setrequestheader 把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open 設定header並和請求一起傳送 post 方法一定要 2.post請求一定要新增請求頭才行不然會報錯 3.open method url asyncfla...
原生js的ajax請求
什麼是ajax 傳統方法的缺點 傳統的web互動式使用者觸發乙個http請求伺服器,然後伺服器在收到之後,在做出響應到使用者,並且返回乙個新的頁面,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的互動 只需從伺服器端得到很簡單的乙個資料都要返回乙個完整的html頁,而使用...