AJAX,即Asynchronous JavaScript And XML,是一种异步JavaScript和XML技术。AJAX的核心技术理念在于使用XMLHttpRequest对象发送异步请求。
AJAX用到的技术有:
javascript:实现客户端的数据发送和界面更新,是AJAX实现的编程语言;
XMLHttpRequest:浏览器内置的用以进行异步数据发送和接收的对象,是AJAX核心对象;
Css+div:用户界面更加友好;
DOM模型:AJAX常见的技巧就是使用js响应dom组件事件或更新;
Xml:XML仅是一种传输数据的格式,在ajax应用中常以xml格式在c/s间交换数据;
Html:基础
使用AJAX三部曲:
首先,创建XMLHttpRequest对象;
其次,编写回调机制;
最后,发送请求。
下面我就用一个简单的示例来说明AJAX运行机制。
第一步,创建XMLHttpRequest对象
//定义request对象
var request;
//创建request对象
function createHttpRequest(){
if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");}
else if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else{
alert("AJAX is not supported by your Browser!");}
}
第二步,绑定回调方法
//判定request是否创建成功并且浏览器处于OK的状态
//编写回调机制
//绑定
function processName(){
if((request.readyState==4)&&(request.status==200)){
alert("服务器返回的是:"+request.responseText);
document.getElementById("nameerror").innerHTML=request.responseText;
}
}
第三步,发送请求
//发送异步请求
function checkName(){
//创建request对象
createHttpRequest();
//回调机制
request.onreadystatechange=processName;
//向servlet发送request请求
//第一个参数是发送请求方式 :post与get
//第二个参数是要发送到的servlet
//第三个参数是判断是同步还是异步请求。若true,异步;若false,则同步
request.open("POST","CheckNameServlet",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//传送参数
var username=document.getElementById("username").value;
request.send("username="+username);
}
JSP界面
<body>
<div>
<form name="userinfoForm" action="CheckLoginUserinfo.action" method="post">
<table>
<tr>
<td>用户:<input type="text" name="username" id="username" onBlur="checkName();" /></td>
</tr>
<div id="nameerror" style="color:blue">
</div>
<tr>
<td>密码:<input type="password" name="pwd" id="pwd" size="20" /></td>
</tr>
<div id="pwderror" style="color:yellow">
</div>
<tr>
<td><input class="buttons" type="submit" value="注册" /></td>
<td>
<input class="buttons" type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
后台检测输入的用户名是否为netjva的代码
package cn.netjava.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CheckNameServlet
*/
public class CheckNameServlet extends HttpServlet {
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=gbk");
PrintWriter out=response.getWriter();
String username=request.getParameter("username");
if(!username.equals("netjava")){
out.println("用户名不正确!");
}
}
}
当鼠标焦点离开用户名输入框时,就会调用checkName函数,当用户输入名不为netjava,在界面上输出显示用户名不正确。