AJAX–前後台互動

註：ajax通過async參數決定是非同步還是同步,false同步,true非同步;

　　非同步執行順序是先執行後續動作，再執行success裡代碼;

　　同步是先執行success裡代碼，再執行後續代碼;

驗證：同步時資料量大是否會卡頓？例如從後台搜尋大量資料時，頁面是否卡死？

1、(非同步)方法調用，後續代碼不需要等待它的執行結果
　　後台<C#>:

using System.Web.Script.Services; 
 
[WebMethod]
public static string GetStr(string str1, string str2)
{
    return str1 + str2;
}
 
前台<JQuery>:

function Test(strMsg1,strMsg2)
{
    $.ajax({
        type: "Post",
        url: "Demo.aspx/GetStr",
        async: true,
        //方法傳參的寫法一定要對，與後台一致，區分大小寫，不能為數組等，str1為形參的名字,str2為第二個形參的名字
        data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            //返回的資料用data.d擷取內容
            alert(data.d);
        },
        error: function(err) {
            alert(err);
        }
    });

　　//隱藏載入動畫
    $("#pageloading").hide();
}

 

2、(同步)方法調用，可用於需要得到傳回值是執行後續代碼的前提

　　後台<C#>:

using System.Web.Script.Services; 
 
[WebMethod]
public static string GetStr(string str1, string str2)
{
    return str1 + str2;
}
 
前台<JQuery>:

function Test(strMsg1,strMsg2)
{

　var str = “”;
    $.ajax({
        type: "Post",
        url: "Demo.aspx/GetStr",
        async: false,
        //方法傳參的寫法一定要對，與後台一致，區分大小寫，不能為數組等，str1為形參的名字,str2為第二個形參的名字
        data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            //返回的資料用data.d擷取內容 
            str = data.d;
        },
        error: function(err) {
            alert(err);
        }
    });

　return str;