为什么要使用Ajax-阿里云开发者社区

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

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

普通的表单提交,页面会发生跳转,最简单的例子就是登录,比如""开源中国社区"的登录:

输入登录邮箱和登录密码,点击[现在登录]就会发生页面的跳转,进入到了如下页面:

如果是Ajax呢?

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

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

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

为什么要使用Ajax?

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

那么如何实现Ajax呢?

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

在管理员界面有一个全局设置页面,如下:

点击[生效]按钮,会请求服务器,但是页面不会发生跳转.比如在"试卷总分"输入框输入50,然后点击[生效]按钮

确实请求了服务器,我们可以看下后台的打印信息:

全局设置页面(globalSettings.jsp)代码如下:

   Java代码  
    
  
<%@ page language="java" contentType="text/html; charset=utf-8"  
    pageEncoding="utf-8"%>  
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<%@page import="com.kingbase.web.util.ExamUtil"%><html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Insert title here</title>  
<script type="text/javascript" src="js/Ajax.js" ></script>  
<script type="text/javascript" src="js/Module.js" ></script>  
<script type="text/javascript" src="js/common_util.js" ></script>  
<link href="css/main.css" type="text/css" rel="stylesheet">  
<script type="text/javascript">  
window.onload=function(){  
    var sizePerPage=document.forms[0].size_per_page;  
    //exam_sum_score.value="";  
      
    var abc44=function (obj) {  
        //alert(obj);  
        if(obj!='no'){  
            arr=obj.split("::");//obj="yes::0::0::2::fadf::"  
  
            sizePerPage.value=arr[1];  
            var examSumScore=document.forms[0].exam_sum_score;  
            examSumScore.value=arr[2];  
            showExamSwitch(arr[3]);  
            if(arr[4]!='null'){  
                loadInstruction(arr[4]);  
            }  
        }  
    };  
    var url2="<%=basePath%>/ViewWholeVariableServlet";  
    //alert(url2);  
    var xmlhw5=new XMLHttpHuangWei(url2, null,abc44);  
    xmlhw5.XMLGetMethod();  
    /****************** set exam switch start  ********************/  
    //showExamSwitch();  
    /****************** set exam switch end  ********************/  
      
    //loadInstruction();  
    //var examInstructionContent=document.forms[0].examInstructionContent;  
    //examInstructionContent.disabled="disabled";  
    //examInstructionContent.readOnly="readonly";  
};  
function showExamSwitch(exam_switch){  
    var isExamTime=document.forms[0].isExamTime;  
    com.whuang.hsj.setCheckedRadioByValue(isExamTime,exam_switch);  
}  
  
function setExamInstruction(){  
    //var examInstructionBtn=document.forms[0].examInstructionBtn;  
    var examInstructionContent=document.forms[0].examInstructionContent;  
    if(com.whuang.hsj.isReadOnly(examInstructionContent)){  
        alert("请先编辑，再提交修改!");  
        return ;  
    }  
    abc4=function (obj) {  
        alert("修改成功!");  
    };  
  
    var url2="AddExamInstructionServlet";  
    var args3="isEdit=2&content="+examInstructionContent.value;  
    var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
    xmlhw5.XMLPostMethod();  
    examInstructionContent.readOnly=true;  
    examInstructionContent.disabled="disabled";  
};  
function loadInstruction(exam_instru){  
    //var editInstructionContentBtn=document.forms[0].editInstructionContentBtn;  
    var examInstructionContent=document.forms[0].examInstructionContent;  
    examInstructionContent.readOnly=true;  
    examInstructionContent.disabled="disabled";  
    examInstructionContent.value =exam_instru;  
      
    //examInstructionContent.disabled=false;  
}  
  
function shutdownExam(){  
    //var shudownBtn=document.forms[0].shudownBtn;  
    var isExamTime=document.forms[0].isExamTime;  
    var value23=com.whuang.hsj.getRadioValue(isExamTime);  
    abc4=function (obj) {  
        alert("修改成功!");  
    };  
    var url2="SetExamSwitchServlet";  
    var args3="isExamTime="+value23;  
    var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
    //alert(resultArray.result);  
    xmlhw5.XMLPostMethod();  
}  
  
function setPageSize(){  
    alert("该功能暂未实现.");  
};  
  
function setExamSumScore(){  
    //var setExamScoreBtn=document.forms[0].setExamScoreBtn;  
    var exam_sum_score=document.forms[0].exam_sum_score;  
    abc4=function (obj) {  
        alert("修改成功!");  
    };  
    var url2="SetExamSumScoreServlet";  
    var args3="examSumScore="+exam_sum_score.value;  
    var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
    xmlhw5.XMLPostMethod();  
}  
function setPageSize(){  
    var sizePerPage=document.forms[0].size_per_page;  
    abc4=function (obj) {  
        alert("修改成功!");  
    };  
    var url2="<%=basePath%>/SetSizePerPageServlet";  
    var args3="sizePerPage="+sizePerPage.value;  
    var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
    xmlhw5.XMLPostMethod();  
}  
function viewInstruction(){  
    var examInstructionContent=document.forms[0].examInstructionContent;  
    abc4=function (obj) {  
        examInstructionContent.value=obj;  
    examInstructionContent.disabled="disabled";  
        examInstructionContent.readOnly=true;  
    };  
  
    var url2="AddExamInstructionServlet";  
    var args3="isEdit=1";  
    var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
    xmlhw5.XMLPostMethod();  
}  
  
function editInstruction(){  
    var examInstructionContent=document.forms[0].examInstructionContent;  
    examInstructionContent.readOnly=false;  
    examInstructionContent.disabled="";  
}  
</script>  
  
</head>  
<body>  
<center>  
<h1>全局设置</h1><a  class="hyperlink" href="javascript:location.reload();" >刷新</a>  
<form action="">  
<table border="1" >  
<tr><td>每页显示条数</td><td><input type="text" name="size_per_page" >  </td><td><input type="button" value="生效" onclick="setPageSize();" > </td>  </tr>  
<tr><td>试卷总分</td><td><input type="text" name="exam_sum_score" >  </td><td><input type="button" name="setExamScoreBtn" value="生效" onclick="setExamSumScore();" > </td>  </tr>  
<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>  
<tr><td rowspan="2">考试说明</td><td colspan="2" ><textarea cols="50" readonly="readonly" rows="10" name="examInstructionContent"  ></textarea> </td></tr>  
  
<tr > <td colspan="2" ><input name="editInstructionContentBtn" onclick="editInstruction();" type="button" value="编辑" >   
<input name="viewInstructionContentBtn" onclick="viewInstruction();" type="button" value="取消" >  
<input type="button"  value="提交修改" name="examInstructionBtn" onclick="setExamInstruction();" > </td> </tr>  
</table>  
</form>  
</center>  
</body>  
</html>  

详细讲解如下

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

   Java代码  
    
  
function setExamSumScore(){  
    //var setExamScoreBtn=document.forms[0].setExamScoreBtn;  
    var exam_sum_score=document.forms[0].exam_sum_score;  
    abc4=function (obj) {  
        alert("修改成功!");  
    };  
    var url2="SetExamSumScoreServlet";  
    var args3="examSumScore="+exam_sum_score.value;  
    var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);  
    xmlhw5.XMLPostMethod();  
}  

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

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

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

   Java代码  
    
  
var abc44=function (obj) {  
        if(obj!='no'){  
            arr=obj.split("::");//obj="yes::0::0::2::fadf::"  
  
            sizePerPage.value=arr[1];  
            var examSumScore=document.forms[0].exam_sum_score;  
            examSumScore.value=arr[2];  
            showExamSwitch(arr[3]);  
            if(arr[4]!='null'){  
                loadInstruction(arr[4]);  
            }  
        }  
    };  
    var url2="<%=basePath%>/ViewWholeVariableServlet?name=whuang";  
  
    var xmlhw5=new XMLHttpHuangWei(url2, null,abc44);  
    xmlhw5.XMLGetMethod();  

Ajax.js源代码如下

   Js代码  
    
  
// return parameter  
var xhr =null;  
var ii=0;  
var getXHR=null;  
var objectXHR=null;  
var responseMethod222222222111221;  
var browser=navigator.appName;  
var isIE=(browser=="Microsoft Internet Explorer");  
var createXHR=function() {  
    var xhr;  
    try {  
        xhr =xhr = new XMLHttpRequest();  
        return xhr;  
    } catch (e) {  
        try {  
            xhr = new ActiveXObject("Microsoft.XMLHTTP");  
            return xhr;  
        } catch (ee) {  
            xhr = false;  
        }  
    }  
    if (!xhr && typeof XMLHttpRequest != 'undefined') {  
         new ActiveXObject("Msxml2.XMLHTTP");  
        return xhr;  
    }  
};  
  
var onreadystatechangeMethod = function() {  
    var copyObj=document.getElementById("copy");  
    var obj = objectXHR;//        
    var isExist=(null!=copyObj);  
    if (obj.readyState == 0) {  
        if(isExist)  
        copyObj.innerHTML = "Sending Request...";  
    }  
    if (obj.readyState == 1) {  
        if(isExist)  
        copyObj.innerHTML = "Loading Response...";  
    }  
    if (obj.readyState == 2) {  
        if(isExist)  
        copyObj.innerHTML = "Response Loaded...";  
    }  
    if (obj.readyState == 3) {  
        if(isExist)  
        copyObj.innerHTML = "Response Ready...";  
    }  
    if (obj.readyState == 4) {  
        if (obj.status == 200) {  
            //alert("this : "+this);//this direct to window  
            if(isExist)  
            copyObj.innerHTML = "Response Complete...";  
            window.flag = true;  
            var response = obj.responseText;  
            //resultArray.result=response;  
            if (!(responseMethod222222222111221 == null || responseMethod222222222111221 == undefined)) {  
                responseMethod222222222111221(response);  
                //alert(response+": "+(ii++));  
            }  
//          this.result.push(response);  
            // alert("xmlhw.result:"+xmlhw.result);  
  
        } else if (obj.status == 404) {  
            alert(404);  
            if(null!=copyObj)  
            copyObj.innerHTML = "File not found";  
        } else {  
            if(null!=copyObj)  
            copyObj.innerHTML = "There was a problem retrieving the XML.";  
        }  
    }  
};  
  
objectXHR=createXHR();  
  
function XMLHttpHuangWei(url, arges, responseMethod2) {  
    //objectXHR=;  
    responseMethod222222222111221=responseMethod2;  
    objectXHR=createXHR();  
    //alert(this.xhr1);  
    this.url = url;  
    argObject = new Object();  
    argObject.arg = arges;  
    this.argesArray = argObject;  
    this.method = responseMethod222222222111221;  
    this.result = new Array();  
    getXHR=function(){  
        return window.objectXHR;  
        //return createXHR();  
    };  
      
  
    this.XMLGetMethod = function() {  
        getXHR().onreadystatechange = onreadystatechangeMethod;  
        var args23="";  
        if(this.argesArray.arg!=null&&this.argesArray.arg!=""){  
            args23=this.argesArray.arg+"&";  
        }  
        getXHR().open("GET", this.url + '?' + args23+"timestamp=" + (new Date()).getTime()+"&isIE="+isIE , true);  
        getXHR().send(null);  
    };  
    this.XMLPostMethod = function() {// xmlObj  
    // alert("responseMethod:\n"+responseMethod);  
    // alert("method:\n"+this.method);  
        getXHR().onreadystatechange = onreadystatechangeMethod;  
        getXHR().open("POST", this.url, true);  
        getXHR().setRequestHeader('Content-type',  
                'application/x-www-form-urlencoded');  
        getXHR().send(this.argesArray.arg);  
        // alert(this.argesArray.arg);  
        //        
    };  
}  

为什么要使用Ajax

热门文章

最新文章

相关课程

相关电子书