一、简介
AJAX(Asynchronous JavaScript And XML),指异步JavaScript及XML,它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,其本质就是JavaScript技术,与XML其实没有太大关系。
通过AJAX,可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,JavaScript可在不重载页面的情况与 Web 服务器交换数据。
AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面,因而可使因特网应用程序更小、更快,更友好。
【当然AJAX也支持同步数据传输,不过意义不大。之所以用AJAX,就是因为其异步传输的优点】。
二、使用方法
1. 创建Ajax引擎对象XMLHttpRequest
2. 调用open方法与Ajax引擎建立连接,并告诉Ajax引擎我们的请求方式为get,请求url及采用异步方式
3. 告诉Ajax引擎处理完后,如何把结果反馈给我们,我们通常指定一个方法句柄,那么Ajax就会调用我们指定的方法,从而就可以得到Ajax引擎返回的数据(这种方式一般称为回调机制)
4. 最后巧用send方法设置的参数发送给Ajax引擎
具体代码示例(验证修改密码与登录时session中原密码是否相等):
javascript脚本代码:
var xmlHttp;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validate() {
var oldPassword = document.getElementByIdx_x_x("oldPassword");
if(oldPassword.value.length != 0) {
createXMLHttpRequest();
var url = "../servlet/PasswordValidateServlet?oldPassword=" + oldPassword.value;
xmlHttp.open("GET", url, true);
//方法地址,处理完成后自动调用,即回调(调用隐含函数)
//这里利用的是隐含函数,该funtion()函数可独立出来。
//如新定义一个函数 function back(){ }
//之后与xmlHttp关联 xmlHttp.onreadystatechange=back; 注意这里back不要写成back()
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if (xmlHttp.responseText != "") {
document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "<font color=‘red‘>" + xmlHttp.responseText + "</font>";
} else {
document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "";
}
} else {
alert("请求失败!错误码=" + xmlHttp.status);
}
}
};
xmlHttp.send(null);
}else {
document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "";
}
}
html代码(其他代码略):
<td>
<input name="oldPassword" type="password" class="text1" id="oldPassword" size="25" onblur="validate()"><span id="oldPasswordSpan"></span>
</td>
java代码(也可以是其他语言,这里的代码是由服务器端执行的,所以服务端程序是由什么开发的就用什么语言写即可):
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wang.drp.sysmgr.domain.User;
public class PasswordValidateServlet extends HttpServlet{
@Override
protected
void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
//清理浏览器缓存
//如果没有这步,使用Ajax会产生一些莫名其妙的错误
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-sotre");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);
response.setContentType("text/html; charset=GB18030");
User user =
(User)request.getSession().getAttribute("login_user");
String oldPassword = request.getParameter("oldPassword");
if (!oldPassword.equals(user.getPassword())) {
response.getWriter().println("输入密码与原密码不符!");
}
}
}
三、相关说明
1.
Ajax中XMLHttpRequest是最为关键的一个核心对象。
2.
XMLHttpRequest提供了readyState属性来对服务器响应进行判断。
readyState的取值如下:0 (初始化)、1 (正在装载)、2
(装载完毕)、3 (交互中)、4 (完成)
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。
3. XMLHttpRequest的status属性:
由服务器返回的HTTP状态代码,如200表示成功,而404表示"Not
Found"错误。
4.
XMLHttpRequest的responseText属性:
目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。而这个相应即对应response.getWriter()中输出的内容。