一助泽、Ajax概述
1.什么是同步啰扛,什么是異步
同步現(xiàn)象:客戶端發(fā)送請求到服務(wù)器端,當(dāng)服務(wù)器返回響應(yīng)之前嗡贺,客戶端都處于等待 卡死狀態(tài)
異步現(xiàn)象:客戶端發(fā)送請求到服務(wù)器端隐解,無論服務(wù)器是否返回響應(yīng),客戶端都可以隨 意做其他事情诫睬,不會被卡死
2.Ajax的運(yùn)行原理
頁面發(fā)起請求煞茫,會將請求發(fā)送給瀏覽器內(nèi)核中的Ajax引擎,Ajax引擎會提交請求到 服務(wù)器端岩臣,在這段時間里溜嗜,客戶端可以任意進(jìn)行任意操作,直到服務(wù)器端將數(shù)據(jù)返回 給Ajax引擎后架谎,會觸發(fā)你設(shè)置的事件炸宵,從而執(zhí)行自定義的js邏輯代碼完成某種頁面功能。
二谷扣、JavaScript AJAX使用
js原生的Ajax其實就是圍繞瀏覽器內(nèi)內(nèi)置的Ajax引擎對象進(jìn)行學(xué)習(xí)的土全,要使用js原生的Ajax完成異步操作,有如下幾個步驟:
1)創(chuàng)建Ajax引擎對象
2)為Ajax引擎對象綁定監(jiān)聽(監(jiān)聽服務(wù)器已將數(shù)據(jù)響應(yīng)給引擎)
3)綁定提交地址
4)發(fā)送請求
5)接受響應(yīng)數(shù)據(jù)
三会涎、json數(shù)據(jù)格式
json是一種與語言無關(guān)的數(shù)據(jù)交換的格式裹匙,作用:
使用ajax進(jìn)行前后臺數(shù)據(jù)交換
移動端與服務(wù)端的數(shù)據(jù)交換
json有兩種格式:
1)對象格式:{"key1":obj,"key2":obj,"key3":obj...}
2)數(shù)組/集合格式:[obj,obj,obj...]
例如:
user對象 用json數(shù)據(jù)格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
List 用json數(shù)據(jù)格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
四、jQuery的Ajax技術(shù)
jquery是一個js框架末秃,自然對js原生的ajax進(jìn)行了封裝概页,封裝后的ajax的操作方法更簡潔,功能更強(qiáng)大练慕,與ajax操作相關(guān)的jquery方法有如下幾種:[]表示可選
$.ajax([options])
load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.post(url,[data],[fn],[type])
開發(fā)中經(jīng)常使用的有三種
1)$.get(url, [data], [callback], [type])
2)$.post(url, [data], [callback], [type])
其中:
url:代表請求的服務(wù)器端地址
data:代表請求服務(wù)器端的數(shù)據(jù)(可以是key=value形式也可以是json格式)
callback:表示服務(wù)器端成功響應(yīng)所觸發(fā)的函數(shù)(只有正常成功返回才執(zhí)行)
type:表示服務(wù)器端返回的數(shù)據(jù)類型(jquery會根據(jù)指定的類型自動類型轉(zhuǎn)換)
常用的返回類型:text惰匙、json、html等
3)$.ajax( { option1:value1,option2:value2... } );
常用的option有如下:
async:是否異步铃将,默認(rèn)是true代表異步
data:發(fā)送到服務(wù)器的參數(shù)项鬼,建議使用json格式
dataType:服務(wù)器端返回的數(shù)據(jù)類型,常用text和json
success:成功響應(yīng)執(zhí)行的函數(shù)劲阎,對應(yīng)的類型是function類型
type:請求方式绘盟,POST/GET
url:請求服務(wù)器端地址