ajax請求的四個步驟
1.什麼是ajax:
非同步javascript和XML。
同步是指:傳送方發出資料後,等接收方發回響應以後才發下一個數據包的通訊方式。
非同步是指:傳送方發出資料後,不等接收方發回響應,接著傳送下個數據包的通訊方式。
無重新整理讀取資料。無需載入整個頁面的情況下,重新整理頁面某一部分。
常用的地方:使用者註冊和聊天室。
ajax基礎
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//ajax能且僅能從伺服器上讀取檔案資訊
ajax('aaa.txt',function (str){alert(str);});
}
有一個aaa.txt的檔案,內容為“大家好”,則通過ajax的讀取,能在瀏覽器中顯示出txt的內容。
==注意==:儲存的txt檔案也必須是utf-8編碼,否則不是亂碼就是出錯
請求並顯示靜態txt檔案
字符集編碼:utf-8編碼
快取、阻止快取,利用url中的‘abc.txt?t=’+new Data().getTime()(毫秒數)
for(var i=0;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
ajax((this .index+1)+".txt?t="+new Date().getTime(),function(str){
oDiv.innerHTML = str;
})
}
}
有三個檔案,分別為1.txt:資料一;2.txt:資料二;3.txt:資料三;
通過上述資料則可以在點選相應按鈕時顯示相應txt文本里的內容;
動態資料:請求js(或json)檔案
在伺服器上讀到的東西全部是以文字(string)的方式,因此無法拿到陣列或者json,需要用eval。
eval(str)的使用:講字串轉換成js程式碼。
伺服器上更多的是放的json或由json組成的陣列。
ajax請求的步驟
1.建立XMLHttpRequest
不同瀏覽器使用的非同步呼叫物件也有所不同,在IE瀏覽器中非同步呼叫使用的是XMLHTTP元件中的XMLHttpRequest物件,而在Firefox瀏覽器中則直接使用XMLHttpRequest元件。
var xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//ie6及以下不相容,針對主流瀏覽器
}else{ // 針對ie5, ie6
xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
}
2.連線伺服器
xmlHttp.open('GET',url,true); //xmlhttp.open(method,url,async)
method 包含 get 和 post兩種方法
url主要是檔案或資源的路徑,async引數為true(代表非同步)或者false(代表同步)
get和post的區別:
(1)是有那個get請求時,引數在url中顯示,而使用post方式,則不會顯示出來。
(2)使用get請求傳送資料量小,post請求傳送資料量大
(3)get請求需注意快取問題,post請求不需要擔心這個問題。
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
1.無法使用快取檔案(更新伺服器上的檔案或資料庫)
2.向伺服器傳送大量資料(POST 沒有資料量限制)
3.傳送包含未知字元的使用者輸入時,POST 比 GET 更穩定也更可靠
3.向伺服器端傳送請求
xmlHttp.send();
4.接受伺服器的返回
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){ //判斷互動是否成功
if(xmlHttp.status == 200){ //獲取伺服器返回的資料 獲取純文字資料
//alert('成功:'+xmlHttp.responseText);
fnSucc(xmlHttp.responseText);
}else{
//alert('失敗');
if(fnFaild){
fnFaild();
}
}
}
}
總的程式碼如下:
function ajax(url,fnSucc,fnFaild){
// 引數;1.連線伺服器的地址 2.成功時函式 3,失敗時函式
// 1. 建立xmlhttprequest物件
var xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//ie6及以下不相容,針對主流瀏覽器
}else{ // 針對ie5, ie6
xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
}
//2. 連線伺服器
xmlHttp.open('GET',url,true); //xmlhttp.open(method,url,async)
// method 包含 get 和 post兩種方法 url主要是檔案或資源的路徑,async引數為true(代表非同步)或者false(代表同步)
//3.向伺服器端傳送請求
xmlHttp.send();
//4.接受伺服器的返回
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){ // 判斷互動是否成功
if(xmlHttp.status == 200){ //獲取伺服器返回的資料 獲取純文字資料
//alert('成功:'+xmlHttp.responseText);
fnSucc(xmlHttp.responseText);
}else{
//alert('失敗');
if(fnFaild){
fnFaild();
}
}
}
}
}
XMLHttpRequest取得相應
- responseText:獲得字串形式的響應資料
- responseXML:獲得xml形式的響應資料
- status和statusText:以數字和文字形勢返回http轉態碼
- getAllResponseHeader():獲得所有的相應
- getResponseHeader():查詢相應中的某個欄位的值
- readState屬性
readystate的五種返回值所代表的意義:
- 0(未初始化) 還沒呼叫open()方法
- 1(載入)已經呼叫send方法(),正在傳送請求
- 2(載入完成)send()方法已經完成,已收到相應
- 3(解析)正在解析響應內容
- 4(完成)相應內容解析完成,可在客戶端呼叫。
ajax中status幾種常態說明:
- 100——客戶必須繼續發出請求
- 101——客戶要求伺服器根據請求轉換HTTP協議版本
- 200——成功
- 201——提示知道新檔案的URL
- 300——請求的資源可在多處得到
- 301——刪除請求資料
- 404——沒有發現檔案、查詢或URl
- 500——伺服器產生內部錯