jQuery Ajax 學習

標籤：name   用戶端   package   orm   進一步   行資料   擷取   request對象   欄位   

Ajax全稱：Asynchronous JavaScript and XML（非同步JavaScript和XML）
特點：在不必重新整理整個網頁的情況下實現局部更新，帶來更好的使用者體驗。
因為XMLHttpRequest（XHR）對象的出現才有了非同步概念。通過XMLHttpRequest對象實現後台和伺服器進行資料的交換而不必重新整理整個頁面。

概念介紹

• 運用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
GET：一般用於資訊擷取
使用URL傳遞參數（變數會放在URL裡邊）
對所發送資訊的數量也有限制，一般在2000個字元
等冪，執行N次與執行1次效果相同，都不會改變資料庫的資訊
POST：一般用於修改伺服器上的資源
對所發送資訊的數量無限制

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

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

HTTP狀態代碼分類
分類	分類描述
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取得響應

• responseText：擷取字串形式的響應資料
  responseXML：擷取XML形式的響應資料 status和statusText：以數字和文本形式返回HTTP狀態代碼
• getAllRespondseHeader()：擷取所有的響應前序
• getResponseHeader()：查詢響應中的某個欄位的值
• 監聽readyState屬性
  • 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的資料

結果.gifJSON基礎

簡介 JSON： JavaScript對象標記法（JavaScript Object Notation） JSON是儲存和交換文本資訊的文法，類似XML，它採用索引值對的方式來組織，易於閱讀和編寫，同時也易於機器解析和產生* JSON是獨立於語言的，也就是說不管什麼語言，都可以解析Json，只需要按照json的規則來就行

JSON與XML比較

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

JSON文法規則

• JSON資料的書寫格式是：成對的名稱和數值 
  成對的名稱和數值組合中的名稱寫在前面（在雙引號中），值對寫在後面（同樣在雙引號中），中間用冒號隔開，比如，"name":"郭靖"
• JSON的值可以是下面這些類型：
• 數字(整型或浮點數)，比如123,1.23
• 字串（在雙引號中）
• 邏輯值（true，false）
• 數組（寫在方括弧中）
• 對象（寫在花括弧中）

• 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
 

jQuery Ajax 學習（轉）