ajax筆記

Ajax

Asynchronous JavaScript and XML

 

1:ajax是什麼?

答:標準的XHTML+CSS

動態的DOM操做

用XML進行數據的傳輸和交換

用XMLHttpRequest對象異步交換數據

用javascript把上述概念綁定.

 

2: ajax的幾種名稱

Ajax

無刷新技術

局部刷新技術

異步刷新技術

 

無刷新技術:

調用ajax程序的頁面,從地址欄上看,沒有變化,沒有刷新,所以,無刷新技術

 

局部刷新技術:

調用ajax程序的頁面,可能經過響應內容,動態的改變部分DOM節點

 

異步刷新技術:

Js會阻塞後面的js代碼執行和html代碼的渲染.

而用異步傳輸數據,不會阻塞後面js代碼執行和html代碼的渲染.

 

同步:就像打電話,電話不掛,人也不幹其餘的,等到掛電話後才能幹其餘的.

異步: 就像發短信,發完短信後,能夠幹其餘的事情,同時等着短信回來.

 

3:XMLHttpRequest的詳細屬性

responseText: 服務器響應的主體信息,body信息. 

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

status: 是服務器的返回狀態碼,例:200,成功, 403 forbidden 禁止, 404 not found未找到

50X系列,內部服務器錯誤

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

readyState: XMLHttpRequest對象自身的狀態碼,0,4   [0,1,4], [2,3,4]

onreadystatechange : 事件屬性,綁定當XMLHttpRequest對象的狀態發生變化的時候,激發的函數

 

4:XMLHttpRequest的詳細方法

open('請求方式',url, 同步/異步); false->同步, true->異步

send(null/參數), 參數的寫法:k1=v1&k2=v2&kn=vn.....

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

Abort: 忽略,不要再進行下去了,到此爲止

getResponseHeader: 獲取響應的某個頭信息

getAllResponseHeaders: 獲取響應的全部頭信息

 

 

 

XMLHttpquest對象在各瀏覽器中的兼容

 

 

先考慮標準狀況,在高版本IE中,也能夠用XMLHttpRequest對象來建立.
Ajax返回值

字符串: 

  短字符串:

    應用場景: 通常返回較短,具備標誌的字符串,如,0/1, succ/fail, 已註冊,未註冊等.

  Json格式字符串:

應用場景: 返回數組或對象等格式化數據

 javascript object notation, javascript原生對象格式

  Html代碼: 一整段html代碼

     應用場景: 當頁面上有大塊的數據變化時, 用數組要牽涉到大量的DOM操做,

     這時,能夠用PHP+Html,預先生成須要的html代碼, 而後以字符串形式返回.

     再innerHTML到頁面中去.

  Jsonp: 

XML

應用場景:返回大量的格式化數據時

若是返回XML來使用

須要1: 服務器端的返回明確指定返回類型XML

2:在客戶端用 responseXML

Json的意義:

 

Json 出現的場景:

在PHP中, 有數組 $arr = array(1,2,3);

在C語言中,也有數組, arr = [1,2,3];

在js裏, 也有數組, arr = [1,2,3]

 

 

PHP有數組, java有數組, C語句也有數組, javascript裏也有數組,

各語言數組的定義也不同,

如何把不一樣語言之間的數組讓其餘語言可以認識?

 

如何解決: 把各語言的數組轉成你們都支持的一種格式,各語言就能夠通訊了.

 

 

 

Json就是一種輕量級的,通用的數組/對象轉換格式.

 

PHP中如何應用json格式

PHP中,能夠對對象/數組  , 應用 json_encode把對象/數組編成 json格式的字符串

也能夠用json_decode把json格式的字符串轉成 對象/數組

 

在javascript裏,若是把json格式的字符串轉成數組或對象?

答: 把該字符串表達式執行一下.

把json格式的字符串,用()包起來,再eval執行一下.

Eval(); // eval

 

Ajax的跨域傳值

出於安全性考慮, XMLHttpRequest只容許訪問相同域下的地址.

 

解決:iframe 

用同域代理來解決

Jsonp: 

參考地址:http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=查詢詞&callback=回調函數名
不用XMLHttpRequest對象,如何達到ajax的效果,好比投票效果

史前時代的ajax

經過動態的建立DOM對象,且DOM引用後臺的程序文件,來達到請求服務器的目的,

好比,動態建立img對象,並設置對象.src 屬性值爲 後臺的.php文件.

這樣,當建立圖片時,後臺的PHP文件就會被請求

 

Jsonp原理:

動態的追加其餘域下的js文件,

其餘文件文件下返回的js文件有其內容, 

本利的回調函數,執行其內容.

 

Jsonp使用注意:

安全性, 遠程給你一段js代碼,安全性是未知的,要當心使用.

 

 

Ajax上傳文件能實現嗎?

XMLHttpRequest發送表單信息和硬盤上的文件內容. (好比一張圖片的二進制信息)

 

表單信息,能夠經過js操做DOM, 讀取表單項的值,

硬盤的文件的內容, 也須要讀取出來,一塊兒發送到服務器.

Js可否讀取硬盤文件呢?  不能. (html5里加了少許權限)

由於也沒法ajax上傳文件?