JavaScript & Jquery (初階)12/19 part4 (課程補充JQUERY_AJAX)－JoshS的部落格

此次課程中，老師也談到Jquery的Ajax技術

這其實對我來說不陌生，早在之前工作就有碰過

看過同事寫，在.net裡就是利用Ajax去連ashx檔內

做資料處裡

Ex:

參考此部落格範例:

http://www.dotblogs.com.tw/threeday0905/archive/2011/01/07/20648.aspx

01
$.ajax({

02
    url: test.ashx,

03
    data: { itemId : 3 }, 

04
    type: 'GET',

05
    contentType: 'application/json; charset=utf-8',

06
    dataType: 'json',

07
    success: function (data) {

08
        if(data)

09
            alert(data.name);

10
    }

11
});

 
Ajax:
1.全名Asynchronous JavaScript and XML
2.主要使用java/xml(其實目前已不只使用這兩種技術)
透過非同步呼叫來取得伺服器端或其他網站的資源
 
 
一般JavaScript表示Ajax:
window.onload = function(){
   var xhr = new XMLHTTpRequest();
   xhr.onreadstatechange= function(){
    if(xhr.readyState == 4)
    {  
       if(xhr.status == 200)
       {
          document.getElementById("table").innerHTML
          = xhr.responseText;
        }
    }   
   };
   xhr.open('GET','helloajax.txt');
   xhr.send(null);
};
已上是javascript表現方式 ，而其中 readyState 
也是xmlRequest上的一種請求狀態
0:request 初始話  4: 請求完成並收到回複內容....等
而status 也是差不多意思 200:OK 、404:找不到
 
但如果我們使用 Jquery的Ajax就更簡化了
Ex:
$(document).ready(function(){
   $.ajax({
      async:true;
      url:'helloajax.txt',
      success:function(data){
        $('#table').html(data);
      }
   });
});
alter("非同步"); 
 
以上，
url: 就是表是要去哪取資料
success : 如果回傳成功 擇資料會進入data內
反之失敗則不會傳入data
 
還有一項值得一提的 async: true,  (同步設定) 
預設為ture (非同步)    如果設為false ，則會等到ajax請求結束後才跑alter("非同步");
反之為true 則不會等待ajax請求完畢就直接跑alter("非同步");
以上是Jquery 的Ajax基本範例~
 
 
其它範例待續..
 
 
 
 
 