AJAX編程

Ajax的概念
即 Asynchronous Javascript And XML，AJAX 不是一門的新的語言，而是對現有持術的綜合利用。

1. 基於web標籤的xhtml+css
2. 可使用dom進行動態的顯示和交互
3. 使用XML和XSLT(是一種用於將XML轉換爲任意文本的描述語言)進行數據的交換和操做
4. 使用XMLHttpRequest進行異步的數據查詢和檢索等操做。。。

本質:是在HTTP協議的基礎上以異步的方式經過XMLHttpRequest對象與服務器進行通訊。

做用：能夠在頁面不刷新的狀況下，請求服務器，局部更新頁面的數據；

異步（Asynchronous [eɪˈsɪŋkrənəs])
指某段程序執行時不會阻塞其它程序執行，其表現形式爲程序的執行順序不依賴程序自己的書寫順序，相反則爲同步。

其優點在於不阻塞程序的執行，從而提高總體執行效率。

同步：同一時刻只能作一件事，上一步完成才能開始下一步

異步：同時作多件事，效率更高

XMLHttpRequest能夠以異步方式的處理程序。

XMLHttpRequest
瀏覽器內建對象，用於在後臺與服務器通訊(交換數據) ，由此咱們即可實現對網頁的部分更新，而不是刷新整個頁面。

下面是一個簡單的例子(獲取驗證碼)

// 這只是一個示例，不用考慮他所實現的功能
var xhr = new XMLHttpRequest()
xhr.open('post','http://127.0.0.1:3002/getcode')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('phone=13176849023')
xhr.onload = function () {
    console.log(this.response);
}

因爲XMLHttpRequest本質基於HTTP協議實現通訊，因此結合HTTP協議和上面的例子咱們分析得出以下結果：

• 請求

HTTP請求3個組成部分與XMLHttpRequest方法的對應關係

一、請求行（post方式的請求不用在url中拼接 參數）
xhr.open('post','http://127.0.0.1:3002/getcode')

二、請求頭（get 請求能夠不設置 請求頭）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

三、請求主體（get的參數在url中拼接 ，因此send裏面能夠傳入null或者不傳）
xhr.send('phone=13176849023')

• 響應

HTTP響應是由服務端發出的，做爲客戶端更應關心的是響應的結果。

因爲服務器作出響應須要時間（好比網速慢等緣由），因此咱們須要監聽服務器響應的狀態，而後才能進行處理。

// 當服務器響應以後，會自動的觸發onload事件，在這個事件裏面咱們能夠獲取服務器所返回的全部詳細數據，而後根據本身的須要進行處理
xhr.onload = function () {
    console.log(this.response);
}

GET和POST請求方式的差別

一、GET沒有請求主體，使用xhr.send(null)

二、GET能夠經過在請求URL上添加請求參數

三、POST能夠經過xhr.send('name=itcast&age=10')

四、POST須要設置 Content-Type:application/x-www-form-urlencoded

五、GET大小限制約4K，POST則沒有限制

JSON

即 JavaScript Object Notation，另外一種輕量級的文本數據交換格式，獨立於語言。

1.它是用來描述數據的

2.它是字符串

3.永遠不要在json文件中添加註釋

4.鍵和值都須要使用雙引號，除非這個值是數值或bool值

語法規則
一、數據在名稱/值對中

二、數據由逗號分隔(最後一個健/值對不能帶逗號)

三、花括號保存對象方括號保存數組

四、鍵和值都使用雙引號包含，除非值是數值或者bool類型

JSON()解析

JSON數據在不一樣語言進行傳輸時，類型爲字符串，不一樣的語言各自也都對應有解析方法，須要解析完成後才能讀取，下面是在js中的解析方法：

一、JSON.parse(json字符串)：將json字符串轉換爲js對象

二、JSON.stringify(js數組或對象)：將js對象轉換爲json格式字符串

總結：JSON體積小、解析方便且高效，在實際開發成爲首選。

XML XML是一種標記語言，很相似HTML，其宗旨是用來傳輸數據，具備自我描述性（固定的格式的數據）。 語法規則 一、必須有一個根元素 二、標籤名稱不可有空格、不能夠數字或.開頭、大小寫敏感 三、不可交叉嵌套 四、屬性雙引號（瀏覽器自動修正成雙引號了） 五、特殊符號要使用實體 六、註釋和HTML同樣 雖然能夠描述和傳輸複雜數據，可是其解析過於複雜而且體積較大，因此實現開發已經不多使用了。