原生js的ajax請求

傳統方法的缺點:

傳統的web互動是使用者觸發乙個http請求伺服器,然後伺服器收到之後,在做出響應到使用者,並且返回乙個新的頁面,,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的互動、只需從伺服器端得到很簡單的乙個資料,都要返回乙個完整的html頁,而使用者每次都要浪費時間和頻寬去重新讀取整個頁面。這個做法浪費了許多頻寬，由於每次應用的互動都需要向伺服器傳送請求，應用的響應時間就依賴於伺服器的響應時間。這導致了使用者介面的響應比本地應用慢得多。

什麼是ajax

xmlhttprequest 物件

方法

描述

abort()

停止當前請求

getallresponseheaders()

把http請求的所有響應首部作為鍵/值對返回

getresponseheader("header")

返回指定首部的串值

open("method","url",[asyncflag],["username"],["password"])

建立對伺服器的呼叫。method引數可以是get、post或put。url引數可以是相對url或絕對url。這個方法還包括3個可選的引數，是否非同步，使用者名稱，密碼

send(content)

向伺服器傳送請求

setrequestheader("header", "value")

把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()。設定header並和請求一起傳送 ('post'方法一定要 )

五步使用法:

1.建立xmlhttprequest物件

2.使用open方法設定和伺服器的互動資訊

3.設定傳送的資料，開始和伺服器端互動

4.註冊事件

5.更新介面

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

get請求:

//
步驟一:建立非同步物件
//步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starname到服務端
ajax.open('get','getstar.php?starname='+name);
//步驟三:傳送請求
ajax.send();
//步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫
ajax.onreadystatechange = function
()

post請求:

//
建立非同步物件 
//設定請求的型別及url
//post請求一定要新增請求頭才行不然會報錯
xhr.open('post', '02.post.php');
//傳送請求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function
() 
};

為了方便使用,我們可以把他封裝進方法裡面,要用的時候,直接呼叫就好了

function
ajax_method(url,data,method,success) 
else
//設定 方法 以及 url
ajax.open(method,url);
//send即可
ajax.send();
}else
else
}//註冊事件
ajax.onreadystatechange = function
() }
}

原生js的ajax請求

js原生ajax請求

原生js的ajax請求

原生js的ajax請求

相關推薦