jQuery入門筆記之（五）jQuery中的Ajax

關于Ajax的概述就不說了，有興趣自己去找一下吧，并且建議去我博客看關于原生js實現Ajax函數的實現，希望有所幫助。服務器的配置，那篇文章也給出了地址。

Ajax入門（一）從0開始到一次成功的GET請求

/**
 * Ajax中的load方法（局部方法，可以直接綁定在需要獲取的元素上）
 * @param {String}        url  必須，獲取文件地址
 * @param {JSON or String}          可選，鍵值對方式的請求參數或者（使用鍵值對形式，請求將轉化成post）
 * @param {Function}      可選，請求成功的回調函數
 *   @config   {String}   responseText         獲得字符串形式的響應數據
 *   @config   {String}   textStatus            文本方式返回HTTP狀態碼
 *   @config   {Object}   XMLHttpRequest        xhr對象，有多種屬性
 */
.load(url, data, complete(responseText, textStatus, XMLHttpRequest));

$('button').click(function () {
    $('#box').load('test.php', {url : 'guowen'});
});

<?php
if ($_POST["url"] == "guowen") {//get請求把POST更改一下就好了
    echo "<a ;
} else {
    echo "其他網站";
}
?>

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

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

$('form input[type=button]').click(function () {
    $.ajaxSetup({//初始化多個ajax方法相同部分參數，后面再寫ajax的時候，就不用在寫了。
        type : 'POST',
        url : 'test.php',
        data : $('form').serialize()//表單序列化
    });
    $.ajax({
        success : function (response, status, xhr) {
                    alert(response);
                }
    });
});

$(document).ajaxStart(function(){
    $(".loading").show();
}).ajaxStop(function(){
    $(".loading").hide();
});

$.ajax({
    //…………
    timeout : 500,//如果請求時間太長，可以設置超時
    global : false,//如果某個 ajax 不想觸發全局事件，可以設置取消
    error : function(xhr,errorText,errorType){//一般都直接用xhr對象
                alert("發生錯誤："+xhr.status);//返回錯誤狀態碼
            }
});

//遍歷 settings 對象的屬性
$(document).ajaxSuccess(function (event, xhr, settings) {
    for (var i in settings) {
        console.log(i);
    }
});

<?php
    $_arr= array('a'=>1,'b'=>2,'c'=>3);
    $_result = json_encode($_arr);
    echo $_result;
?>

$.ajax({
    type:"post",
    url:"test.php",
    dataType:"json",//因為文件類型是php。但是返回的數據是json，所以必須設置類型，否則返回字符串
    success:function(response,staus,xhr){
        console.log(response.a);//打印出來1
    }
});

<?php
    $_arr= array('a'=>1,'b'=>2,'c'=>3);
    $_result = json_encode($_arr);
    $_callback = $_GET['callback'];//關鍵在這。配合客戶端JS使用
    echo $_callback."($_result)";//php用點號實現字符串拼接
?>

$.ajax({//我本地地址為http://127.0.0.1:8020/ajax.html
    type:"GET",
    url:"http://localhost/test.php?callback=?",//這樣就可以實現跨域資源的訪問了，最后的？號，jQuery會自動轉化成字符串
    dataType:"json",//若這里使用JSONP的話，可以刪除上面url的“?callback=?”，jQuery會自動處理。
    success:function(response,staus,xhr){
        alert(response.a);
        console.log(response)
    }
});

//獲取 jqXHR 對象，查看屬性和方法
var jqXHR = $.ajax({
    type : 'POST',
    url : 'test.php',
    data : $('form').serialize()
});
for (var i in jqXHR) {
    document.write(i + '<br />');
}

//成功后回調函數
jqXHR.done(function (response) {
    $('#box').html(response);
});