ajax如何做到异步交互,ajax实现异步交互

今天用ajax实现了页面无刷新和后台交互并更新页面数据的功能，现在整理出来和大家分享，希望大家补充。

1、javascript代码，实现ajax与后台交互，在前台页面调用receive方法；

var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象

//定义一个用于创建XMLHttpRequest对象的函数

function createXMLHttpRequest()

{

if(window.ActiveXObject)

{

//IE浏览器的创建方式

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}else if(windew.XMLHttpRequest)

{

//Netscape浏览器中的创建方式

xmlHttpRequest = new XMLHttpRequest();

}

}

//响应HTTP请求状态变化的函数

function httpStateChange()

{

//判断异步调用是否完成

if(xmlHttpRequest.readyState == 4)

{

//判断异步调用是否成功,如果成功开始局部更新数据

if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)

{

var flag = xmlHttpRequest.responseText;

alert(flag);

}else

{

//如果异步调用未成功,弹出警告框,并显示出错信息

alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);

}

}

}

//异步调用服务器段数据

function receive(id)

{

//创建XMLHttpRequest对象

createXMLHttpRequest();

var url = "xxx.do?method=xxx&parameter="+id;

if(xmlHttpRequest!=null)

{

//创建HTTP请求

xmlHttpRequest.open("get",url,true);

//设置HTTP请求状态变化的函数

xmlHttpRequest.onreadystatechange = httpStateChange;

//发送请求

xmlHttpRequest.send(null);

}

}

//edit 20140809 用jQuery

$.ajax({ //一个Ajax过程

type: "post",url : url,dataType:'json',

        success: function(json){

for(var i = 0; i < json.length; i++){ //通过for循环获取json里面的数据

alert(json[i].flag);

alert(json[i].notionString);

}

}

});

2、xmlHttpRequest.open("get",true) ; 通过url链接到后台，前台可以获取到flag参数，如上httpStateChange方法，alert(flag)；

update 20140926 返回json数组

public void xxx(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception {

String flag = "返回到前台的数据";

String data = "[{\"flag\":\"" + flag + "\",\"notionString\":\"" + notionString + "\"}]";//拼接json格式字符串

//设置编码格式

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

out.write(data);

}

总结

以上是编程之家为你收集整理的ajax实现异步交互全部内容，希望文章能够帮你解决ajax实现异步交互所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。