1. 程式人生 > >JQuery操作Ajax

JQuery操作Ajax

urn oba ade response 當前頁 xmlhttp 另一個 orm 可選

今天就來說說jquery對於ajax的支持,jquery封裝了XMLHttpRequest的底層實現,直接調用提供的方法即可

1.$.ajax(options)

這個方法是jquery對於ajax最為全面的支持,$.ajax(options)既可以發送GET請求,也可以發送POST請求等等,因此我們通過這個方法可以獲得ajax交互的所有控制權。

該方法中包含了一個參數options,該參數的形式為{key1:val1,key2:val2,key3:val3....},如

技術分享
{
        url:delTagAction,
        data:{
            sendTime:(new Date()).getTime(),
            idStr:idStr
        },
        type:"post",
        async:false,
        dataType:"json",
        success:function(data){
            if(data.success){
                $("#shield").fadeOut(400);
                $("#subDetailWrapper").fadeOut(400);
                $("#middle").load(listTagAction,
                        {
                            sendTime:(new Date()).getTime(),
                            currentPage:currentPage
                        }
                )
                alert("操作成功!!!");
            }else{
                alert("操作失敗,請聯系開發人員!!!");
            }
        }
    }
技術分享

下面就介紹發送ajax請求可指定的各個選項:

常用的:
async-----------------------------------指定是否使用異步請求,默認值為true(使用異步)

beforeSend-----------------------------指定發送請求之前將觸發指定的函數,通過該函數我們可以在請求前加一些自定義的請求頭或者是請求狀態條等,

complete-------------------------------指定ajax交互完成後的回調函數,該函數將在succes或error回調函數之後被調用。該選項指定的函數是形如:

function(xhr,textStatus){....},xhr表示本次交互的XMLHttpRequest對象,textStatus表示服務器端相應狀態的描述。

data------------------------------------發送本次ajax請求的請求參數。指定的參數形如:{key1:val1,key2:val2,key3:val3....}

dataType------------------------------指定服務器響應的類型,如果不指定,jquery會根據響應頭來返回responseXML或responseText,並將響應傳給回調函數對應的參數,可選值有以下:

  xml:返回可以使用jquery處理的XML文檔

  html:返回html文本

  script:返回javascript腳本,要註意的是此時必須將讀取瀏覽器緩存禁止掉

  json:返回一個符合json格式的字符串

  text:返回普通的文本響應

  jsonp:指定使用jsonp加載json塊,使用jsonp時應該在請求的url之後額外添加“?callback=?”,其中callback為回調函數

error-----------------------------------指定服務器響應出現錯誤的回調函數,指定的函數型形如function(xhr, textStatus, errorThrown){..},其中xhr參數表示請求的XMLHttpRequest對象,textStatus參數為關於錯誤的信息描述,errorThrown參數表示引起錯誤的錯誤對象

success---------------------------------指定服務器響應成功後的回調函數,指定的函數型形如function(xhr, textStatus){..},其中xhr參數表示請求XMLHttpRequest對象,textStatus參數為服務器響應狀態的信息

timeout---------------------------------設置ajax請求超時時長

type-------------------------------------設置發送請求的方式,常用的就是“POST”與"GET",默認值為"GET"

url---------------------------------------指定發送ajax請求的目的URL地址

其他:

cache-----------------------------------是否從瀏覽器中讀取緩存,默認為true(讀取緩存),我們一般是不希望讀取緩存的,辦法就是在發送的參數中添加時間戳來騙過瀏覽器

contentType---------------------------指定發送到服務器端的請求所使用的編碼格式,默認值為“application/x-www-form-urlencoded”

dataFilter------------------------------執行一個回調函數,該回調函數會對服務器端的響應進行預處理,指定的函數如:function(data,type){....},data表示服務器端返回的響應,type表示服務器端響應的數據類型

global----------------------------------設置是否觸發ajax的全局事件處理函數,默認值為true

ifModified------------------------------設置是否僅在服務器數據改變獲取新數據,默認值為false

jsonp-----------------------------------該選型指定的值將會覆蓋jsonp中請求的callback函數

username-------------------------------對目標url需要用戶名的指定用戶名

password-------------------------------對目標url需要密碼的指定密碼

processData----------------------------指定是否需要處理請求數據,默認為true(需要處理)

xhr--------------------------------------使用自己的方式來創建XMLHttpRequest對象

示例常用選項的ajax:

技術分享
function update(delTagAction, listTagAction){
    var tagId = $("#examId").val(); 
    var currentPage=$("#currentPage").val();  //獲取當前頁
    //alert(currentPage);
    var ids=new Array();
    if($("input[name=‘id‘]:checked").size()==0){
        alert("請先勾取選項!");
        return false;
        
    }
    $("input[name=‘id‘]:checked").each(function(i,obj){
        ids[i]=$(obj).val();
    });
    var idStr=ids.join("-");
    $.ajax({
        url:delTagAction,
        data:{
            sendTime: (new Date()).getTime(),
            idStr: idStr,
            tagId: tagId
        },
        type:"post",
        async:false,
        dataType:"json",
        success:function(data){
            if(data.success){
                $("#middle").load(listTagAction,
                        {
                            sendTime:(new Date()).getTime(),
                            currentPage:currentPage
                        }
                )
                alert("操作成功!!!");
            }else{
                alert("操作失敗,請聯系開發人員!!!");
            }
        }
    });
}
技術分享

看上面的代碼大家可以看到一個load方法的使用:

$("#middle").load(listTagAction,
{
sendTime:(new Date()).getTime(),
currentPage:currentPage
}
)

load方法是一個非常便捷的ajax交互方法,它可以向一個遠程URL發送一個異步請求,可以不需要指定回調函數,可以指定一個制定id的css來自動加載服務器的html響應

方法說明如下:load(url, [,data][,callback]),data是一個形如{key1:val2,key2:val2,key3:val3...}的js對象,callback為回調函數,兩個參數都是可選的

下面示例:

技術分享
//根據省份來進行顯示
function show(tagAction, city){
    $("#detail").empty();
    $("#detail").load(tagAction,
        {
            sendTime:(new Date()).getTime(),
            city: city
        }
    );
}
技術分享

交互後,服務器端返回的數據將加載到id為detail的元素的位置

2.上面介紹的$.ajax(options)為我們提供了全面控制ajax的請求細節,但另一個方面就會顯得比較的復雜,因此jquery提供了幾個簡單的方法來發送請求

(1)$.get(url, [data], [callback], [type]):向服務器端發送GET請求,參數表示分別是:url:訪問的服務器的地址;data:一個js對象,同於指定請求參數;

callback:指服務器響應成功後的回調函數,該函數形如:function(data, statusText){...}函數,其中data表示服務器端的響應,statusText表示服務器端

響應類型的描述信息;type:表示服務器端響應的數據類型

(2)$.post(url, [data], [callback], [type]):用於向服務器端發送Post請求,用法與$.get()一樣

(3)$.getJSON(url, [data], [callback]):與$.get()一樣,只是默認指定type方式為json

(4)$.getScript(url, [callback]):與$.get()一樣,只是默認指定type方式為script

這四個方法都比較相似:以$.getJSON(url, [data], [callback])方法示例代碼

技術分享
function startExam() {
    //這裏通過ajax進行交互
    $.getJSON("../adminPath/startExamAction.action", 
            {
                sendTime:(new Date()).getTime()
            }, 
            function(json) {
            if (json.success == true) {
                //alert(json.responseMsg);
                $("#rightContent").load("../adminPath/settingExam.action", 
                        {
                            sendTime: (new Date()).getTime(), 
                            pid: json.pid, 
                            tskid: json.tskid, 
                            examId: 0
                        });
            } else {
                alert("\u64cd\u4f5c\u5931\u8d25\uff01");
        }
    });
}

JQuery操作Ajax