jQuery框架的ajax理解運用

一．Ajax 概述
Ajax 全稱爲：“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML）， 它並不是 JavaScript 的一種單一技術，而是利用了一系列交互式網頁應用相關的技術所形 成的結合體。使用 Ajax，我們可以無刷新狀態更新頁面，並且實現異步提交，提升了用戶體驗。jQuery 對 Ajax 做了大量的封裝，我們使用起來也較爲方便，不需要去考慮瀏覽器兼容 性。

二．load()方法
.load()方法可以參數三個參數：url(必須，請求 html 文件的 url 地址，參數類型爲 String)、 data(可選，發送的 key/value 數據，參數類型爲 Object)、callback(可選，成功或失敗的回調 函數，參數類型爲函數 Function)。

//HTML
 <inputtype="button"value="異步獲取數據"/> 
 <div id="box"></div>

//jQuery 
$('input').click(function(){
    $('#box').load('test.html'); //添加到box裏
});

//如果想對載入的 HTML 進行篩選，那麼只要在 url 參數後面跟着一個選擇器即可。 
$('input').click(function(){
     $('#box').load('test.html.my'); 
});

二.post（）和get（）方法
如果是服務器文件，比如.php。一般不僅需要載入數據，還需要向服務器提交數據，那 麼我們就可以使用第二個可選參數 data。向服務器提交數據有兩種方式：get 和 post。

在 Ajax 數據載入完畢之後，就能執行回調函數 callback，也就是第三個參數。回調函數 也可以傳遞三個可選參數：response（請求返回）、Status（請求狀態)、xhr （XMLHttpRequest 對象）。

//jQuery  post/get方法
$('input').click(function(){
    $.post('a.php',{          //第一個參數url（get方法，把post改成get）
       url:'baidu'            //第二個參數date
    },function(response,status,xhr){     //第三個參數回調函數
            alert('返回的值爲：'+response+   //結果爲哈哈哈
                 '，狀態爲：'+status +      //結果爲success
                 '，狀態是：'+xhr.statusText);   //結果爲OK
        });
    })

//php接收 post/get 方法
    if($_POST['url']=='baidu'){   //POST改成GET
        echo'哈哈哈';
    }
    else{
        echo'錯誤';
    }

//get方法，改掉對應的地方

注意：status 得到的值，如果成功返回數據則爲：success，否則爲：error。
如果成功返回數據，那麼 xhr 對象的 statusText 屬性則返回’OK’字符串。除了’OK’的狀態 字符串，statusText 屬性還提供了一系列其他的值，如下：

第三個回調函數，一般來說只傳遞response一個參數就可以。

三.getScript() 和 getJSON()
有時我們希望能夠特定的情況再加載 JS 文件，而不是一開始把所有 JS 文件都加載了。這時使用$.getScript()方法。

//點擊按鈕後再加載 JS 文件
 $('input').click(function(){
     $.getScript('test.js');  
 });

$.getJSON()方法是專門用於加載 JSON 文件的，使用方法和之前的類似。

$('input').click(function({
    $.getJSON('test.json',function(response,status, xhr){  
          alert(response[0].url); 
   }); 
});

四. ajax() 方法
$.ajax()是所有 ajax 方法中最底層的方法，所有其他方法都是基於ajax()方法的封裝。 這個方法只有一個參數，傳遞一個各個功能鍵值對的對象。

$('input').click(function(){ 
    $.ajax({ type:'POST',    //這裏可以換成 GET
    url:'a.php', 
    data:{ url:'baidu' }, 
    success:function(response,stutas,xhr){
        $('#box').html(response); 
    }
    });
});

五.表單序列化
使用表單序列化方法.serialize()，會智能的獲取指定表單內的所有元素。這樣，在面對 大量表單元素時，會把表單元素內容序列化爲字符串，然後再使用 Ajax 請求。

//html
<form>
    用戶名：<input type="text" name='user'/>
    密碼： <input type="text" name='password' />
          <input type="button" value="提交" />
</form>
<div id="box"></div>

//jquey
$('form input[type=button]').click(function (){ 
    $.ajax({ 
        type:'POST', 
        url:'a.php', 
        data:$('form').serialize(), 
        success:function(response,status,xhr){ 
            $('#box').html(response);   
        } 
    });
});

//PHP
echo $_POST['user'].'-'.$_POST['password'];

學習不容易，總結出來又是九點了。