AJAX的基本概念
是构建网页的一种综合使用JavaScript和XML的技术。
其实质是HTML网页的异步传输技术:
表现形式:在等待网页的传输过程中,用户依然可以和系统进行交互。
好处:页面不用刷新就可以更新内容。
典型的流程:
1. 客户端出发异步操作
2. 创建新的XMLHttpRequest对象。
3. 与Server进行连接
4. 服务器端进行连接处理
5. 返回包含处理结果的XML文档
6. XMLHttpRequest对象接收处理结果并分析
7. 更新页面
XMLHttpRequest对象:
是一个浏览器内置的对象,通过它提起对服务器端的请求,可以通过javascript提起请求,如果要提起多个请求,就需要多个XHR对象。
这个请求在提起的时候,不会刷新页面,在后台运行。
请求的结果被预先定义好的方法(javacript)来处理。
例子程序:
对用户名进行检查:
1.客户端的触发
<tr>
<td class="altbg1"width="21%">用户名:</td>
<td class="altbg2"><inputid="userid"name="username"size="25"maxlength="25"type="text"onblur="validate()">
<spanid="usermsg"></span>
</tr>
要注意,使用的是onblur事件,onblur 事件会在对象失去焦点时发生。
οnblur="validate()" 是在对象失去焦点时发生的事件。
varreq;//定义全局变量
functionvalidate() {
var idField =document.getElementById("userid"); //获取当前需要传递的页面元素
varurl = "Validate.jsp?id="+ escape(idField.value); //通过validate页面来相应请求,id就是传递的值。escape是个特殊函数,可以把传递的值,转换成为url的特殊编码。比如空格可以转成%20
不同的浏览器,使用不同的方式来创建并初始化XHRequest对象。
if(window.XMLHttpRequest){ //netscope浏览器
req =new XMLHttpRequest();
} else if(window.ActiveXObject) { //
req =new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
//打开这个对象,本例当中,使用get方式来打开,给定的网址:url,true的意思是使用异步模式。第一个参数,可以是get,post,put,delete,第二个参数,是需要送到的地址。第三个就是看,是否是异步模式。true为异步模式,false为同步模式。
req.open("GET", url,true);
//readyState是XHR的状态。
0为uninitialized未初始化,
1为loading请求还没有发到客户端,只是建立的连接,
2为loaded,请求已经发送到客户端,并得到了http头部信息。
3为interactive,服务器提交的内容正在取得之中,
4为completed。已经取完了,服务器处理完毕。onreadystatechange,就是说当状态变化的时候,就调用callback方法。
//callback为调用的方法。注意callback不要带括号。
req.onreadystatechange = callback;
//通过send把请求提交到服务器端
req.send(null);
}
下面我们来写callback方法:
functioncallback() {
if(req.readyState == 4){ //真正的完成
if(req.status == 200){ //sever的正确反馈
//alert(req.responseText);//弹窗方式。
//反馈回来的是一个xml,如下代码解析xml。把xml文档当成一个对象传递过来,从对象当中,以TagName来取得相应的元素
varmsg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg);//msg本身是一个object。
//调用另外一个function,setMsg()
setMsg(msg.childNodes[0].nodeValue);
}
}
}
下面我们来写setMsg();
functionsetMsg(msg) {
//alert(msg);
mdiv = document.getElementById("usermsg");
if(msg =="invalid") {
mdiv.innerHTML ="<font color='red'>usernameexists</font>";
} else {
mdiv.innerHTML ="<font color='green'>congratulations! you canuse this username!</font>";
}
}
Server处理方式:
Server处理请求的方式不变, 输出什么都没关系,都可以直接输出语句。
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store"); //HTTP1.1 阻止浏览器进行缓冲
response.setHeader("Pragma","no-cache"); //HTTP1.0 阻止浏览器进行缓冲
response.setDateHeader("Expires", 0);//prevents catching at proxy server 阻止浏览器进行缓冲
System.out.println(request.getParameter("id"));
//check the database
response.getWriter().write("<msg>valid</msg>");
%>