为什么要使用Ajax

2022-05-05 20:17:03

为什么要使用Ajax呢,使用表单提交不是很好吗?

所以我们得先说说两者的区别?

普通的表单提交,页面会发生跳转,最简单的例子就是登录,比如""开源中国社区"的登录:
为什么要使用Ajax
 输入登录邮箱和登录密码,点击[现在登录]就会发生页面的跳转,进入到了如下页面:
为什么要使用Ajax
 

 

如果是Ajax呢?
为什么要使用Ajax
 

当我在"用户名"输入框输入"whuang"时,它提示我"此用户名已被注册，请另换一个",它是怎么知道我已经注册过"whuang"呢?因为它请求了一次服务器,但是界面却没有跳转.

而我登录的时候,请求了服务器,界面发生了跳转,这就是两者的区别.

说的让人听不懂一些,普通的请求是同步的,而Ajax是异步的.

 

为什么要使用Ajax?

因为用户体验,跳转的用户体验是很差的,屏幕会闪一下,而且填写的信息容易丢失.而使用Ajax的话,页面不跳转,之前填写的信息也都在.

 

那么如何实现Ajax呢?

以我两年前做的一个考试系统为例.

在管理员界面有一个全局设置页面,如下:
为什么要使用Ajax
 点击[生效]按钮,会请求服务器,但是页面不会发生跳转.比如在"试卷总分"输入框输入50,然后点击[生效]按钮
为什么要使用Ajax
 确实请求了服务器,我们可以看下后台的打印信息:
为什么要使用Ajax
 全局设置页面(globalSettings.jsp)代码如下:

Java代码  为什么要使用Ajax
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3.     <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
  4. <%  
  5.     String path = request.getContextPath();  
  6.     String basePath = request.getScheme() + "://"  
  7.             + request.getServerName() + ":" + request.getServerPort()  
  8.             + path + "/";  
  9. %>  
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  11.   
  12. <%@page import="com.kingbase.web.util.ExamUtil"%><html>  
  13. <head>  
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  15. <title>Insert title here</title>  
  16. <script type="text/javascript" src="js/Ajax.js" ></script>  
  17. <script type="text/javascript" src="js/Module.js" ></script>  
  18. <script type="text/javascript" src="js/common_util.js" ></script>  
  19. <link href="css/main.css" type="text/css" rel="stylesheet">  
  20. <script type="text/javascript">  
  21. window.onload=function(){  
  22.     var sizePerPage=document.forms[0].size_per_page;  
  23.     //exam_sum_score.value="";  
  24.       
  25.     var abc44=function (obj) {  
  26.         //alert(obj);  
  27.         if(obj!='no'){  
  28.             arr=obj.split("::");//obj="yes::0::0::2::fadf::"  
  29.   
  30.             sizePerPage.value=arr[1];  
  31.             var examSumScore=document.forms[0].exam_sum_score;  
  32.             examSumScore.value=arr[2];  
  33.             showExamSwitch(arr[3]);  
  34.             if(arr[4]!='null'){  
  35.                 loadInstruction(arr[4]);  
  36.             }  
  37.         }  
  38.     };  
  39.     var url2="<%=basePath%>/ViewWholeVariableServlet";  
  40.     //alert(url2);  
  41.     var xmlhw5=new XMLHttpHuangWei(url2, null,abc44);  
  42.     xmlhw5.XMLGetMethod();  
  43.     /****************** set exam switch start  ********************/  
  44.     //showExamSwitch();  
  45.     /****************** set exam switch end  ********************/  
  46.       
  47.     //loadInstruction();  
  48.     //var examInstructionContent=document.forms[0].examInstructionContent;  
  49.     //examInstructionContent.disabled="disabled";  
  50.     //examInstructionContent.readOnly="readonly";  
  51. };  
  52. function showExamSwitch(exam_switch){  
  53.     var isExamTime=document.forms[0].isExamTime;  
  54.     com.whuang.hsj.setCheckedRadioByValue(isExamTime,exam_switch);  
  55. }  
  56.   
  57. function setExamInstruction(){  
  58.     //var examInstructionBtn=document.forms[0].examInstructionBtn;  
  59.     var examInstructionContent=document.forms[0].examInstructionContent;  
  60.     if(com.whuang.hsj.isReadOnly(examInstructionContent)){  
  61.         alert("请先编辑，再提交修改!");  
  62.         return ;  
  63.     }  
  64.     abc4=function (obj) {  
  65.         alert("修改成功!");  
  66.     };  
  67.   
  68.     var url2="AddExamInstructionServlet";  
  69.     var args3="isEdit=2&content="+examInstructionContent.value;  
  70.     var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
  71.     xmlhw5.XMLPostMethod();  
  72.     examInstructionContent.readOnly=true;  
  73.     examInstructionContent.disabled="disabled";  
  74. };  
  75. function loadInstruction(exam_instru){  
  76.     //var editInstructionContentBtn=document.forms[0].editInstructionContentBtn;  
  77.     var examInstructionContent=document.forms[0].examInstructionContent;  
  78.     examInstructionContent.readOnly=true;  
  79.     examInstructionContent.disabled="disabled";  
  80.     examInstructionContent.value =exam_instru;  
  81.       
  82.     //examInstructionContent.disabled=false;  
  83. }  
  84.   
  85. function shutdownExam(){  
  86.     //var shudownBtn=document.forms[0].shudownBtn;  
  87.     var isExamTime=document.forms[0].isExamTime;  
  88.     var value23=com.whuang.hsj.getRadioValue(isExamTime);  
  89.     abc4=function (obj) {  
  90.         alert("修改成功!");  
  91.     };  
  92.     var url2="SetExamSwitchServlet";  
  93.     var args3="isExamTime="+value23;  
  94.     var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
  95.     //alert(resultArray.result);  
  96.     xmlhw5.XMLPostMethod();  
  97. }  
  98.   
  99. function setPageSize(){  
  100.     alert("该功能暂未实现.");  
  101. };  
  102.   
  103. function setExamSumScore(){  
  104.     //var setExamScoreBtn=document.forms[0].setExamScoreBtn;  
  105.     var exam_sum_score=document.forms[0].exam_sum_score;  
  106.     abc4=function (obj) {  
  107.         alert("修改成功!");  
  108.     };  
  109.     var url2="SetExamSumScoreServlet";  
  110.     var args3="examSumScore="+exam_sum_score.value;  
  111.     var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
  112.     xmlhw5.XMLPostMethod();  
  113. }  
  114. function setPageSize(){  
  115.     var sizePerPage=document.forms[0].size_per_page;  
  116.     abc4=function (obj) {  
  117.         alert("修改成功!");  
  118.     };  
  119.     var url2="<%=basePath%>/SetSizePerPageServlet";  
  120.     var args3="sizePerPage="+sizePerPage.value;  
  121.     var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
  122.     xmlhw5.XMLPostMethod();  
  123. }  
  124. function viewInstruction(){  
  125.     var examInstructionContent=document.forms[0].examInstructionContent;  
  126.     abc4=function (obj) {  
  127.         examInstructionContent.value=obj;  
  128.     examInstructionContent.disabled="disabled";  
  129.         examInstructionContent.readOnly=true;  
  130.     };  
  131.   
  132.     var url2="AddExamInstructionServlet";  
  133.     var args3="isEdit=1";  
  134.     var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
  135.     xmlhw5.XMLPostMethod();  
  136. }  
  137.   
  138. function editInstruction(){  
  139.     var examInstructionContent=document.forms[0].examInstructionContent;  
  140.     examInstructionContent.readOnly=false;  
  141.     examInstructionContent.disabled="";  
  142. }  
  143. </script>  
  144.   
  145. </head>  
  146. <body>  
  147. <center>  
  148. <h1>全局设置</h1><a  class="hyperlink" href="javascript:location.reload();" >刷新</a>  
  149. <form action="">  
  150. <table border="1" >  
  151. <tr><td>每页显示条数</td><td><input type="text" name="size_per_page" >  </td><td><input type="button" value="生效" onclick="setPageSize();" > </td>  </tr>  
  152. <tr><td>试卷总分</td><td><input type="text" name="exam_sum_score" >  </td><td><input type="button" name="setExamScoreBtn" value="生效" onclick="setExamSumScore();" > </td>  </tr>  
  153. <tr><td>是否打开考试功能</td><td><input name="isExamTime" type="radio" value="1" checked="checked" >打开 &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="isExamTime"  value="2" >关闭 </td><td><input type="button" name="shudownBtn" onclick="shutdownExam();" value="生效" > </td> </tr>  
  154. <tr><td rowspan="2">考试说明</td><td colspan="2" ><textarea cols="50" readonly="readonly" rows="10" name="examInstructionContent"  ></textarea> </td></tr>  
  155.   
  156. <tr > <td colspan="2" ><input name="editInstructionContentBtn" onclick="editInstruction();" type="button" value="编辑" >   
  157. <input name="viewInstructionContentBtn" onclick="viewInstruction();" type="button" value="取消" >  
  158. <input type="button"  value="提交修改" name="examInstructionBtn" onclick="setExamInstruction();" > </td> </tr>  
  159. </table>  
  160. </form>  
  161. </center>  
  162. </body>  
  163. </html>  

 详细讲解如下

 

刚才我点击[生效]触发的方法如下:

 

Java代码  为什么要使用Ajax
  1. function setExamSumScore(){  
  2.     //var setExamScoreBtn=document.forms[0].setExamScoreBtn;  
  3.     var exam_sum_score=document.forms[0].exam_sum_score;  
  4.     abc4=function (obj) {  
  5.         alert("修改成功!");  
  6.     };  
  7.     var url2="SetExamSumScoreServlet";  
  8.     var args3="examSumScore="+exam_sum_score.value;  
  9.     var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
  10.     xmlhw5.XMLPostMethod();  
  11. }  

 XMLHttpHuangWei 有三个参数,第一个参数是请求的服务器地址(接口地址),第二个参数是请求的参数,第三个参数是回调函数(回调方法).使用XMLHttpHuangWei需要引入如下文件Ajax.js,

XMLHttpHuangWei有两个方法XMLPostMethod(post方式请求) 和XMLGetMethod(get方式请求),

给一个get方式 请求的例子:

Java代码  为什么要使用Ajax
  1. var abc44=function (obj) {  
  2.         if(obj!='no'){  
  3.             arr=obj.split("::");//obj="yes::0::0::2::fadf::"  
  4.   
  5.             sizePerPage.value=arr[1];  
  6.             var examSumScore=document.forms[0].exam_sum_score;  
  7.             examSumScore.value=arr[2];  
  8.             showExamSwitch(arr[3]);  
  9.             if(arr[4]!='null'){  
  10.                 loadInstruction(arr[4]);  
  11.             }  
  12.         }  
  13.     };  
  14.     var url2="<%=basePath%>/ViewWholeVariableServlet?name=whuang";  
  15.   
  16.     var xmlhw5=new XMLHttpHuangWei(url2, null,abc44);  
  17.     xmlhw5.XMLGetMethod();  

 

Ajax.js源代码如下

Js代码  为什么要使用Ajax
  1. // return parameter  
  2. var xhr =null;  
  3. var ii=0;  
  4. var getXHR=null;  
  5. var objectXHR=null;  
  6. var responseMethod222222222111221;  
  7. var browser=navigator.appName;  
  8. var isIE=(browser=="Microsoft Internet Explorer");  
  9. var createXHR=function() {  
  10.     var xhr;  
  11.     try {  
  12.         xhr =xhr = new XMLHttpRequest();  
  13.         return xhr;  
  14.     } catch (e) {  
  15.         try {  
  16.             xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  17.             return xhr;  
  18.         } catch (ee) {  
  19.             xhr = false;  
  20.         }  
  21.     }  
  22.     if (!xhr && typeof XMLHttpRequest != 'undefined') {  
  23.          new ActiveXObject("Msxml2.XMLHTTP");  
  24.         return xhr;  
  25.     }  
  26. };  
  27.   
  28. var onreadystatechangeMethod = function() {  
  29.     var copyObj=document.getElementById("copy");  
  30.     var obj = objectXHR;//        
  31.     var isExist=(null!=copyObj);  
  32.     if (obj.readyState == 0) {  
  33.         if(isExist)  
  34.         copyObj.innerHTML = "Sending Request...";  
  35.     }  
  36.     if (obj.readyState == 1) {  
  37.         if(isExist)  
  38.         copyObj.innerHTML = "Loading Response...";  
  39.     }  
  40.     if (obj.readyState == 2) {  
  41.         if(isExist)  
  42.         copyObj.innerHTML = "Response Loaded...";  
  43.     }  
  44.     if (obj.readyState == 3) {  
  45.         if(isExist)  
  46.         copyObj.innerHTML = "Response Ready...";  
  47.     }  
  48.     if (obj.readyState == 4) {  
  49.         if (obj.status == 200) {  
  50.             //alert("this : "+this);//this direct to window  
  51.             if(isExist)  
  52.             copyObj.innerHTML = "Response Complete...";  
  53.             window.flag = true;  
  54.             var response = obj.responseText;  
  55.             //resultArray.result=response;  
  56.             if (!(responseMethod222222222111221 == null || responseMethod222222222111221 == undefined)) {  
  57.                 responseMethod222222222111221(response);  
  58.                 //alert(response+": "+(ii++));  
  59.             }  
  60. //          this.result.push(response);  
  61.             // alert("xmlhw.result:"+xmlhw.result);  
  62.   
  63.         } else if (obj.status == 404) {  
  64.             alert(404);  
  65.             if(null!=copyObj)  
  66.             copyObj.innerHTML = "File not found";  
  67.         } else {  
  68.             if(null!=copyObj)  
  69.             copyObj.innerHTML = "There was a problem retrieving the XML.";  
  70.         }  
  71.     }  
  72. };  
  73.   
  74. objectXHR=createXHR();  
  75.   
  76. function XMLHttpHuangWei(url, arges, responseMethod2) {  
  77.     //objectXHR=;  
  78.     responseMethod222222222111221=responseMethod2;  
  79.     objectXHR=createXHR();  
  80.     //alert(this.xhr1);  
  81.     this.url = url;  
  82.     argObject = new Object();  
  83.     argObject.arg = arges;  
  84.     this.argesArray = argObject;  
  85.     this.method = responseMethod222222222111221;  
  86.     this.result = new Array();  
  87.     getXHR=function(){  
  88.         return window.objectXHR;  
  89.         //return createXHR();  
  90.     };  
  91.       
  92.   
  93.     this.XMLGetMethod = function() {  
  94.         getXHR().onreadystatechange = onreadystatechangeMethod;  
  95.         var args23="";  
  96.         if(this.argesArray.arg!=null&&this.argesArray.arg!=""){  
  97.             args23=this.argesArray.arg+"&";  
  98.         }  
  99.         getXHR().open("GET", this.url + '?' + args23+"timestamp=" + (new Date()).getTime()+"&isIE="+isIE , true);  
  100.         getXHR().send(null);  
  101.     };  
  102.     this.XMLPostMethod = function() {// xmlObj  
  103.     // alert("responseMethod:\n"+responseMethod);  
  104.     // alert("method:\n"+this.method);  
  105.         getXHR().onreadystatechange = onreadystatechangeMethod;  
  106.         getXHR().open("POST", this.url, true);  
  107.         getXHR().setRequestHeader('Content-type',  
  108.                 'application/x-www-form-urlencoded');  
  109.         getXHR().send(this.argesArray.arg);  
  110.         // alert(this.argesArray.arg);  
  111.         //        
  112.     };  
  113. }  

 

上一篇：Linux学习（十五）LVM


下一篇：Ubuntu 14.10 下安装SVN