天天看點

ajax基礎AJAX

<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“: 傳回純文字字元串

ajax基礎AJAX

  如果指定為 json 類型,則會把擷取到的資料作為一個 JavaScript 對象來解析,并且把建構好的對象作為結果傳回。為了實作這個目的,它首先嘗試使用 JSON.parse()。如果浏覽器不支援,則使用一個函數來建構。

  JSON 資料是一種能很友善通過 JavaScript 解析的結構化資料。如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用 jsonp 類型。使用這種類型的話,會建立一個查詢字元串參數 callback=? ,這個參數會加在請求的 URL 後面。伺服器端應當在 JSON 資料前加上回調函數名,以便完成一個有效的 JSONP 請求。如果要指定回調函數的參數名來取代預設的 callback,可以通過設定 $.ajax() 的 jsonp 參數。

  JSONP 是 JSON 格式的擴充。它要求一些伺服器端的代碼來檢測并處理查詢字元串參數。

  如果指定了 script 或者 jsonp 類型,那麼當從伺服器接收到資料時,實際上是用了 &lt;script&gt; 标簽而不是 XMLHttpRequest 對象。這種情況下,$.ajax() 不再傳回一個 XMLHttpRequest 對象,并且也不會傳遞事件處理函數,比如 beforeSend。

例子:

 作用:

   将伺服器傳回的資料直接添加到符合要求的dom對象上

   相當于 obj.innerHTML = 伺服器傳回的資料

 用法:

  $obj.load(url,[請求參數]);

  url : 請求位址

  請求參數 :

    第一種形式:請求字元串,比如: ‘username=zs&amp;age=22’

    第二種形式:對象,比如 {‘username’:’zs’,’age’:22}

ajax基礎AJAX

注意:

- 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是一個簡單的字元串,描述伺服器處理的狀态。

ajax基礎AJAX

  作用:用戶端向服務端發送請求資訊和服務

  用戶端:自己的計算機的浏覽器(web浏覽器)

  服務端:伺服器,一台高性能的計算機,作為存儲,處理網絡上的資料,資訊(web伺服器)

  伺服器指一個管理資源并為使用者提供服務的計算機軟體,通常分為檔案伺服器、資料庫伺服器和應用程式伺服器。運作以上軟體的計算機或計算機系統也被稱為伺服器。

  特點:是一種無狀态的協定(不建立持久的連接配接,服務端不保留連接配接的資訊)

建立TCP連接配接

web浏覽器向web伺服器發送請求指令

web浏覽器發送請求頭資訊

web伺服器應答

web伺服器發送應答頭資訊

web伺服器向浏覽器發送資料

web伺服器關閉TCP連接配接

1.HTTP**請求的方法或動作**,比如GET還是POST

2.正在請求的URL,總得知道請求的位址是什麼

3.請求頭,包含一些用戶端環境資訊,身份驗證資訊等

4.請求體,也就是請求正文,請求正文中可以包含客戶送出的查詢字元串資訊,表單資訊等等;

HTTP請求方法

GET:

  一般用于資訊擷取,用get請求–&gt;查詢或擷取的操作

    使用URL傳遞參數

    對所發送資訊的數量有限制,一般在2000個字

POST:

  一般用于修改伺服器上的資料.比如:建立,修改,删除,發送表單資料

  對所發送資訊的數量無限制

HTTP響應一般由三部分組成:

1.一個數字和文字組成的狀态碼,用來顯示請求是成功還是失敗

2.響應頭:響應頭也和請求頭一樣包含許多有用的資訊,例如

伺服器類型,日期時間,内容類型和長度等

3.響應體,也就是響應正文

HTTP狀态碼

400:用戶端錯誤,表示用戶端送出的請求有錯誤 例如:404 NOT Found,意味着請求中所引用的文檔不存在