12.1蜓肆、AJAX相關(guān)詳情

一、介紹

1谋币、什么是ajax
Asynchronous
Javascript
And
Xml
利用javascript和xml實現(xiàn)異步傳輸?shù)募夹g(shù)

二仗扬、ajax對象

1、創(chuàng)建ajax對象
如果寫開發(fā)ajax程序蕾额，必須 首先創(chuàng)建一個ajax對象早芭，創(chuàng)建方式：
1)基于IE內(nèi)核系列
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
Alert(xhr.readyState);
2）基于W3C標(biāo)準(zhǔn)
Var xhr = new XMLHttpRequest();
Alert(xhr.readyState);

解決兼容
方法一：If(window.navigator.userAgent == ‘’) {} else {}
方法二：如果是IE高版本或w3c瀏覽器，會直接創(chuàng)建Ajax對象并返回诅蝶；否則會向下執(zhí)行第二個try語句
function createXhr()
{
Try {
Return new XMLHttpRequest();
} catch(e) {}
Try{
Return new ActiveXObject();
} catch(e) {}
Alert(‘請更換瀏覽器’);
}

2退个、Ajax對象的相關(guān)屬性和方法

1）方法
i. xhr.open(method,url) 初始化Ajax對象
Method 請求方式（get post）
Url 請求頁面地址
ii. Xhr.setRequestHeader(header,value)設(shè)置請求頭（post方式需要）
header 頭名
Value 值
例如：
Xhr.open(‘post’,’.php’);
xhr.setRequestHeader(‘Content-Type’,’Application/x-www-form-urlencoded’);
iii. Xhr.send(content)發(fā)送Ajax請求
Content 請求時傳遞的參數(shù)

2）屬性

i. onreadystatechange 當(dāng)ajax對象的狀態(tài)碼發(fā)生改變時所觸發(fā)的回調(diào)函數(shù)
ii. readyState ajax對象的狀態(tài)碼
0表示創(chuàng)建xhr（ajax對象）成功，但是沒有初始化 new XMLHttpRequest()
1表示對象已經(jīng)初始化调炬，但未發(fā)送請求 open
2表示對象已經(jīng)發(fā)送請求 send
3表示對象已經(jīng)接收部分服務(wù)器返回的數(shù)據(jù)
4表示接收數(shù)據(jù)完畢 （常用）
iii. status ajax對象的響應(yīng)狀態(tài)碼（http響應(yīng)狀態(tài)碼）
200表示請求成功（OK）
304表示從緩存中讀扔镉（Not Modified文檔的內(nèi)容）
400表示語義有錯
403表示拒絕提供些服務(wù)，forbidden
404表示請求資源不存在
408表示請求超時
iv. statusText ajax對象的響應(yīng)狀態(tài)文本 OK NOTFOUND
v. responseText ajax對象的響應(yīng)內(nèi)容（文本）
vi. responseXML ajax對象的響應(yīng)內(nèi)容（XML對象）

三筐眷、發(fā)送GET請求

語法
Var xhr = createXhr();
Xhr.open(get’,url);
xhr.onreadystatechange=function() {
If(xhr.readyState == 4 && xhr.status == 200) {
xhr.responseText;
}
};
Xhr.send(null);

四黎烈、發(fā)送POST請求

1、語法
Var xhr = createXhr();
Xhr.open(‘post’,url);
var str = ‘s1=’+1+’&s2=’+2;
xhr.setRequestHeader(‘Content-Type’,’Application/x-www-form-urlencoded’);
Xhr.onreadystatechange=function() {
If(xhr.readyState == 4 && xhr.status == 200) {
Xhr.responseText;
}
};
Xhr.send(str);

2、get與post的區(qū)別
a) get傳遞的數(shù)據(jù)不超過2kb post傳遞的數(shù)據(jù)理論上沒有限制
b) get傳遞的參數(shù)附加在url地址后面 post傳遞的參數(shù)附加在請求空白行的下面
c) get傳遞的數(shù)據(jù)類型為文本類型 post傳遞的數(shù)據(jù)類型為文本或二進(jìn)制數(shù)據(jù)

五照棋、解決ajax緩存問題

1资溃、GET方式在IE會發(fā)生緩存問題，如果url相同烈炭，會自動使用緩存結(jié)果
2溶锭、以下四種方法，前三種屬于客戶端解決緩存問題符隙，第四種是服務(wù)器解決緩存問題趴捅。
解決方法一：?&=Math.random();
弊端—會產(chǎn)生大量緩存文件，有隨機值重復(fù)的可能
解決方法二：?=new Date().getTime();
注意—會產(chǎn)生大量緩存文件霹疫，但永遠(yuǎn)不可能重復(fù)拱绑，js里的時間戳是毫秒，
解決方法三： 設(shè)置請求頭 setRequestHeader(‘If-Modified-Since’,’0’);
每次發(fā)送ajax請求時丽蝎，設(shè)置請求頭猎拨，表示當(dāng)前被緩存的資源的最后修改時間為0，服務(wù)器會用這個‘0’與被請求資源的最后修改時間進(jìn)行比較屠阻，因為是不同的红省，所以會將最新的結(jié)果返回
只產(chǎn)生一個緩存文件。一直是最新的緩存文件
解決方法四： 設(shè)置響應(yīng)頭 header(‘Cache-Control:no-cache,must-revalidate’);(header放在輸出前)
在php服務(wù)器端禁用緩存的方式国觉，請求一次后吧恃，會自動在客戶端生成一個過期緩存文件，所有下次訪問時麻诀，這個緩存文件過期了痕寓，必須重新發(fā)送請求。
擴展知識
Return 表示將結(jié)果返回給PHP程序本身
Echo 輸出語句蝇闭，利用http響應(yīng)(利用http機制)將數(shù)據(jù)寫在響應(yīng)空白行的下面
六厂抽、JSON的使用（是在PHP中使用的）（ajax中數(shù)據(jù)信息交換只有JSON和XML兩種方式）
1、什么是JSON：在JSON中丁眼，對象是屬性的無序集合（對象由屬性構(gòu)成，這些屬性是無序的）
基于JavaScript語言的輕量級的數(shù)據(jù)交換格式(JavaScript Object Notiation)
2昭殉、語法：var obj={屬性名：值苞七，…}; obj則稱為JSON對象；
a) JSON對象的本質(zhì)其實是Object系統(tǒng)類的一個實例
b) 補充：屬性名的定義時挪丢，可以使用單引蹂风、雙引、或不用引乾蓬，三種格式惠啄；
3、JSON的使用
a) 使用JSON表示一個人的信息
i. 例：var obj = {name:’mark’,age:21};
b) JSON數(shù)組
i. var obj = [{‘name’:’lily’,’age’:21},{‘name’:’mark’,’age’:21},{‘name’:’ton’,’age’:21}]
每一個數(shù)組元素都是一個JSON對象
4、在PHP中使用JSON
a) 生成JSON：首先要有一個數(shù)組或?qū)ο蟆?br> i. json_encode($arr);把數(shù)組變成JSON對象
ii. 補充：JSON中的中文只能保存utf-8編碼格式
b) 解析JSON：首先有一個json字符串撵渡。
i. json_decode($json融柬，true);將JSON字符串解析成數(shù)組格式
ii. true表示解析到一個數(shù)組中；false表示將數(shù)據(jù)解析到一個對象中（默認(rèn)）

六趋距、JSON的使用（是在PHP中使用的）（ajax中數(shù)據(jù)信息交換只有JSON和XML兩種方式）

1粒氧、什么是JSON：在JSON中，對象是屬性的無序集合（對象由屬性構(gòu)成节腐，這些屬性是無序的）
基于JavaScript語言的輕量級的數(shù)據(jù)交換格式(JavaScript Object Notiation)
2外盯、語法：var obj={屬性名：值，…}; obj則稱為JSON對象翼雀；
a) JSON對象的本質(zhì)其實是Object系統(tǒng)類的一個實例
b) 補充：屬性名的定義時饱苟，可以使用單引、雙引狼渊、或不用引箱熬，三種格式；
3囤锉、JSON的使用
a) 使用JSON表示一個人的信息
i. 例：var obj = {name:’mark’,age:21};
b) JSON數(shù)組
i. var obj = [{‘name’:’lily’,’age’:21},{‘name’:’mark’,’age’:21},{‘name’:’ton’,’age’:21}]
每一個數(shù)組元素都是一個JSON對象
4坦弟、在PHP中使用JSON
a) 生成JSON：首先要有一個數(shù)組或?qū)ο蟆?br> i. json_encode($arr);把數(shù)組變成JSON對象
ii. 補充：JSON中的中文只能保存utf-8編碼格式
b) 解析JSON：首先有一個json字符串。
i. json_decode($json官地，true);將JSON字符串解析成數(shù)組格式
ii. true表示解析到一個數(shù)組中酿傍；false表示將數(shù)據(jù)解析到一個對象中（默認(rèn)）

七、利用JSON傳遞數(shù)據(jù)

a) 在程序中驱入，php服務(wù)器向客戶端返回多個數(shù)據(jù)赤炒，可以使用JSON
b) 語法：var json = eval(‘(‘+xhr.responseText+’)’);將Ajax對象的返回值包裝成一個json對象

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市亏较，隨后出現(xiàn)的幾起案子莺褒，更是在濱河造成了極大的恐慌，老刑警劉巖雪情，帶你破解...
    沈念sama閱讀 222,464評論 6贊 517
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件遵岩，死亡現(xiàn)場離奇詭異，居然都是意外死亡巡通，警方通過查閱死者的電腦和手機尘执，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來宴凉，“玉大人誊锭，你說我怎么就攤上這事∶殖” “怎么了丧靡？”我有些...
    開封第一講書人閱讀 169,078評論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蟆沫，是天一觀的道長。 經(jīng)常有香客問我温治，道長饭庞，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,979評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任罐盔，我火速辦了婚禮但绕，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘惶看。我一直安慰自己捏顺，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 69,001評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布纬黎。 她就那樣靜靜地躺著幅骄，像睡著了一般。 火紅的嫁衣襯著肌膚如雪本今。 梳的紋絲不亂的頭發(fā)上拆座，一...
    開封第一講書人閱讀 52,584評論 1贊 312
  • 城市分裂傳說
    那天，我揣著相機與錄音冠息，去河邊找鬼挪凑。 笑死，一個胖子當(dāng)著我的面吹牛逛艰，可吹牛的內(nèi)容都是我干的躏碳。 我是一名探鬼主播，決...
    沈念sama閱讀 41,085評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼散怖，長吁一口氣：“原來是場噩夢啊……” “哼菇绵！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起镇眷，我...
    開封第一講書人閱讀 40,023評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤咬最，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后欠动，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體永乌，經(jīng)...
    沈念sama閱讀 46,555評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年具伍，在試婚紗的時候發(fā)現(xiàn)自己被綠了铆遭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡沿猜，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出碗脊，到底是詐尸還是另有隱情啼肩，我是刑警寧澤橄妆，帶...
    沈念sama閱讀 36,439評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站祈坠，受9級特大地震影響害碾，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赦拘，卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一慌随、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧躺同，春花似錦阁猜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0贊 25
  • 一樁弒父案剃袍，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至捎谨，卻和暖如春民效，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背涛救。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工畏邢， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人检吆。 一個月前我還...
    沈念sama閱讀 49,191評論 3贊 378
  • 代替公主和親
    正文 我出身青樓舒萎，卻偏偏與公主長得像，于是被迫代替她去往敵國和親咧栗。 傳聞我的和親對象是個殘疾皇子逆甜，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2贊 361