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