HTTP服務&AJAX編程

標籤：用戶端   同步   基礎   雙引號   響應   剖析   判斷   serialize   變化   

即 Asynchronous Javascript And XML，AJAX 不是一門的新的語言，而是對現有持術的綜合利用。

本質是在HTTP協議的基礎上以非同步方式與伺服器進行通訊。

傳統方式我們是以表單形式與伺服器通訊的。

1.1   非同步

指某段程式執行時不會阻塞其它程式執行，其表現形式為程式的執行順序不依賴程式本身的書寫順序，相反則為同步。

其優勢在於不阻塞程式的執行，從而提升整體執行效率。

                       

 

現實生活中的一個例子

打電話時同步 發訊息是非同步

XMLHttpRequest可以以非同步方式的處理常式。

1.2   XMLHttpRequest

瀏覽器內建對象，用於在後台與伺服器通訊(交換資料) ，由此我們便可實現對網頁的部分更新，而不是重新整理整個頁面。

下面是一個簡單的例子

 

由於XMLHttpRequest本質基於HTTP協議實現通訊，所以結合HTTP協議和上面的例子我們分析得出如下結果：

1.2.1    請求

HTTP請求3個組成部分與XMLHttpRequest方法的對應關係

1、請求行

 

2、要求標頭

 

get請求可以不設定

3、請求主體

 

注意書寫順序

1.2.2    響應

HTTP響應是由服務端發出的，作為用戶端更應關心的是響應的結果。

HTTP響應3個組成部分與XMLHttpRequest方法或屬性的對應關係。

由於伺服器做出響應需要時間（比如網速慢等原因），所以我們需要監聽伺服器響應的狀態，然後才能進行處理。

 

onreadystatechange是Javascript的事件的一種，其意義在於監聽XMLHttpRequest的狀態

1、擷取狀態行（包括狀態代碼&狀態資訊）

 

2、擷取回應標頭

 

3、響應主體

 

我們需要檢測並判斷回應標頭的MIME類型後確定使用request.responseText或者request.responseXML

1.2.3    API詳解

xhr.open() 發起請求，可以是get、post方式

xhr.setRequestHeader() 佈建要求頭

xhr.send() 發送請求主體get方式使用xhr.send(null)

xhr.onreadystatechange = function () {} 監聽響應狀態

xhr.readyState = 0時，UNSENT open尚未調用

xhr.readyState = 1時，OPENED open已調用

xhr.readyState = 2時，HEADERS_RECEIVED 接收到頭資訊

xhr.readyState = 3時，LOADING 接收到響應主體

xhr.readyState = 4時，DONE 響應完成

不用記憶狀態，只需要瞭解有狀態變化這個概念

xhr.status表示響應碼，如200

xhr.statusText表示響應資訊，如OK

xhr.getAllResponseHeaders() 擷取全部回應標頭資訊

xhr.getResponseHeader(‘key‘) 擷取指定頭資訊

xhr.responseText、xhr.responseXML都表示響應主體

註：GET和POST請求方式的差異（面試題）

1、GET沒有請求主體，使用xhr.send(null)

2、GET可以通過在請求URL上添加請求參數

3、POST可以通過xhr.send(‘name=itcast&age=10‘)

4、POST需要設定

 

5、GET效率更好（應用多）

6、GET大小限制約4K，POST則沒有限制

問題？如何擷取複雜資料呢？

1.2.4    XMLHttpRequest2.0

技術總是在實踐中不斷更新的，XMLHttpRequest也不例外

1、可以設定逾時

2、支援FormData對象管理表單資料

3、支援二進位（檔案上傳）

4、支援上傳進度

1.3   JSON

即 JavaScript Object Notation，另一種輕量級的文本資料交換格式，獨立於語言。

1.3.1    文法規則

1、資料在成對的名稱和數值中

2、資料由逗號分隔(最後一個健/值對不能帶逗號)

3、花括弧儲存對象方括弧儲存數組

4、必須要使用雙引號

1.3.2    JSON解析

JSON資料在不同語言進行傳輸時，類型為字串，不同的語言各自也都對應有解析方法，需要解析完成後才能讀取

1、Javascript 解析方法

eavl()、JSON對象  JSON.parse()、JSON.stringify()；

JSON相容處理json2.js

2、PHP解析方法

json_encode()、json_decode()

總結：JSON體積小、解析方便且高效，在實際開發成為首選。

1.4   相容性

IE5、IE6中使用 ActiveObject("Microsoft.XMLHTTP")

如

 

關於IE的相容方面，瞭解即可。

1.5   jQuery中的Ajax

jQuery為我們提供了更強大的Ajax封裝

$.ajax({}) 可配置方式發起Ajax請求

$.get() 以GET方式發起Ajax請求

$.post() 以POST方式發起Ajax請求

$(‘form‘).serialize() 序列化表單（即格式化key=val&key=val）

url 介面地址

type 請求方式

timeout 請求逾時

dataType 伺服器返回格式

data 發送請求資料

beforeSend: function () {} 請求發起前調用

success 成功響應後調用

error 錯誤響應時調用

complete 響應完成時調用（包括成功和失敗）

jQuery Ajax介紹

http://www.css88.com/jqapi-1.9/

第2章JSONP2.1   JSONP

JSON with Padding

1、原理剖析

其本質是利用了<script src=""></script>標籤具有可跨域的特性，由服務端返回一個預先定義好的Javascript函數的調用，並且將伺服器資料以該函數參數的形式傳遞過來，此方法需要前後端配合完成。

只能以GET方式請求

2.2   jQuery中的JSONP

jQuery 的$.ajax() 方法當中整合了JSONP的實現，可以非常方便的實現跨域資料的訪問。

dataType: ‘jsonp‘ 設定dataType值為jsonp即開啟跨域訪問

jsonp 可以指定服務端接收的參數的“key”值，預設為callback

jsonpCallback 可以指定相應的回呼函數，預設自動產生

 

http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/

HTTP服務&AJAX編程