ajax（分析ajax的使用）

1、遠古時代的ajax

1.利用http協議的204特性

設置header('HTTP/1.1 204 No Content')，當瀏覽器收到204時頁面不作跳轉

2.利用圖片加載的特性來完成請求

設置src屬性，瀏覽器將會請求src對應的資源

hh.setAttribute('src', './01-vote.php')

3.利用css,js加載的特完成請求，原理與加載圖片徹底同樣

4.利用ifream特性

iframe爲嵌套在頁面內的另外一個頁面，form表單的action請求路徑，method爲請求方法，target的請求名和iframe的name保持一致，則至關於請求的targe爲iframe頁面，進而實現頁面無刷新，且請求成功的需求。

總結：在不適用xmlHttpRequese對象的狀況下，依然能夠用jsz實現對後臺服務器的請求，同時不帶來頁面的刷新或跳轉。

所謂ajax，是指頁面不刷新的狀況下，利用XMLHttpRequest發送http請求，也就是js的網絡化。

問題：ajax上傳文件能實現嗎？ajax上傳插件是怎麼實現的？

從http協議角度看，上傳文件，則要把文件的內容發送到服務器，若是XMLHttpRequest對象在post數據時把文件的內容也發送過去。

js讀取本地的文件內容-->XHR對象獲取要上傳的文件的內容

但瀏覽器出於安全考慮，js是不能讀取到文件內容的，因此ajax上傳文件是沒法實現的

上傳插件的實現方式：ifream,flash,html5(增長文件讀取api)

2、現代的Ajax

核心：XMLHttpRequest對象，一個專門的http請求工具（須要考慮ie瀏覽器的兼容性）

分析：

1.如何建立該對象

按標準瀏覽器，new XMLHttpRequest()便可獲得

考慮低版本ie，new ActiveXObject('Micorsoft.XMLHTTP')

2.如何利用xhr發送請求，獲取後臺服務器資源？

分析http協議，要請求須要明確這樣幾個因素：

(1)用什麼方法請求：get,post,put,delete,head

(2)請求哪一個資源：須要請求的url地址

(3)同步仍是異步？true異步，false同步

建立xhr對象：var xhr = new XMLHttpRequest()

打開鏈接：xhr.open('GET', './01-vote.php', true)

發送請求：xhr.send(null)

獲取到請求結果： alert(xhr.responseText)

3.請求的結果如何利用上？

若是爲同步，則程序表現爲2秒以後才alert，且獲取到返回值，

若是爲異步，則程序表現爲當即彈出alert框，內容是空的，但兩秒以後能夠獲取到返回值。

因此若是使用異步的話，下面的代碼繼續執行，等請求最終完成，怎麼知道這個變化？

xhr對象在請求與響應過程當中，狀態會由0-4發生變化，能夠綁定一個函數監聽狀態的變化，只要狀態發生變化就觸發某函數

xhr.onreadystatechange = function(){

console.log(this.readyState, '讀取請求過程當中的狀態0-4,4意味着請求完成')

}

若是readyState的狀態爲4且返回值responseText爲1，則可使用請求後的結果，這也是使用異步的好處

3、深度探討ajax

1.XMLHttpRequest的詳細屬性

responseText 服務器響應的主體信息

responseXML 對於大量的格式化文檔，能夠用XML來傳輸或交換，由後臺程序把數據封裝在xml文檔，js接收xml對象並解析該內容

status 服務器的返回狀態碼，200成功,403禁止，400請求語法錯誤，404未找到，5xx內部服務器錯誤

statusText 服務器返回狀態碼對應的文字描述

readyState xhr對象自身的狀態碼（0,1,2,3,4）

onreadystatechange 事件屬性，當xhr對象的狀態碼發生變化時觸發，xhr發送請求後在此方法裏經過status 和readyState 來肯定請求成功而且獲取到數據後去作一些操做

2.XMLHttpRequest的詳細方法

open('請求方式'，url,同步/異步)，使用post請求時請求頭必須加上Content-type和Content-length

send()，沒參數時傳null，有參數時傳‘usernam=11&email=11’這種形式的

setRequestHeader(key,value) 設置請求頭信息

getResponseHeader 獲取響應的某個頭信息

getAllResponseHeaders 獲取響應的全部頭信息

3.返回值類型

　xml類型

   普通文本：

　　返回簡短的標誌字符串，如：0,1，ok

　　後臺返回大段的html代碼，直接innerHTML到前端頁面

　　返回json格式，再由前端去解析

　　返回jsonp(跨域時使用)

　　　　瀏覽器默認是不能跨域的，使用jsonp能夠實現跨域請求，jsonp目前沒有統一的規範，通常都是先後端約定以什麼樣的方式請求，以什麼樣的方式返回數據

　　　　請求的url地址通常是 ：‘http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=11&callback=aa’

　　　　aa爲回調函數

　　　　function aa(res){

　　　　　　console.log(res, '請求成功後，res爲獲取到的數據')

　　　　}

4.異步原理

　　狀態值：

　　　　0 XHR對象剛建立時

　　　　1 open成功後爲1，此時已創建鏈接成功

　　　　2 接收頭信息完畢

　　　　3 接收body信息完畢後

　　　　4 成功結束後

　　同步：代碼從上往下依次執行，必須等前一個執行完後才能繼續往下執行

　　異步： 代碼從上往下執行，當前執行代碼不影響後面的代碼執行，噹噹前代碼須要回調時可當即插隊到進程最前列執行