为什么要使用Ajax呢,使用表单提交不是很好吗?
所以我们得先说说两者的区别?
普通的表单提交,页面会发生跳转,最简单的例子就是登录,比如""开源中国社区"的登录:
输入登录邮箱和登录密码,点击[现在登录]就会发生页面的跳转,进入到了如下页面:
如果是Ajax呢?
当我在"用户名"输入框输入"whuang"时,它提示我"此用户名已被注册，请另换一个",它是怎么知道我已经注册过"whuang"呢?因为它请求了一次服务器,但是界面却没有跳转.
而我登录的时候,请求了服务器,界面发生了跳转,这就是两者的区别.
说的让人听不懂一些,普通的请求是同步的,而Ajax是异步的.
为什么要使用Ajax?
因为用户体验,跳转的用户体验是很差的,屏幕会闪一下,而且填写的信息容易丢失.而使用Ajax的话,页面不跳转,之前填写的信息也都在.
那么如何实现Ajax呢?
以我两年前做的一个考试系统为例.
在管理员界面有一个全局设置页面,如下:
点击[生效]按钮,会请求服务器,但是页面不会发生跳转.比如在"试卷总分"输入框输入50,然后点击[生效]按钮
确实请求了服务器,我们可以看下后台的打印信息:
全局设置页面(globalSettings.jsp)代码如下:
<%@ 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 + "/";
%>
<%@page import="com.kingbase.web.util.ExamUtil"%>
Insert title here
全局设置
刷新
详细讲解如下
刚才我点击[生效]触发的方法如下:
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方式 请求的例子:
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源代码如下
// 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);
//
};
}
