同步請求和異步請求:
同步請求: 發送方發出數據後,等接收方迴應以後才發下一個數據的通訊方式
異步請求: 發送方發出數據後,不等接收方迴應,接着發送下一個數據的通訊方式
區別:
同步:
使用通過單個線程調用服務;該線程發送請求,在服務運行時阻塞,並且等待響應
2.如果是使用者在服務運行的過程中阻塞時崩潰了,當它重新啓動時,將無法重新連接到正在進行的調用,所以響應丟失了.使用者必須重新調用過程,並且期望這次不會崩潰
異步:
1.使用者通過兩個調用服務: 一個線程發送請求,而另一個單獨的線程接收響應
2.如果使用者在發送了請求之後等響應是崩潰了,當它重新啓動時,可以繼續響應,所以響應不會丟失
1、AJAX簡介
1.定義: 異步JavaScript及XML(Asynchronous JavaScript And XML).它是一系列交互式網頁應用技術的結合體,包含知識有:
1)基於XHTML和CSS標準的表示
2)使用Document Object Model(DOM)進行動態顯示和交互
3)使用XMLHttpRequest與服務器進行異步通信
4)使用JavaScript綁定一切
2.AJAX是一種用於創建快速動態網頁技術
3.通過在後臺與服務器進行少量數據交換,AJAX可以使用網頁實現異步更新.這意味着可以在不重新加載整個網頁情況下,對網頁的某個部分進行更新;而傳統的網頁(不使用AJAX)如果需要更新內容,必須重載整個頁面.
XMLHttpRequest:是AJAX的核心對象,用於實現發送和接收HTTP請求與響應信息
1.open(method,uri,async,[username],[password]) -> 建立到服務器的新請求
method -> 請求方式(get, post , put, delete或head)
uri -> 請求的服務器地址
async -> 設置異步或同步,true(默認)/false
根據需要可傳username和password給服務器進行用戶驗證
2.setRequestHeader(header, value) -> 設置請求的頭信息,當readyState 屬性值爲1時, 可以在調用open()方法後調用這個方法,否則將得到一個異常
3.getResponseHeader() -> 用於檢索響應的頭部值.但readyState屬性值爲3或4時,可以調用此方法, 否則返回一個空字符串. 此外還可以通過getAllResponseHeaders()方法獲取所有的 HttpRespons的頭部信息
4.send([data]) -> 向服務器發送了請求, 若爲POST請求,可以通過參數data傳遞數據給服務器,若不傳遞參數可以顯示的調用send(null),等同於send();
//設置表單傳輸的編碼格式,若爲POST傳值,這要顯示設置
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
application/x-www-form-urlencoded: 標準的編碼格式,數據被編碼爲名稱/值對
5.readyState屬性 -> 提供當前HTML的就緒狀態,有0-4個狀態
0: 未初始化狀態,創建了XMLHttpRequest對象,但未初始化
1: 準備發送狀態,調用了XMLHttpRequest對象的open()方法,並且XMLHttpRequest對象已經準備好將一個請求發送到服務器端
2: 已發送狀態,已經通過send()方法把一個請求發送到服務器端,但還沒收到響應
3: 正在接收狀態,已經接收到HTTP響應頭部信息,但是消息體部分還沒有完全接收到
4: 完成響應狀態, 已經完成了HttpRequest響應的接收
6.status屬性 -> 返回HTTP狀態代碼,如200,400. readyState屬性值爲3或4時纔可用
7.statusText屬性 -> 返回HTTP狀態代碼對應的文本如200->ok, 404->Not Found. readyState屬性值爲3或4時纔可用
8.abort() -> 退出當前請求
9.responseText屬性 -> 獲得字符串形式的響應數據, 但readyState值爲4時, 該屬性才包含完整的響應信息
10.responseXML屬性 -> 獲得XML形式的響應數據, 但readyState屬性值爲4,且響應頭部的Content-Type的MIME類型被自動爲XML(text/xml或application/xml)時,該屬性纔有值並且被解析爲一個XML文檔,否則該屬性值爲null,如果返回的XML文檔結果不良或未完成響應回傳,該屬性值也會爲null
11.onreadystatechange -> 每當readyState屬性值發生改變時,就會觸發onreadychange事件,一般都通過該事件來觸發回傳處理函數
2、操作步驟
1.創建XMLHttpRequest對象
function getXmlHttp() {
var xmlHttp;
//檢查瀏覽器是否支持XMLHttpRequest對象
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp ;
}
2.初始化HTTP請求參數(定義open()方法)
3.發送請求(調用send()方法)
4.設置回調函數 -> 判斷readyState是否爲4以及status是否爲200,然後通過responseText或responseXML獲取服務器返回的數據
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("result").innerHTML = xmlHttp.responseText ;
}
3、jQuery中AJAX操作
1.$.load()
-> 加載HTML的內容
$("#content").load("loaded.html #s") ;
-> 篩選加載HTML內容
$("#content").load("loaded.html #s") ;
-> 傳遞參數(get)
$("#content").load("getDate.jsp?num=2&t="+Math.random()) ;
-> 傳遞參數(post)
$("#content").load("getDate.jsp #n",{num:3}) ;
-> 回調函數
function(data) {}
注：date返回的是HTML文檔 alert(date) ;
注: 可以把以上的HTML文檔轉換爲jQuery對象,然後訪問HTML文檔中的某部分內容,當要注意以下兩點:
1)html文檔中根據節點使用filter方法獲取
2)html文檔中子節點使用find方法獲取
->回調函數的三個參數
function(responseText,textStatus,XMLHttpRequest) {}
responseText:同上面的data, 請求返回的內容
textStatus:請求的狀態, 如success,error,timeout等
XMLHttpRequest:XMLHttpRequest對象
2.$.get()/$.post()
1)$.get(url,[data],[callback],[type])
2)$.post(url,[data],[callback],[type])
url:待載入頁面的URL地址(某個servlet程序)
data:待發送 Key/value 參數
callback:載入成功時回調函數(請求成功後[success]纔會觸發此函數)
type:返回內容格式,xml, html, script, json, text, _default
3.$.ajax() -> 通過HTTP請求加載遠程數據
ajax(url,[settings]) -> url: 一個用來包含發送請求的URL字符串
settings: AJAX 請求設置,所有選項都是可選的
4.$.ajaxSetup() -> 設置全局AJAX默認選項
5.$.parseJSON() -> 接收一個JSON字符串,返回解析後的對象,類似於eval()函數
6.$.getScript()/$.getJSON()
$.getScript():通過 HTTP GET請求載入並執行一個 JavaScript 文件
$.getJSON():通過 HTTP GET 請求載入 JSON 數據
回調函數: 成功載入JSON文件或JSON數據後觸發該函數,可使用$.each()方法遍歷對象和數組(查看API文檔)
語法 -> $.each("數組或對象",回調函數(對象的成員或數組的索引,變量或內容){ })
退出each循環 -> return false ;
7.全局函數
1)ajaxComplete -> AJAX 請求完成時執行函數
2)ajaxError -> AJAX 請求發生錯誤時執行函數
3)ajaxSend -> AJAX 請求發送前執行函數(有回調函數)
4)ajaxStart -> AJAX 請求發送前執行函數
5)ajaxStop -> AJAX 請求結束時執行函數
6)ajaxSuccess -> AJAX 請求結束時執行函數(有回調函數)
3、jQuery中的AJAX相關工具函數
1.serialize() -> 序列表表格內容爲字符串
2.serializeArray() ->序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數據結構數據
3.$.param() ->將表單元素數組或者對象序列化,是.serialize()的核心方法