<a href="#ajax" target="_blank">AJAX</a>
<a href="#ajax%E7%AE%80%E4%BB%8B" target="_blank">AJAX簡介</a>
<a href="#ajax%E5%88%86%E7%B1%BB" target="_blank">ajax分類</a>
<a href="#ajax%E7%9A%84%E8%AF%AD%E6%B3%95" target="_blank">ajax的文法</a>
<a href="#%E8%A1%A8%E7%A4%BA%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1" target="_blank">表示一個對象</a>
<a href="#%E8%A1%A8%E7%A4%BA%E4%B8%80%E4%B8%AA%E7%94%B1%E5%AF%B9%E8%B1%A1%E7%BB%84%E6%88%90%E7%9A%84%E6%95%B0%E7%BB%84" target="_blank">表示一個由對象組成的數組</a>
<a href="#%E5%B0%86java%E5%AF%B9%E8%B1%A1%E8%BD%AC%E6%8D%A2%E6%88%90json%E5%AD%97%E7%AC%A6%E4%B8%B2" target="_blank">将java對象轉換成json字元串</a>
<a href="#ajax%E5%AE%9E%E7%8E%B0%E8%BF%87%E7%A8%8B" target="_blank">ajax實作過程</a>
<a href="#%E8%8E%B7%E5%8F%96ajax%E5%AF%B9%E8%B1%A1" target="_blank">擷取ajax對象</a>
<a href="#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BF%A1%E6%81%AF" target="_blank">配置請求對象的資訊</a>
<a href="#%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82" target="_blank">發送請求</a>
<a href="#%E7%9B%91%E5%90%ACajax%E5%BC%95%E6%93%8E%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%94%B9%E5%8F%98%E6%98%AF%E5%90%A6%E6%AD%A3%E7%A1%AE%E5%81%9A%E5%87%BA%E4%BA%86%E5%93%8D%E5%BA%94" target="_blank">監聽Ajax引擎對象的改變是否正确做出了響應</a>
<a href="#ajax%E5%BC%95%E6%93%8E%E7%9A%84%E7%8A%B6%E6%80%81%E5%B1%9E%E6%80%A7readystate0-1-2-3-4" target="_blank">Ajax引擎的狀态屬性readyState0 1 2 3 4</a>
<a href="#http%E7%8A%B6%E6%80%81%E7%A0%81xmlhttprequest" target="_blank">HTTP狀态碼xmlHttpRequest</a>
<a href="#onreadystatechange" target="_blank">onreadystatechange</a>
<a href="#jquery%E5%AF%B9ajax%E6%8A%80%E6%9C%AF%E7%9A%84%E6%94%AF%E6%8C%81" target="_blank">jquery對ajax技術的支援</a>
<a href="#ajax%E5%87%BD%E6%95%B0" target="_blank">ajax函數</a>
<a href="#load%E6%96%B9%E6%B3%95" target="_blank">load方法</a>
<a href="#get%E5%92%8C-post%E6%96%B9%E6%B3%95" target="_blank">get和 post方法</a>
<a href="#http%E5%8D%8F%E8%AE%AE%E8%A1%A5%E5%85%85" target="_blank">http協定補充</a>
<a href="#%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84http%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B%E7%9A%84%E4%B8%83%E4%B8%AA%E6%AD%A5%E9%AA%A4" target="_blank">一個完整的HTTP請求過程的七個步驟</a>
<a href="#http%E8%AF%B7%E6%B1%82%E7%9A%84%E5%9B%9B%E9%83%A8%E5%88%86%E7%BB%84%E6%88%90" target="_blank">HTTP請求的四部分組成</a>
是一種用來改善”使用者體驗”的技術,其實質是利用浏覽器内置的一個對象 (ajax對象)異步地向伺服器發送請求。伺服器送回部分資料,浏覽器利用 這些資料對目前頁面做部分更新,整個過程,頁面無重新整理,不打斷使用者的 操作。
一種輕量級的資料交換格式。
注:
資料交換
将資料轉換成一種與平台無關的資料格式(比如xml),然後發送給接收方 來處理。
輕量級
相對于xml,json的文檔更小,解析速度更快。
AJAX指異步 JavaScript 及 XML
不是一種新的程式設計語言,而是一種用于建立更好更快以及互動性更強的 Web 應用程式的技術,是基于JavaScript、XML、HTML、CSS新用法
Ajax:隻重新整理局部頁面的技術
JavaScript:更新局部的網頁
XML:一般用于請求資料和響應資料的封裝
XMLHttpRequest對象:發送請求到伺服器并獲得傳回結果
CSS:美化頁面樣式
異步:發送請求後不等傳回結果,由回調函數處理結果
注:
異步:指的是當ajax對象向伺服器發送請求時,浏覽器不會銷毀 目前頁面,使用者仍然可以對目前頁面做其它的操作。
部分資料:一般不需要傳回完整的頁面。一般是以文本或者xml的形式 傳回。
JavaScript中XMLHttpRequest對象是整個Ajax技術的核心,它提供了異步發送請求的能力
一般我們會将jquery的ajax方法習慣性的分為三種:
{屬性名:屬性值,屬性名:屬性值…}
注意:
- 屬性名必須使用雙引号括起來。
- 屬性值可以是string,number,true/false,null,object。
- 屬性值如果是string,必須使用雙引号括起來。
比如:
var obj ={“code”:”600015”,”name”:”山東高速”,”price”:10}
[{},{},{}….]
通過使用json官方提供的工具(比如json-lib),也可以使用其它 組織或者公司提供的工具(比如google提供的工具)。
JSONObject: 單個對象的轉換
JSONArray:對象組成的集合或者數組的轉換
JSONArray arr = JSONArray.fromObject(stocks);
第一步:Javascript監聽浏覽器網頁事件(點選,送出,更改等)
第二步:由javascript建立Ajax引擎對象
第三步:通過Ajax引擎對象送出請求
第四步:Ajax引擎等待并且接受伺服器的響應内容
第五步:javascript再從Ajax引擎對象中擷取響應内容,并且通過dom改變網頁界面顯示效果
因曆史原因,要區分浏覽器(IE5 和 IE6 使用 ActiveXObject))
xhr.open(‘GET/POST’,’url位址’,[‘是否異步’]);
注意:如果使用post請求,就一定要設定請求頭
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded;charset=gb2312”);
xhr.send([post請求參數字元串]);
發送請求分為兩種情況:
1.監控使用者的事件(onclick,onchange等),通過ajax發送請求
2.監控浏覽器的事件(onload),通過ajax發送請求.
0.請求未初始化
1.伺服器連接配接已建立
2.請求已接收
3.請求進行中
4.請求已完成,并且響應已就緒
當Ajax引擎的狀态屬性為readyState為4時,說明伺服器的響應已經發送給Ajax請求了.
100:資訊類,表示web浏覽器請求,正在進一步的進行中
200:成功,表示使用者請求被正确接收正在進一步的進行中 200 OK
300:表示請求沒有成功,用戶端必須采取進一步的動作
400:用戶端錯誤,表示用戶端送出的請求有錯誤 例如:404 NOT Found,意味着
請求中所引用的文檔不存在
500:伺服器錯誤 表示伺服器不能完成對請求的處理,如500
onreadystatechange屬性是一個方法,監控到響應内容的傳回,根據響應内容使用javascript改變目前頁面的部分html代碼,進而達到不重新整理改變局部html代碼.當Ajax引擎的**狀态發生改變時都會執行**onreadystatechange屬性對應的方法
方法:
方法
描述
abort
取消目前請求
getAllResponseHeaders
擷取響應的所有http頭
getResponseHeader
從響應資訊中擷取指定的http頭
open(method,url,async)
建立一個新的http請求,打開請求,并指定此請求的方法、URL以及驗證資訊(使用者名/密碼)
注:method:請求的類型:GET或POST;
url:檔案在伺服器上的位置;
async:true(異步)或false(同步)
send()
發送請求到http伺服器并接收回應
setRequestHeader
單獨指定請求的某個http頭,header()設定http頭協定資訊
屬性:
屬性
onreadystatechange
指定當readyState屬性改變時的事件處理句柄。
readyState
傳回目前請求的狀态,ajax行進過程中不同狀态
responseBody
将回應資訊正文以unsigned byte數組形式傳回.
responseStream
以Ado Stream對象的形式傳回響應資訊。
responseText
将響應資訊作為字元串傳回.隻讀
responseXML
将響應資訊格式化為Xml Document對象并傳回,隻讀
status
傳回目前請求的http狀态碼. 200 ok 304 緩存;404 not found; 403 沒有權限 501 伺服器級别錯誤
statusText
傳回目前請求的響應行狀态文本, ok not found forbidden
文法
$.ajax({
url:位址,
type:請求類型,
data:送出資料,
async:同步|異步,
dataType:伺服器傳回資料類型,
success:成功回調函數,
error:錯誤回調函數
});
dataType 預期伺服器傳回的資料類型
“xml“: 傳回 XML 文檔,可用 jQuery 處理。
“html“: 傳回純文字 HTML 資訊;包含的 script 标簽會在插入 dom 時執行。
“script“: 傳回純文字 JavaScript 代碼。不會自動緩存結果。除非設定了 “cache” 參數。注意:在遠端請求時(不在同一個域下),所有 POST 請求都将轉為 GET 請求。(因為将使用 DOM 的 script标簽來加載)
“json“: 傳回 JSON 資料 。
“jsonp“: JSONP 格式。使用 JSONP 形式調用函數時,如 “myurl?callback=?” jQuery 将自動替換 ? 為正确的函數名,以執行回調函數。
“text“: 傳回純文字字元串
如果指定為 json 類型,則會把擷取到的資料作為一個 JavaScript 對象來解析,并且把建構好的對象作為結果傳回。為了實作這個目的,它首先嘗試使用 JSON.parse()。如果浏覽器不支援,則使用一個函數來建構。
JSON 資料是一種能很友善通過 JavaScript 解析的結構化資料。如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用 jsonp 類型。使用這種類型的話,會建立一個查詢字元串參數 callback=? ,這個參數會加在請求的 URL 後面。伺服器端應當在 JSON 資料前加上回調函數名,以便完成一個有效的 JSONP 請求。如果要指定回調函數的參數名來取代預設的 callback,可以通過設定 $.ajax() 的 jsonp 參數。
JSONP 是 JSON 格式的擴充。它要求一些伺服器端的代碼來檢測并處理查詢字元串參數。
如果指定了 script 或者 jsonp 類型,那麼當從伺服器接收到資料時,實際上是用了 <script> 标簽而不是 XMLHttpRequest 對象。這種情況下,$.ajax() 不再傳回一個 XMLHttpRequest 對象,并且也不會傳遞事件處理函數,比如 beforeSend。
例子:
作用:
将伺服器傳回的資料直接添加到符合要求的dom對象上
相當于 obj.innerHTML = 伺服器傳回的資料
用法:
$obj.load(url,[請求參數]);
url : 請求位址
請求參數 :
第一種形式:請求字元串,比如: ‘username=zs&age=22’
第二種形式:對象,比如 {‘username’:’zs’,’age’:22}
注意:
- load方法如果沒有參數,會使用get方式發請求。如果有參數,會使用post方式發請求。
- 如果有中文參數值,load方法已經幫我們做了編碼處理。
作用:
向伺服器發送get或者post請求 (get請求ie有緩存問題)
用法:
$.get(url,[data],[callback],[type]);
$.post(url,[data],[callback],[type]);
url : 請求位址
data : 請求參數,形式同上。
callback : 回調函數,可以通過該函數來處理伺服器傳回的資料。
callback格式:
function(data,statusText)
其中,data可以獲得伺服器傳回的資料,
statusText是一個簡單的字元串,描述伺服器處理的狀态。
作用:用戶端向服務端發送請求資訊和服務
用戶端:自己的計算機的浏覽器(web浏覽器)
服務端:伺服器,一台高性能的計算機,作為存儲,處理網絡上的資料,資訊(web伺服器)
伺服器指一個管理資源并為使用者提供服務的計算機軟體,通常分為檔案伺服器、資料庫伺服器和應用程式伺服器。運作以上軟體的計算機或計算機系統也被稱為伺服器。
特點:是一種無狀态的協定(不建立持久的連接配接,服務端不保留連接配接的資訊)
建立TCP連接配接
web浏覽器向web伺服器發送請求指令
web浏覽器發送請求頭資訊
web伺服器應答
web伺服器發送應答頭資訊
web伺服器向浏覽器發送資料
web伺服器關閉TCP連接配接
1.HTTP**請求的方法或動作**,比如GET還是POST
2.正在請求的URL,總得知道請求的位址是什麼
3.請求頭,包含一些用戶端環境資訊,身份驗證資訊等
4.請求體,也就是請求正文,請求正文中可以包含客戶送出的查詢字元串資訊,表單資訊等等;
HTTP請求方法
GET:
一般用于資訊擷取,用get請求–>查詢或擷取的操作
使用URL傳遞參數
對所發送資訊的數量有限制,一般在2000個字
POST:
一般用于修改伺服器上的資料.比如:建立,修改,删除,發送表單資料
對所發送資訊的數量無限制
HTTP響應一般由三部分組成:
1.一個數字和文字組成的狀态碼,用來顯示請求是成功還是失敗
2.響應頭:響應頭也和請求頭一樣包含許多有用的資訊,例如
伺服器類型,日期時間,内容類型和長度等
3.響應體,也就是響應正文
HTTP狀态碼
400:用戶端錯誤,表示用戶端送出的請求有錯誤 例如:404 NOT Found,意味着請求中所引用的文檔不存在