Ajax()方法如何与后台交互


            Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax以一种崭新的方式来使用所有的这些技术，使得古老的B/S方式的Web开发焕发了新的活力。

ajax()方法是jQuery底层的ajax实现，通过HTTP请求加载远程数据。







$.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编码就可以了。







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对请求进行处理：







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配置文件：不需要写返回类型







<action name="handleAjaxRequest" class="com.test.TestAction"

method="handleAjaxRequest">

</action>



分享AJAX前后台交互方法

注：ajax通过async参数决定是异步还是同步,false同步,true异步;



　　异步执行顺序是先执行后续动作，再执行success里代码;



　　同步是先执行success里代码，再执行后续代码;



验证：同步时数据量大是否会卡顿？例如从后台搜索大量数据时，页面是否卡死？



1、(异步)方法调用，后续代码不需要等待它的执行结果



　　后台<C#>:







using System.Web.Script.Services; 

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; 

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;