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

Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种建立交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中经过JavaScript脚本能够使用的全部技术的集合javascript

Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种建立交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中经过JavaScript脚本能够使用的全部技术的集合。Ajax以一种崭新的方式来使用全部的这些技术,使得古老的B/S方式的Web开发焕发了新的活力。html

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

$.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”。  参数说明:ajax

  url:发送请求的地址。json

  data:要向服务器传递的数据,已key:value的形式书写(id:1)。GET请求会附加到url后面。数组

  async:默认true,为异步请求,设置为false,则为同步请求。浏览器

  dataType:预期服务器返回的数据类型,能够不指定。有xml、html、text等。服务器

  在开发中,使用以上参数已能够知足基本需求。app

  若是须要向服务器传递中文参数,可将参数写在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经过async参数决定是异步仍是同步,false同步,true异步;分享AJAX先后台交互方法

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

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

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

一、(异步)方法调用,后续代码不须要等待它的执行结果

  后台<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();

}


  后台<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;