四似忧、Ajax的XML
1.請求的數(shù)據(jù)格式-XML
1）客戶端如何構(gòu)建XML格式的數(shù)據(jù)
構(gòu)建的數(shù)據(jù)類型 - 字符串類型
字符串的內(nèi)容要符合XML格式的語法要求
2）服務器端如何接受符合XML格式的數(shù)據(jù)
接收到的客戶端的請求數(shù)據(jù) - 字符串類型渣叛，php集成了DOM的相關(guān)內(nèi)容
DOMDocument
DOMElement
DOMNode
2.響應的數(shù)據(jù)格式-XML
1）服務器端如何構(gòu)建符合XML格式的數(shù)據(jù)
設置服務器端的響應頭Content-Type值為text/xml
header("Content-Type:text/xml");
構(gòu)建符合XML格式的數(shù)據(jù)內(nèi)容
手動方式構(gòu)建字符串內(nèi)容
DOMDocument對象的方法
loadXML(符合XML格式的字符串)
saveXML()方式進行響應
2）客戶端如何接受XML格式的數(shù)據(jù)
使用XMLHttpRequest對象的responseXML屬性接收
接收到的就是XML DOM對象(不需要進行解析)
練習：二級聯(lián)動(服務器端響應的格式為xml)
五、json
- JSON - javascript object notation(JS原生支持)
- json數(shù)據(jù)格式源于j
- 特點：
易于程序員閱讀和編寫
易于計算機解析和生成
json是目前網(wǎng)絡上使用最廣泛的數(shù)據(jù)格式之一 - JSON的結(jié)構(gòu)
Array和Object
支持的數(shù)據(jù)類型
字符串盯捌、數(shù)值、布爾值蘑秽、對象饺著、數(shù)組、null
六肠牲、ajax中的json格式
請求格式為json
客戶端向服務器端發(fā)送請求為json格式的數(shù)據(jù)
構(gòu)建符合JSON格式的字符串
定義字符串時幼衰，保證里面使用雙引號，外面使用單引號
服務器端接受json格式的數(shù)據(jù)
使用json_decode()函數(shù)進行解析
json_decode($json,true);ture代表是否轉(zhuǎn)換為數(shù)組-
響應格式為json
服務器端向客戶發(fā)送響應為json格式的數(shù)據(jù)
手工方式構(gòu)建json格式的字符串
使用json_encode()函數(shù)將php變量(數(shù)組)缀雳，轉(zhuǎn)換成復合json格式的字符串
客戶端接受json格式的數(shù)據(jù)
使用XMLHttpRequest對象的responseText屬性接受
然后使用eval函數(shù)進行轉(zhuǎn)換,如果使用()包裹渡嚣，eval函數(shù)強制轉(zhuǎn)換為js代碼，
var json = eval("("+data+")");
七肥印、 HTML(文本)识椰、XML格式、JSON格式的優(yōu)缺點
HTML: 簡單深碱，但解析復雜
XML: 構(gòu)建腹鹉、解析復雜
JSON: 輕量級
一、jQuery中的ajax
-
封裝第一層 - 類似于原生ajax的用法
$ajax
-
封裝第二層 - 基于第一層再次封裝
$().load(); $.post(); $.get(); -
封裝的第三層 - 特殊用法
$.getScript(); - 動態(tài)讀取腳本(js代碼) $.getJson(); - 接收json格式數(shù)據(jù)
二敷硅、load(url,data,callback)方法
1. 最簡單功咒、局限性最大
url - 設置ajax的請求地址
data - 設置ajax的請求數(shù)據(jù)
要求為key:value格式，其實就是js的對象格式
callback: ajax請求成功后的回調(diào)函數(shù)
回調(diào)函數(shù)的參數(shù)就是服務器返回的數(shù)據(jù)
2. 服務器響應的數(shù)據(jù)自動寫入調(diào)用load方法的屬性中
3. load()方法的請求類型
1）沒有請求數(shù)據(jù)時绞蹦，請求類型是GET
2) 發(fā)送請求數(shù)據(jù)時力奋，請求類型是POST
4. load()方法接受服務器端的響應數(shù)據(jù)
是以字符串類型(HTML格式)來接受
三、get/post()方法
-
get(url,data,callback,type)
1. 參數(shù) url - 設置ajax的請求地址 data - 設置ajax的請求數(shù) 要求為key:value格式幽七，其實就是js的對象格式 callback: ajax請求成功后的回調(diào)函數(shù) 回調(diào)函數(shù)的參數(shù)就是服務器返回的數(shù)據(jù) type:設置服務器端響應的數(shù)據(jù)格式 默認為HTML景殷，還可以為xml/json無論是否發(fā)送請求數(shù)據(jù)，請求類型都是GET
$.get()方法可以接受HTML/XML/JSON格式
-
post(url,data,callback,type)
使用方式跟get一模一樣
四、$.ajax(options)方法
options的格式是{key:value}
url:請求地址
type:請求類型滨彻，默認為get
async:是否異步藕届，默認為true
-
contentType POST方式發(fā)送數(shù)據(jù)的前提
默認值為application/x-www-form-urlencoded
data:請求數(shù)據(jù)，格式必須為key=value
-
success:請求成功后的回調(diào)函數(shù)
function(data,textStatus)
data - 服務器響應的內(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ù)響應格式
HTML/XML/JSON
五休偶、使用$.getScript(url,calback)動態(tài)讀取腳本
若JS代碼過多時，會影響HTML頁面加載的速度辜羊，如果已被加載的JS代碼并不是立即執(zhí)行踏兜，只加載馬上執(zhí)行的js代碼，會提交效率
-
參數(shù)
url - 讀取腳本的地址(本地或服務器)
calback - 回調(diào)函數(shù)
六八秃、表單的Ajax異步提交 -
-
表單的序列化
1）serialize() 返回的是json字符串
使用表單元素的name屬性值
{key:value}2）serializeArray() 返回的是json對象
json對象由一個對象數(shù)組組成
[obj1,obj2,obj3,...]注意：
表單必須要有name屬性
-
jQuery.form插件
1）實現(xiàn)表單的異步提交碱妆，底層機制，還是使用正常的表單提交機制
2）兩個核心方法 - 參數(shù)既是一個option參數(shù)
ajaxForm(options)方法ajaxForm()不能提交表單昔驱。在document的ready函數(shù)中疹尾，使用ajaxForm來為AJAX提交表單進行準備。提交動作必須由submit開始 ajaxSubmit(option)方法 ajaxSubmit()馬上由AJAX來提交表單骤肛。你可以在任何情況下進行該項提交纳本。-
參數(shù)
target 服務器返回內(nèi)容所存放的元素ID beforeSubmit 提交前回調(diào)函數(shù)，如果返回false腋颠，則不提交 success 提交后的回調(diào)函數(shù)繁成，一般有兩個參數(shù)responseText,statusText url 默認是form的action，如果聲明淑玫，則覆蓋 type 默認是form的method巾腕，如果聲明，則覆蓋 dataType html(默認),xml,script,json….接受服務端返回的類型 clearForm 布爾值絮蒿，成功提交后尊搬，是否清除所有表單元素值 resetForm 布爾值，成功提交后歌径，是否重置所有表單元素值 timeout 限制請求時間毁嗦，大于該時間后則跳出請求
-
-
表單異步提交的方式
1）不使用submit按鈕，而是使用button按鈕回铛，通過綁定click事件狗准，實現(xiàn)提交
表單的序列化 表單的異步提交-
(常用)依舊使用submit事件，在form元素中綁定onsubmit事件茵肃，在onsubmit事件的處理函數(shù)中要做如下事情
表單的序列化
表單的異步提交
組織表單的默認行為
3
-
七腔长、getJson()方法 - 可以實現(xiàn)跨域提交
- 什么叫做跨域
跨域：
完全跨域 - IP不同
跨子域 - IP相同，但端口號不同
域名：
頂級域名 - http://www.baidu.com
二級域名 - http://www.baidu.com/kongjian
萬維網(wǎng)協(xié)議：
默認是不允許跨域請求的
服務器那邊返回的是一個函數(shù)字符串
$.getJson("url?callback=?",function(data) })
