Ajax的XML
1.請求的數(shù)據(jù)格式-XML
客戶端如何構(gòu)建XML格式的數(shù)據(jù)
構(gòu)建的數(shù)據(jù)類型 - 字符串類型
字符串的內(nèi)容要符合XML格式的語法要求
-
服務(wù)器端如何接受符合XML格式的數(shù)據(jù)
接收到的客戶端的請求數(shù)據(jù) - 字符串類型，php集成了DOM的相關(guān)內(nèi)容DOMDocument DOMElement DOMNode2.響應(yīng)的數(shù)據(jù)格式-XML
服務(wù)器端如何構(gòu)建符合XML格式的數(shù)據(jù)
設(shè)置服務(wù)器端的響應(yīng)頭Content-Type值為text/xml
header("Content-Type:text/xml");構(gòu)建符合XML格式的數(shù)據(jù)內(nèi)容
DOMDocument對象的方法
loadXML(符合XML格式的字符串)
saveXML()方式進(jìn)行響應(yīng)客戶端如何接受XML格式的數(shù)據(jù)
使用XMLHttpRequest對象的responseXML屬性接收
接收到的就是XML DOM對象(不需要進(jìn)行解析)
json
1.JSON - javascript object notation(JS原生支持)
2.json數(shù)據(jù)格式源于js
3.特點：
- 易于程序員閱讀和編寫
- 易于計算機解析和生成
- json是目前網(wǎng)絡(luò)上使用最廣泛的數(shù)據(jù)格式之一
- Array和Object
- 支持的數(shù)據(jù)類型
- 字符串、數(shù)值、布爾值、對象、數(shù)組、null
ajax中的json格式
1.請求格式為json
客戶端向服務(wù)器端發(fā)送請求為json格式的數(shù)據(jù)
構(gòu)建符合JSON格式的字符串
定義字符串時，保證里面使用雙引號，外面使用單引號
服務(wù)器端接受json格式的數(shù)據(jù)
使用json_decode()函數(shù)進(jìn)行解析
json_decode($json,true);ture代表是否轉(zhuǎn)換為數(shù)組
2.響應(yīng)格式為json
- 服務(wù)器端向客戶發(fā)送響應(yīng)為json格式的數(shù)據(jù)
- 手工方式構(gòu)建json格式的字符串
- 使用json_encode()函數(shù)將php變量(數(shù)組)，轉(zhuǎn)換成復(fù)合json格式的字符串
- 客戶端接受json格式的數(shù)據(jù)
- 使用XMLHttpRequest對象的responseText屬性接受
- 然后使用eval函數(shù)進(jìn)行轉(zhuǎn)換,如果使用()包裹，eval函數(shù)強制轉(zhuǎn)換為js代碼，
var json = eval("("+data+")");
HTML(文本)、XML格式、JSON格式的優(yōu)缺點
- HTML: 簡單，但解析復(fù)雜
- XML: 構(gòu)建、解析復(fù)雜
- JSON: 輕量級
jQuery中的ajax
1.封裝第一層 - 類似于原生ajax的用法
$ajax:
var data = {
name:"jj",
site:1
}
$.ajax({
url:"myPhp04.php",
type:"post",
data:data,
success:function(data,textStatus){
console.log(textStatus);
console.log(data);
},
error:function(){
},
dataType:"json",
})
2.封裝第二層 - 基于第一層再次封裝
$().load();
$.post();
3.封裝的第三層 - 特殊用法
$.getScript(); - 動態(tài)讀取腳本(js代碼)
$.getJson(); - 接收json格式數(shù)據(jù)
load(url,data,callback)方法
1.最簡單、局限性最大
- url - 設(shè)置ajax的請求地址
- data - 設(shè)置ajax的請求數(shù)據(jù)
要求為key:value格式，其實就是js的對象格式 - callback: ajax請求成功后的回調(diào)函數(shù)
回調(diào)函數(shù)的參數(shù)就是服務(wù)器返回的數(shù)據(jù)
2.服務(wù)器響應(yīng)的數(shù)據(jù)自動寫入調(diào)用load方法的屬性中
3.load()方法的請求類型
- 沒有請求數(shù)據(jù)時，請求類型是GET
- 發(fā)送請求數(shù)據(jù)時，請求類型是POST
4.load()方法接受服務(wù)器端的響應(yīng)數(shù)據(jù)
是以字符串類型(HTML格式)來接受
get/post()方法
1.get(url,data,callback,type)
- 參數(shù)
- url - 設(shè)置ajax的請求地址
- data - 設(shè)置ajax的請求數(shù)據(jù)
要求為key:value格式，其實就是js的對象格式 - callback: ajax請求成功后的回調(diào)函數(shù)
回調(diào)函數(shù)的參數(shù)就是服務(wù)器返回的數(shù)據(jù) - type:設(shè)置服務(wù)器端響應(yīng)的數(shù)據(jù)格式
默認(rèn)值為HTML，還可以為xml/json - 無論是否發(fā)送請求數(shù)據(jù)，請求類型都是GET
- $.get()方法可以接受HTML/XML/JSON格式
2.post(url,data,callback,type)
使用方式跟get一模一樣
$.ajax(options)方法
1.options的格式是{key:value}
2.url:請求地址
type:請求類型，默認(rèn)為get
-
async:是否異步，默認(rèn)為true
5.contentType POST方式發(fā)送數(shù)據(jù)的前提
默認(rèn)值為application/x-www-form-urlencoded
6.data:請求數(shù)據(jù)，格式必須為key=value
7.success:請求成功后的回調(diào)函數(shù)function(data,textStatus) data - 服務(wù)器響應(yīng)的內(nèi)容 textStatus - 表示ajax請求的狀態(tài)，此時的值為success
8.error:請求失敗后的回調(diào)函數(shù)
function(XMLHttpRequest,textStatus,errorThrown)
XMLHttpRequest - ajax的核心對象
errorThrown - 錯誤異常信息
textStatus - 表示ajax請求的狀態(tài)
error/timeout/notmodified
9.dataType:數(shù)據(jù)響應(yīng)格式
HTML/XML/JSON
使用$.getScript(url,calback)動態(tài)讀取腳本
1.若JS代碼過多時，會影響HTML頁面加載的速度，如果已被加載的JS代碼并不是立即執(zhí)行，只加載馬上執(zhí)行的js代碼，會提交效率
2.參數(shù)
- url - 讀取腳本的地址(本地或服務(wù)器)
- calback - 回調(diào)函數(shù)
表單的Ajax異步提交 -
1.表單的序列化
serialize() 返回的是json字符串
使用表單元素的name屬性值
{key:value}serializeArray() 返回的是json對象
json對象由一個對象數(shù)組組成
[obj1,obj2,obj3,...]注意：
表單必須要有name屬性
- jQuery.form插件
實現(xiàn)表單的異步提交，底層機制，還是使用正常的表單提交機制
兩個核心方法 - 參數(shù)既是一個option參數(shù)
ajaxForm(options)方法
ajaxForm()不能提交表單。在document的ready函數(shù)中，使用ajaxForm來為 AJAX提交表單進(jìn)行準(zhǔn)備。提交動作必須由submit開始ajaxSubmit(option)方法
ajaxSubmit()馬上由AJAX來提交表單。你可以在任何情況下進(jìn)行該項提交。參數(shù)
target 服務(wù)器返回內(nèi)容所存放的元素ID
beforeSubmit 提交前回調(diào)函數(shù)，如果返回false，則不提交
success 提交后的回調(diào)函數(shù)，一般有兩個參數(shù)responseText,statusText
url 默認(rèn)是form的action，如果聲明，則覆蓋
type 默認(rèn)是form的method，如果聲明，則覆蓋
dataType html(默認(rèn)),xml,script,json….接受服務(wù)端返回的類型
clearForm 布爾值，成功提交后，是否清除所有表單元素值
resetForm 布爾值，成功提交后，是否重置所有表單元素值
timeout 限制請求時間，大于該時間后則跳出請求
http://www.cnblogs.com/popzhou/p/4338040.html
3.表單異步提交的方式
- 不使用submit按鈕，而是使用button按鈕，通過綁定click事件，實現(xiàn)提交
- 表單的序列化
- 表單的異步提交
- (常用)依舊使用submit事件，在form元素中綁定onsubmit事件，在onsubmit事件的處理函數(shù)中要做如下事情
- 表單的序列化
- 表單的異步提交
- 組織表單的默認(rèn)行為
getJson()方法 - 可以實現(xiàn)跨域提交
1.什么叫做跨域
跨域：完全跨域 - IP不同
域名：
頂級域名 - http://www.baidu.com
萬維網(wǎng)協(xié)議：
默認(rèn)是不允許跨域請求的
-
服務(wù)器那邊返回的是一個函數(shù)字符串
$.getJson("url?callback=?",function(data){ })
