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