?1.Ajax是什么：AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下若皱，能夠更新部分網(wǎng)頁的技術(shù)。
2.?兩種常用的數(shù)據(jù)格式：JSON和XML(JSON與XML都是常見的數(shù)據(jù)格式 都是標(biāo)記語言)
(1)?JSON（JavaScript Object Notation）輕量級數(shù)據(jù)格式(272字節(jié))? ?(2)?XML是一種可拓展標(biāo)記語言（406字節(jié)）
(3)?JSON的優(yōu)勢：輕量級蔓纠，解析比XML更快叛薯，查找數(shù)據(jù)無需查找標(biāo)簽? ? ?JSON的劣勢：IE7中不支持原生JSON解析 需要引入第三方庫的支持
(4)?XML的優(yōu)勢：格式統(tǒng)一 數(shù)據(jù)共享方便? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?XML的劣勢：XML文件龐大傳輸占帶寬 花費資源多時間多（建議使用JOSN）
JSON的常見形式：
JSON對象
JSON字符串：是指該字符串變量的值與JSON的格式相同夷磕，但是不是JSON對象恳啥。
? ? 轉(zhuǎn)換：
將JSON字符串轉(zhuǎn)換為JSON對象：
①eval(“(”+json2+”)”);
②JOSN.parse()
將JSON對象轉(zhuǎn)換為JSON字符串
JSON.stringify()
JOSN與JS的區(qū)別：JOSN必須雙引號 JS可以不加
3.Ajax的優(yōu)勢：
(1)異步加載數(shù)據(jù)，無需切換頁面
(2)更佳的用戶體驗：局部刷新星瘾、及時驗證走孽、操作步驟簡化等
(3)節(jié)省流量
(4)JS控制數(shù)據(jù)的加載，更加靈活多用
4.基本語法：
(1)創(chuàng)建Ajax對象 var xhr = new XMLHttpRequest()
兼容性：
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};
(2)指定接受請求回來的內(nèi)容：xhr.onreadystatechange = function(){}
xhr.readyState:
? ? 0-----open方法還沒調(diào)用
? ? 1-----調(diào)用send方法
? ? 2-----頭部已經(jīng)被服務(wù)器接受
? ? 3-----開始接受服務(wù)器返回的數(shù)據(jù) 還沒接受完
? ? 4-----請求完成
xhr.status:
語法：xhr.status>= 200 && xhr.status < 300||xhr.status==304這樣寫更合理
每一次請求都會根據(jù)請求是否成功 返回不同的狀態(tài)碼
status==200 請求成功
status==304 文件沒有發(fā)生改變(緩存中可以加時間戳和加隨機數(shù))
請求的文件盒已經(jīng)存在與瀏覽器緩存當(dāng)中的文件作比較 如果相同 就不會
再繼續(xù)發(fā)請求而是從緩存中讀取文件
status==404:沒有找到文件(網(wǎng)址不存在 url不對 查詢URL是否正確)
status==400:錯誤請求 常見于語法錯誤
status==500:服務(wù)器內(nèi)部錯誤
status==505:服務(wù)器不支持或拒絕請求頭中指定的HTTP版本
使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性
responseText?? 獲得字符串形式的響應(yīng)數(shù)據(jù)
responseXML? 獲得 XML 形式的響應(yīng)數(shù)據(jù)
(3)第三步：open(“get/post”,url,true/false)
①Url:String琳状，文件在服務(wù)器上的位置
②true(異步加載)false(同步加載)
③get方式:通過url? 名字=值&名字=值
④post方式要設(shè)置請求頭setRequestHeader才可以發(fā)送數(shù)據(jù)到后臺(更安全)
1)xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded;
⑤解決緩存：時間戳和隨機數(shù) ?date”+new Date().getTime()
(4)第四步：將請求發(fā)送給服務(wù)器：send(string（post方式）/null）
5.跨域：
(1)含義：從一個域名訪問另一個域名（同源策略）
(2)為什么要跨域：想把網(wǎng)站的一些圖片磕瓷，腳本等 其他資源放到另外一個站點的時候
(3)天然跨域：img、script念逞、iframe等元素的src屬性可以直接跨域請求資源
(4)AJAX跨域
①可以用服務(wù)器去別的網(wǎng)站獲取內(nèi)容然后返回頁面
②URL傳給服務(wù)器困食，由服務(wù)器去訪問跨域地址
③Get和post 請求
④使用場景：接口允許用哪個就用哪個
接口兩個都允許，首選用get
當(dāng)遇到需要傳遞密碼等私密信息的時候翎承，選擇POST
(5)JSONP跨域
①含義：利用script標(biāo)簽的跨域能力請求資源硕盹；
②語法：利用JS構(gòu)造一個script標(biāo)簽，把JSON的URL賦給script的src屬性叨咖，把這個script插入到DOM里瘩例，讓瀏覽器去獲取。
1)Ajax.jsonpFn(“url”,”callbackName”,callbackFn)
2)第一步：引入數(shù)據(jù)
a.回調(diào)函數(shù)callback()
3)第二步創(chuàng)建script
4)第三步：創(chuàng)建script 填入src(拼接)
a.creatScript("http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+content.value+"&cb=callBack");
b.cb:服務(wù)器指定接受回調(diào)函數(shù)的名字
③ encodeURIComponent（） 轉(zhuǎn)為編碼
6.jQuery里的Ajax
(1)load() 請求服務(wù)器的數(shù)據(jù)甸各，并且把返回的數(shù)據(jù)放在指定元素中
$("body").load(url,[data],callBack);
(2)getJSON();從服務(wù)器請求json格式的數(shù)據(jù) 使用同onload
(3)getScript();從服務(wù)器上請求并執(zhí)行一個js文件
(4)$.get(url,[data],[success{data}],[dataType]);相當(dāng)于
$.ajax({
? ? type:"get",
url:url,
data:data,
success:success,
dataType:dataType
});
dataType:xml json script html
$.ajax({
type:"post",
url:url,
data:data,
success:success,
dataType:dataType
})
(5)jQuery Ajax的跨域
$.ajax({
dataType:"jsonp",
url:"http://www.weather.com.cn/data/sk/101011200.html",
jsonpCallback:"cb",
success:function(data){
console.log(data);
}
});
7.序列化
(1)可以直接把數(shù)據(jù)轉(zhuǎn)化為url形式
(2)語法：$("form").serialize()
8.模板引擎
(1)介紹：在做數(shù)據(jù)請求的時候使用字符串拼接URL 操作麻煩容易錯誤
后來人們就提出了模板引擎的概念 就是講為定義的字符賦予特殊語法
(2)語法：
1)@string@(string必須與數(shù)據(jù)中的屬性名相同)
2)引入數(shù)據(jù)
3)數(shù)據(jù)綁定（字符串替換）
(3)jQuery的模板引擎
1)拿到數(shù)據(jù)
$.get(“url”,callbackFn)
2)讀取數(shù)據(jù)
? 把JSON字符串轉(zhuǎn)為JSON對象 并獲取數(shù)據(jù)
3)遍歷JSON對象
a.篩選
b.獲取綁定好數(shù)據(jù)的字符串（字符串替換）
c.將處理好的模板添加到box
案例心得：
9.//處理數(shù)據(jù) 將字符串轉(zhuǎn)對象
data = typeof data == "object" ? data:eval("("+data+")");
10.Ajax懶加載邏輯
//以滾動的占總需要滾動的比例
var bili = $("#content").scrollTop()/($("#content")[0].scrollHeight-$("#content").height());
if(bili>=0.7){
page++;
$("#more").show();
getJsonFn(typeNum,page);
//沒有函數(shù)節(jié)流的花 數(shù)據(jù)在沒加載的情況下 又去加載其他的就會出現(xiàn)錯誤
lock = false;
}
11.var lock = true;
if(!lock){
return;
}
