Ajax()方法如何與後臺互動
Ajax全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。Ajax技術是目前在瀏覽器中通過JavaScript指令碼可以使用的所有技術的集合。Ajax以一種嶄新的方式來使用所有的這些技術，使得古老的B/S方式的Web開發煥發了新的活力。
ajax()方法是jQuery底層的ajax實現，通過HTTP請求載入遠端資料。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$.ajax({
type: "GET",
url: "handleAjaxRequest.action",
data: {paramKey:paramValue},
async: true,
dataType:"json",
success: function(returnedData) {
alert(returnedData);
//請求成功後的回撥函式
//returnedData--由伺服器返回，並根據 dataType 引數進行處理後的資料；
//根據返回的資料進行業務處理
},
error: function(e) {
alert(e);
//請求失敗時呼叫此函式
}
});
}
|
引數說明:
type:請求方式，“POST”或者“GET”,預設為“GET”。
url:傳送請求的地址。
data:要向伺服器傳遞的資料，已key:value的形式書寫（id:1）。GET請求會附加到url後面。
async:預設true,為非同步請求，設定為false,則為同步請求。
dataType:預期伺服器返回的資料型別,可以不指定。有xml、html、text等。
在開發中，使用以上引數已可以滿足基本需求。
如果需要向伺服器傳遞中文引數，可將引數寫在url後面，用encodeURI編碼就可以了。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var
chinese = "中文";
var
urlTemp = "handleAjaxRequest.action?chinese="+chinese;
var
url = encodeURI(urlTemp);//進行編碼
$.ajax({
type: "GET",
url: url,//直接寫編碼後的url
success: function(returnedData) {
alert(returnedData);
//請求成功後的回撥函式
//returnedData--由伺服器返回，並根據 dataType 引數進行處理後的資料；
//根據返回的資料進行業務處理
},
error: function(e) {
alert(e);
//請求失敗時呼叫此函式
}
});
}
|
struts2的action對請求進行處理：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
public void handleAjaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//設定返回資料為html文字格式
response.setContentType("text/html;charset=utf-");
response.setHeader("pragma",
"no-cache");
response.setHeader("cache-control",
"no-cache");
PrintWriter out =null;
try
{
String chinese = request.getParameter("chinese");
//引數值是中文，需要進行轉換
chinese = new
String(chinese.getBytes("ISO--"),"utf-");
System.out.println("chinese is : "+chinese);
//業務處理
String resultData =
"hello world";
out = response.getWriter();
out.write(resultData);
//如果返回json資料，response.setContentType("application/json;charset=utf-");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);//用Gson將資料轉換為json格式
//out.write(result);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out !=
null) {
out.close();
}
}
}
|
struts.xml配置檔案：不需要寫返回型別
| 1 2 3 |
<action name="handleAjaxRequest"
class="com.test.TestAction"
method="handleAjaxRequest">
</action>
|
分享AJAX前後臺互動方法
注：ajax通過async引數決定是非同步還是同步,false同步,true非同步;
非同步執行順序是先執行後續動作，再執行success裡程式碼;
同步是先執行success裡程式碼，再執行後續程式碼;
驗證：同步時資料量大是否會卡頓？例如從後臺搜尋大量資料時，頁面是否卡死？
1、(非同步)方法呼叫，後續程式碼不需要等待它的執行結果
後臺<C#>:
| 1 2 3 4 5 |
using System.Web.Script.Services;
public static string GetStr(string str1, string str2)
{
return
str1 + str2;
}
|
前臺<JQuery>:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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#>:
| 1 2 3 4 5 |
using System.Web.Script.Services;
public static string GetStr(string str1, string str2)
{
return
str1 + str2;
}
|
前臺<JQuery>:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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;
|