ajax实现异步交互

前端之家收集整理的这篇文章主要介绍了ajax实现异步交互前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

  1. <script language="javascript" type="text/javascript">
  2. var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象
  3. //定义一个用于创建XMLHttpRequest对象的函数
  4. function createXMLHttpRequest()
  5. {
  6. if(window.ActiveXObject)
  7. {
  8. //IE浏览器的创建方式
  9. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  10. }else if(windew.XMLHttpRequest)
  11. {
  12. //Netscape浏览器中的创建方式
  13. xmlHttpRequest = new XMLHttpRequest();
  14. }
  15. }
  16. //响应HTTP请求状态变化的函数
  17. function httpStateChange()
  18. {
  19. //判断异步调用是否完成
  20. if(xmlHttpRequest.readyState == 4)
  21. {
  22. //判断异步调用是否成功,如果成功开始局部更新数据
  23. if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
  24. {
  25. var flag = xmlHttpRequest.responseText;
  26. alert(flag);
  27. }else
  28. {
  29. //如果异步调用未成功,弹出警告框,并显示出错信息
  30. alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
  31. }
  32. }
  33. }
  34. //异步调用服务器段数据
  35. function receive(id)
  36. {
  37. //创建XMLHttpRequest对象
  38. createXMLHttpRequest();
  39. var url = "xxx.do?method=xxx&parameter="+id;
  40. if(xmlHttpRequest!=null)
  41. {
  42. //创建HTTP请求
  43. xmlHttpRequest.open("get",url,true);
  44. //设置HTTP请求状态变化的函数
  45. xmlHttpRequest.onreadystatechange = httpStateChange;
  46. //发送请求
  47. xmlHttpRequest.send(null);
  48. }
  49. }
  1. //edit 20140809 用jQuery <pre name="code" class="javascript">$.ajax({ //一个Ajax过程
  2. type: "post",url : url,dataType:'json',<pre name="code" class="javascript"> success: function(json){
  3. for(var i = 0; i < json.length; i++){ //通过for循环获取json里面的数据
  4. alert(json[i].flag);
  5. alert(json[i].notionString);
  6. }
  7. }
  1. });
  1. </script>

  1.  

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

update 20140926 返回json数组

  1. public void xxx(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception {
  2. <pre code_snippet_id="446311" snippet_file_name="blog_20140809_5_4894517" class="html" name="code"><span style="white-space:pre"> </span>String flag = "返回到前台的数据";
  3. String data = "[{\"flag\":\"" + flag + "\",\"notionString\":\"" + notionString + "\"}]";//拼接json格式字符串
  1. //设置编码格式
  1. response.setContentType("text/html");
  2. response.setCharacterEncoding("UTF-8");
  3. PrintWriter out = response.getWriter();
  4. out.write(<span style="font-family:Arial,Helvetica,sans-serif;">data</span>);
  1. }

猜你在找的Ajax相关文章