032.Ajax+Json+Jquery

標籤：不一致   art   success   pre   顯示   多個   頭資訊   user   如何   

Ajj
A: Ajax
J: JSON
J: jQuery

-----------------------------------------------
JSON
Javascript Object Notation
JS對象標記

class User
{
public int Id{get;set;}
public string Name{get;set;}
public string Phone{get;set;}
// public string HomeAddress{get;set;}
// public string OfficeAddreess{get;set;}
}
User u=new User{Id=1001,Name="aaa"};
User[] array= new User[2];
array[0]=new User{Id=1001,Name="aaa"};
array[1]=new User{Id=1002,Name="bbb"};
User[] array={
new User{Id=1001,Name="aaa"},new User{Id=1002,Name="bbb"}}

var u={"Id":1001,"Name":"aaa","Phone":"13912345678"}
var array=[{"Id":1001,"Name":"aaa","Phone":"13912345678"},
{"Id":1002,"Name":"bbb","Phone":"1381111111"}
]

json格式 以索引值對的形式描述對象的屬性名稱與屬性值
單一對象
{k1:v1,k2:v2,.........}
對象數組
[{k1:v1,k2:v2,......},{},{}]

class ShipAddress
{
public string Home{get;set;}
public string Office{get;set;}
}
var add={"Home":"北京海澱","Office":"北京朝陽"}
class User
{
public int Id{get;set;}
public string Name{get;set;}
public string Phone{get;set;}
public ShipAddress Address{get;set;}
}
JSON表示綜合物件
var u={
"Id":1001,"Name":"aaa","Phone":"13912345678",
"Address":{"Home":"北京海澱","Office":"北京朝陽"}
}
{k1:v1,K2:v2,k3:v3, k4: { json對象 } }
---------------------------------------------------------------------------------------------------------------------
Ajax
Asysnchronization JavaScript and XML
在用戶端瀏覽器使用XmlHttpRequeset對象向服務端發送請求，
服務端對用戶端應答文本資料,
用戶端在不重新整理頁面的情況下，實現與服務端的資料互動

XmlHttpRequeset對象(2+4+1 七大屬性事件與方法)

open(type,url,asyn)方法 開啟與服務端的串連
type:請求類型 post,get
url: 服務端接收請求的路徑
asyn:是否非同步 true/false

send(data)方法 發送請求
data:向服務端提交的資料
1. get請求 不需要data參數 因為get請求的資料存在於url
2. post請求 需要data參數 格式 a=1&b=2&c=3

readyState屬性
0,1,2,3,4

status屬性
200表示服務端正常響應
404,500,403

responseText屬性
responseXML屬性

事件onreadystatechange
為該事件提供事件處理常式,也就是一個js函數,響應請求狀態改變事件

1建立XmlHttpRequest對象
2訂閱onreadystatechange事件
3.開啟串連
4.如果是post請求,佈建要求頭部資訊
5發送請求,如果是post請求,send方法需要參數

案例
在註冊時 判斷帳號是否可用
1 服務端建立一個ashx(一般處理常式) ,接收請求
2.用戶端頁面發送ajax 請求
3. 服務端對用戶端的請求作出應答
4. 用戶端根據應答 在頁面提示

-----------------------------------------------------
jQuery中的 ajax操作函數
1. get(url,data,callback,type)
url:請求路徑
data:請求資料 json格式
callback:請求完成後的回呼函數
type:服務端返回的資料格式 text,xml,json,html,javascript

2. getJSON(url,data,callback)
url:請求路徑
data:請求資料 json格式
callback:請求完成後的回呼函數

3. post(url,data,callback,type)
url:請求路徑
data:請求資料 json格式
callback:請求完成後的回呼函數
type:服務端返回的資料格式 text,xml,json,html,javascript

4. ajax(settings)
settings:基於json格式的請求配置
{ "url":請求路徑,
"data":請求資料,
"dataType": 伺服器返回的資料格式,
"type:請求類型 post,get,
"cache":是否緩衝
"global": 是否觸發全域事件,
"beforeSend":請求開始的時候
"success": 請求成功後的回呼函數,
"complete":請求完成後的回呼函數,
"error":錯誤的回呼函數,
}
----------------------------------------------------
原生ajax的post請求
1. 建立XMLHttpRequest
2. 訂閱事件
3. 開啟串連
4. 佈建要求頭資訊
5. 發送資料

jQuery中的ajax操作,方法參數中的請求資料都是json格式
1. get 方法
2. post 方法

[{"id":21,"name":"name21","price":923},{"id":22,"name":"name22","price":663},{"id":23,"name":"name23","price":599},{"id":24,"name":"name24","price":653},{"id":25,"name":"name25","price":287},{"id":26,"name":"name26","price":773},{"id":27,"name":"name27","price":898},{"id":28,"name":"name28","price":201},{"id":29,"name":"name29","price":234},{"id":30,"name":"name30","price":267}]

--------------------------------------------------------------
使用ajax+json+jquery實現類比分頁
1. 服務端建立ProductQuery.ashx,
根據用戶端請求的page頁號,將查詢結果以json字串返回

2. 用戶端向服務端發送ajax請求,擷取json資料

3. 根據擷取的json資料,動態建立table, 並且顯示
-----------------------------------------------------------------------------

使用JS檔案儲存體資料
1. 服務端根據資料庫產生json格式的資料 存在js檔案中
var xxxx=json資料

2. 用戶端瀏覽器訪問頁面的時候，載入js檔案
js檔案可以緩衝在用戶端，檔案的內容實際就是js變數的聲明
相關頁面引入該js檔案,實際就可以訪問js變數

3.如何同步資料
a. 服務端產生的js檔案具有版本名 product_年月日時分秒.js
b. 修改相關引入該js檔案的頁面代碼,
c. 瀏覽器訪問頁面的時候，因為js檔案名稱與用戶端緩衝的js檔案名稱不一致,
會重新載入js檔案,

-------------------------------------------------------------------------------
ajax全域事件
1. ajaxStart() 響應ajax請求開始事件
2. ajaxCompleted() 響應ajax請求完成事件,
無論服務端返回什麼狀態代碼,200,404,500
3. ajaxSuccess() 響應ajax成功事件 狀態代碼200
4. ajaxError() 服務端返回錯誤狀態代碼 403,404,500....

-----------------------------------------------------------------------------
全域事件與ajax方法的選擇策略
1. 如果頁面多個ajax請求 具有相同的呈現邏輯 可以選擇全域事件
2. 如果頁面多個ajax 請求，具有各自不同的呈現邏輯, 可以使用ajax方法進行個性定製

------------------------------------------------------------------------------

購物車頁面
1.初始載入的時候,向伺服器發送ajax請求,擷取客戶的地址清單
2.點擊提交按鈕,向伺服器發送ajax請求,提交訂單

032.Ajax+Json+Jquery