實(shí)習(xí)第三天(AJAX、JSON)

一、AJAX初識

ajax 的全稱是Asynchronous JavaScript and XML,其中,Asynchronous 是異步的意思,它有別于傳統(tǒng)web開發(fā)中采用的同步的方式。

AJAX應(yīng)用的五個步驟

1.建立xmlHttpRequest對象

? ? if(window.XMLHttpRequest) {

? ? xmlHttp = new XMLHttpRequest();

? ? if(xmlHttp.overrideMimeType) {

? ? xmlHttp.overrideMimeType("text/xml");

? ? }

? } else if(window.ActiveXobject) {

? ? var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

? ? for(var i = 0; i < activeName.length; i++) {

? ? try {

? ? ? xmlHttp = new ActiveXobject(activeName[i]);

? ? ? break;

? ? } catch(e) {}

? ? }

? }

? if(!xmlHttp) {

? ? alert("創(chuàng)建xmlhttprequest對象失敗");

? } else {}

2.設(shè)置回調(diào)函數(shù)

? xmlHttp.onreadystatechange= callback;

? function callback(){}

3.使用OPEN方法與服務(wù)器建立連接? xmlHttp.open("get","ajax?name="+ name,true)

? 此步注意設(shè)置http的請求方式(post/get),如果是POST方式,注意設(shè)置請求頭信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4.向服務(wù)器端發(fā)送數(shù)據(jù)

? xmlHttp.send(null);

? 如果是POST方式就不為空

5.在回調(diào)函數(shù)中針對不同的響應(yīng)狀態(tài)進(jìn)行處理

? if(xmlHttp.readyState == 4){? ? ? //判斷交互是否成功

? ? ? if(xmlHttp.status == 200){? ? ? ? //獲取服務(wù)器返回的數(shù)據(jù)? ? ? ? //獲取純文本數(shù)據(jù)

? ? ? ? var responseText =xmlHttp.responseText;

? ? ? document.getElementById("info").innerHTML = responseText;

? ? ? }

? }

二、JSON初識

1. 什么是JSON

JSON---Javascript Object Notation,前兩個單詞大家應(yīng)該都認(rèn)識,最后一個notation,是“記號、標(biāo)記法”的意思,連在一起,便成了JSON。

它是一種輕量級的數(shù)據(jù)交換格式,是基于Javascript的一個子集,可以叫做Javascript對象表示法,是存儲和交換文本信息的語法,但它并不是Javascript獨(dú)有的數(shù)據(jù)格式,其它很多語言都可以對JSON進(jìn)行解析和序列化。

2. JSON的由來

在21世紀(jì)初,Douglas Crockford(Web開發(fā)領(lǐng)域最知名的技術(shù)權(quán)威之一,ECMA JavaScript2.0標(biāo)準(zhǔn)化委員會委員,被JavaScript之父Brendan Eich稱為JavaScript的大宗師(Yoda),曾任Yahoo!資深JavaScript架構(gòu)師,現(xiàn)任PayPal高級JavaScript架構(gòu)師)試圖尋找一種更加簡便的數(shù)據(jù)交換格式,能夠在服務(wù)器之間交換數(shù)據(jù),當(dāng)時通用的數(shù)據(jù)交換語言是XML,但是Douglas Crockford認(rèn)為XML的生成與解析都過于麻煩,所以他提出了一種更加簡化的格式,就是我們現(xiàn)在使用的JSON。

JSON的規(guī)格十分簡單,只用一個頁面幾百個字就能說清楚,而且Douglas Crackford稱這個規(guī)格永遠(yuǎn)不用升級,因?yàn)樵撘?guī)定的都已經(jīng)規(guī)定好了。

3. 為什么要用JSON

JSON類似于XML,比XML更小、更快、更容易解析。但同時XML也有它的不可替代性,應(yīng)根據(jù)使用場景進(jìn)行更合適的選擇;

JSON語法簡單,很容易理解,并且對象信息自描述,數(shù)據(jù)傳輸量小不占用帶寬;

JSON雖然遠(yuǎn)不及emoji這一世界通用語言,但其實(shí)它的支持度也已經(jīng)非??捎^,支持的語言包括C,C#,Java,JavaScript,PHP,Python,Ruby等等;

對于Ajax應(yīng)用程序來說,JSON比XML更快捷,更易用;

JSON的可讀性、可擴(kuò)展性都非常好,編碼難度也比較低,即使不借助工具也能寫出比較規(guī)范的JSON

......

4. JSON怎么用

⑴ JSON的基本語法

① 并列的數(shù)據(jù)之間用逗號( , )分隔

② 映射用冒號( : )表示

③ 映射的集合用大括號( {} )表示

④ 并列數(shù)據(jù)的集合用方括號( [] )表示

復(fù)雜的數(shù)據(jù)也可以使用JSON來進(jìn)行表示,比如下面這段信息:最喜歡的編輯器是sublime,最喜歡的運(yùn)動是籃球,最喜歡的球隊是馬刺隊,馬刺隊控衛(wèi)有托尼帕克、帕蒂米爾斯,分衛(wèi)有馬努吉諾比利、丹尼格林,小前鋒有科懷倫納德、凱爾安德森,大前鋒有拉馬庫斯阿爾德里奇、大衛(wèi)李,中鋒有德維恩戴德蒙、保羅加索爾。

{

? ? ? ? "favoriteEditor": "sublime",

? ? ? ? "favoriteSport": "basketball",

? ? ? ? "favoriteTeam":{

? ? ? ? ? ? "Spurs":[

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? "PG":"Tony Parker",

? ? ? ? ? ? ? ? ? ? "SG":"Danny Green",

? ? ? ? ? ? ? ? ? ? "SF":"Kawhi Leonard",

? ? ? ? ? ? ? ? ? ? "PF":"LaMarcus Aldridge",

? ? ? ? ? ? ? ? ? ? "C":"Pau Gasol"? ?

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? "PG":"Patty Mills",

? ? ? ? ? ? ? ? ? ? "SG":"Manu Ginobili",

? ? ? ? ? ? ? ? ? ? "SF":"Kyle Anderson",

? ? ? ? ? ? ? ? ? ? "PF":"David Lee",

? ? ? ? ? ? ? ? ? ? "C":"Dewayne Dedmon"? ?

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ]

? ? ? ? }

? ? }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容