ajax之最簡說明

ajax

1.建立

XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

2.XHR 請求

a) 如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

open(method,url,async) 

規定請求的類型、URL 以及是否異步處理請求。

method：請求的類型；GET 或 POST

url：文件在服務器上的位置

async：true（異步）或 false（同步）

b) send(string) 

1. 將請求發送到服務器。
2. string：僅用於 POST 請求

GET 請求

POST請求

若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據：

setRequestHeader(header,value)  

 向請求添加 HTTP 頭。

header: 規定頭的名稱

value: 規定頭的值

xmlhttp.open("POST","/ajax/demo_post2.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

xmlhttp.send("fname=Bill&lname=Gates");

 

 

3.服務器響應  

   如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

   

responseText	得到字符串形式的響應數據。
responseXML	得到 XML 形式的響應數據。

 

responseText 屬性

若是來自服務器的響應並不是 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，所以您能夠這樣使用：

  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

3.AJAX - onreadystatechange 事件

  onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

 

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

 

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

AJAX 數據庫實例

實例解釋 - showCustomer() 函數

當用戶在上面的下拉列表中選擇某個客戶時，會執行名爲 "showCustomer()" 的函數。該函數由 "onchange" 事件觸發：

function showCustomer(str)

{

var xmlhttp;

if (str=="")

  {

  document.getElementById("txtHint").innerHTML="";

  return;

  }

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","getcustomer.asp?q="+str,true);

xmlhttp.send();

}

showCustomer() 函數執行如下任務：

• 檢查是否已選擇某個客戶
• 建立 XMLHttpRequest 對象
• 當服務器響應就緒時執行所建立的函數
• 把請求發送到服務器上的文件
• 請注意咱們向 URL 添加了一個參數 q （帶有輸入域中的內容）

AJAX 服務器頁面

由上面的 JavaScript 調用的服務器頁面是 ASP 文件，名爲 "getcustomer.asp"。

用 PHP 編寫服務器文件也很容易，或者用其餘服務器語言。請看用 PHP 編寫的相應的例子。

"getcustomer.asp" 中的源代碼負責對數據庫進行查詢，而後用 HTML 表格返回結果：

<%

response.expires=-1

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

sql=sql & "'" & request.querystring("q") & "'"

 

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

rs.Open sql,conn

 

response.write("<table>")

do until rs.EOF

  for each x in rs.Fields

    response.write("<tr><td><b>" & x.name & "</b></td>")

    response.write("<td>" & x.value & "</td></tr>")

  next

  rs.MoveNext

loop

response.write("</table>")

%>

 

 

jquery中的ajax方法參數老是記不住，這裏記錄一下。

 

1.url: 
要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。

2.type: 
要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也能夠使用，但僅部分瀏覽器支持。

3.timeout: 
要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async: 
  要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。

5.cache: 
要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data: 
要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。

get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType: 
要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
text：返回純文本字符串。

8.beforeSend：
要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。
            function(XMLHttpRequest){
               this;   //調用本次ajax請求時傳遞的options參數
            }
9.complete：
要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //調用本次ajax請求時傳遞的options參數
          }

10.success：要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。
         (1)由服務器返回，並根據dataType參數進行處理後的數據。
         (2)描述狀態的字符串。
         function(data, textStatus){
            //data多是xmlDoc、jsonObj、html、text等等
            this;  //調用本次ajax請求時傳遞的options參數
         }

11.error:
要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //一般狀況下textStatus和errorThrown只有其中一個包含信息
          this;   //調用本次ajax請求時傳遞的options參數
       }

12.contentType：
要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

14.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

15.global：
要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。

16.ifModified：
要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：
要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

18.username：
要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password：
要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData：
要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。

21.scriptCharset：
要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。

案例代碼：

 

$(function(){

    $('#send').click(function(){

         $.ajax({

             type: "GET",

             url: "test.json",

             data: {username:$("#username").val(), content:$("#content").val()},

             dataType: "json",

             success: function(data){

                         $('#resText').empty();   //清空resText裏面的全部內容

                         var html = '';

                         $.each(data, function(commentIndex, comment){

                               html += '<div class="comment"><h6>' + comment['username']

                                         + ':</h6><p class="para"' + comment['content']

                                         + '</p></div>';

                         });

                         $('#resText').html(html);

                      }

         });

    });

});

 

 

22.順便說一下$.each()函數:
$.each()函數不一樣於JQuery對象的each()方法，它是一個全局函數，不操做JQuery對象，而是以一個數組或者對象做爲第1個參數，以一個回調函數做爲第2個參數。回調函數擁有兩個參數：第1個爲對象的成員或數組的索引，第2個爲對應變量或內容。

 

 

Partial和RenderPartial

 

 

$.get(「URL」,」傳入的值」,」返加的值」,)

這是個格式。  Post 也和他差很少

 $('#test_get').mousedown(function (){
        $.get(
            'login.php',
            {
            username:$('#username').val(),
            password:$('#password').val()
            },
            function(data) //回傳函數
            {
                var myjson='';
                eval_r("myjson=" + data + ";");
                $('#result').html("姓名2:" + myjson.username + "<br/>密碼2:" + myjson.password);
            }
        );
    });
});

 

Ajax 實例

<script type="text/javascript">$(document).ready(function(){//這個就是jQueryready ，它就像C語言的main 全部操做包含在它裏面    $("#button_login").mousedown(function(){    login(); //點擊ID爲"button_login"的按鈕後觸發函數 login();    });    function login(){ //函數 login();        var username = $("#username").val();//取框中的用戶名        var password = $("#password").val();//取框中的密碼        $.ajax({ //一個Ajax過程            type: "post", //以post方式與後臺溝通            url : "login.php", //與此php頁面溝通            dataType:'json',//從php返回的值以 JSON方式 解釋            data: 'username='+username+'&password='+password, //發給php的數據有兩項，分別是上面傳來的u和p            success: function(json){//若是調用php成功            //alert(json.username+'\n'+json.password); //把php中的返回值（json.username）給 alert出來            $('#result').html("姓名:" + json.username + "<br/>密碼:" + json.password); //把php中的返回值顯示在預約義的result定位符位置            }        });    }