慕課網Ajax全接觸

<b>Ajax全稱：</b>Asynchronous JavaScript and XML（異步的JavaScript和XML）
<b>特點：</b>在不必刷新整個網頁的情況下實現局部更新，帶來更好的用戶體驗。
因為<code>XMLHttpRequest</code>（XHR）對象的出現才有了異步的概念。通過<code>XMLHttpRequest</code>對象實現后臺和服務器進行數據的交換而不必刷新整個頁面。

概念介紹

• 運用HMTL和CSS來實現頁面，表達信息。
• 運用XMLHttpRequest和Web服務器進行數據的異步交換。
• 運用JavaScript操作DOM元素，實現動態局部刷新。

實例化一個XHR對象

var request =new XMLHttpRequest();

對于IE6及更老版本的IE：

var request;
if(windows.XMLHttpRequest){
  request=new XMLHttpRequest();//IE7+,Fiefix,Chrome,Opera,Safari...
}
else{
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

"HTTP請求"概念介紹

一個完整的HTTP請求過程，通常需要下面7個步驟：

1. 建立TCP連接
2. Web瀏覽器向Web服務器發送請求命令
3. Web瀏覽器發送請求頭信息
4. Web服務器應答
5. Web服務器發送應答頭信息
6. Web服務器向瀏覽器發送數據
7. Web服務器關閉TCP連接

一個HTTP請求一般由四部分組成：

1. HTTP請求的方法或者動作，Get/Post
2. 正在請求的地址URL
3. 請求頭，包含一些客戶端環境信息，身份驗證信息等
4. 請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢字符串信息，表單信息

GET與POST
<code>GET</code>：一般用于信息獲取
使用URL傳遞參數（變量會放在URL里邊）
對所發送信息的數量也有限制，一般在2000個字符
冪等，執行N次與執行1次效果相同，都不會改變數據庫的信息
<code>POST</code>：一般用于修改服務器上的資源
對所發送信息的數量無限制

** 一個HTTP響應一般由三部分組成：**

1. 一個數字和文字組成的狀態碼，用來告訴客戶端請求是成功還是失敗
2. 響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務器類型，日期時間，內容類型和長度等
3. 響應體，也就是響應正文，服務器傳來的內容

| <b>HTTP狀態碼分類</b> |
|-|-|
| 分類 | 分類描述 |
| 1XX 信息 | 服務器收到請求，需要請求者繼續執行操作|
| 2XX 成功 | 操作被成功接收并處理，例如 200 OK |
|3XX 重定向|需要進一步的操作以完成請求|
| 4XX 客戶端錯誤|請求包含語法錯誤或無法完成請求，例如 404 NOT FOUND|
|5XX 服務器錯誤|服務器在處理請求的過程中發生了錯誤 例如 500|

XHR發送請求

• open(method,url,async) async->true異步(默認)/false同步
• send(string)
  例如：

request.open("GET","get.php",true);
request.send();//因為GET請求內容一般在url中，所以send()可以為空，但是post請求需要在send()中添加信息

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//請求頭信息(一定是寫在open()和send()中間)
request.send("name=王二狗&sex=男");

XHR取得響應

• <code>responseText</code>：獲取字符串形式的響應數據
  *<code>responseXML</code>：獲取XML形式的響應數據
  *<code>status</code>和<code>statusText</code>：以數字和文本形式返回HTTP狀態碼
• <code>getAllRespondseHeader()</code>：獲取所有的響應報頭
• <code>getResponseHeader()</code>：查詢響應中的某個字段的值

• 監聽<code>readyState</code>屬性

• 0：請求未初始化，open還沒有調用
• 1：服務器連接已經建立，open已經調用了
• 2：請求已接收，也就是接收到頭信息了
• 3：請求處理中，也就是接收到響應主體了
• 4：請求已完成，且響應已就緒，也就是完成響應了

var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
      if(request.readyState===4 && request.status===200){
      //做一些事情request.responseText
    }
}

舉個栗子(基于之前的數據庫，有學生表)~

【前端】

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#search").click(function() {
            var request = new XMLHttpRequest();
            request.open("GET", "/Ajax/Details?id=" + parseInt($("#keyWord").val()), true);    //通過GET方法去請求AjaxController下面的Details方法，并傳入id的值作為查詢條件
            request.send();
        });
    })
</script>
<label>請輸入要查詢的學生編號：</label>
<input type="text" id="keyWord"/>
<button id="search">查詢</button>

【后端】AjaxController控制器Details方法

public ActionResult Details(int id)
        {
            if (dbContext.StudentSet.Find(id) == null)
            {
                return Content("Fail");
            }
            else
            {
                return Content("Success");
            }
        }

【結果】我的數據庫中沒有id為1的數據，有id為6的數據

結果.gif

JSON基礎

** 簡介 JSON： ** JavaScript對象表示法（JavaScript Object Notation） JSON是存儲和交換文本信息的語法，類似XML，它采用鍵值對的方式來組織，易于閱讀和編寫，同時也易于機器解析和生成* JSON是獨立于語言的，也就是說不管什么語言，都可以解析Json，只需要按照json的規則來就行

JSON與XML比較

• Json的長度和XML格式比起來很短小（減少帶寬）
• Json讀寫的速度更快
• Json可以使用JavaScript內建的方法直接進行解析，轉換成JavaScript對象，非常方便

JSON語法規則

• ** JSON數據的書寫格式是：名稱/值對 **
  名稱/值對組合中的名稱寫在前面（在雙引號中），值對寫在后面（同樣在雙引號中），中間用冒號隔開，比如，"name":"郭靖"
• ** JSON的值可以是下面這些類型： **

1. 數字(整型或浮點數)，比如123,1.23
2. 字符串（在雙引號中）
3. 邏輯值（true，false）
4. 數組（寫在方括號中）
5. 對象（寫在花括號中）
6. null

例如：

{
    "staff":[
    {"name":"宏碁","age":70},
   {"name":"郭靖","age":35},
   {"name":"黃蓉","age":30}
]
}

{
    "nane": "los",
    "success": "True",
    "message": "請求成功",
    "info": [{
        "name": "laosiji",
        "age": "100",
        "asdas": "121",
        "hobby": ["daqiu", "youyong"],
        "aa": [{
            "anme": "aa",
            "age": 20
        }, {
            "aa": "asdas",
            "age": 5565
        }]
    }]
}

JSON解析

** 方式一： **

var jsondata='{"staff":[{"name":"黃蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=eval('('+jsondata+')');    //如果在json數據中存在js腳本的話會直接執行。（危險）
alert(jsonobj.staff[0].name);

** 方式二 **

var jsondata='{"staff":[{"name":"黃蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=JSON.parse(jsondata);    //如果在json數據中存在js腳本的話會報錯(常用，安全，方便)。
alert(jsonobj.staff[0].name);

在線JSON格式化和校驗工具jsonlint

用jQuery實現Ajax

• jQuery.ajax({[settings]}) $.ajax([{settings]})
• type：Method類型，"POST"或者“GET”，默認為“GET”
• url：發送請求的地址
• data：一個對象，連同請求發送到服務器的數據
• dataType：預期服務器返回的數據類型，如果不指定，jQuery將自動根據HTTP包MIME信息來智能判斷，一般我們采用json格式，可以設置為“json”
• success：是一個方法，請求成功后的回調函數。傳入返回后的數據，以及包含成功的字符串

• error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象
  ** 例如 **
  GET

  
  
  $.ajax({格式設置，注意success和error返回的數據是不同的})
  
  

  POST

數據以JSOn格式寫在data中

跨域

跨域的概念

JavaScript出于安全方面的考慮，不允許跨域調用其他頁面的對象。什么是跨域呢，簡單地理解就是因為JavaScript同源策略的限制，a.com域名下的js無法操作b.com或c.a.com域名下的對象。

Paste_Image.png

處理跨域的方法一：代理

后端 處理跨域的方法一：代理

處理跨域方法二：JSONP

前端 處理跨域方法二：JSONP

處理跨域方法三：XHR2

Paste_Image.png