1.什么是Ajax? Asynchronous JavaScript and XML( 异步JavaScript和XML )
一种创建交互式网页应用的网页开发技术
基于web标准(standards-based presentation)XHTML CSS的表示
使用 DOM(Document Object Model)进行动态显示及交互;
使用 XML 和 XSLT 进行数据交换及相关操作;
使用 XMLHttpRequest 进行异步数据查询、检索;
使用 JavaScript 将所有的东西绑定在一起
2.优势
①通过异步模式,提升了用户体验
②优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
例子:Google Maps!
3.创建ajax程序的基本流程(以验证用户名存在性为例子)
①在中创建XMLHttpRequest对象
②使用XMLHttpRequest对象创建请求request对象
1. var request;
2. if (window.XMLHttpRequest) { // Mozilla,…
3. request = new XMLHttpRequest();
4. }else if (window.ActiveXObject) { // IE
5. request = new ActiveXObject(“Msxml2.XMLHTTP”);
6. }
③监视response的状态,写回调函数处理服务器返回的数据
1. function checkme(){
2. //得到文本框值
3. var name=document.all.stname.value;
4. //把 name发给 servlet 或 jsp 防止缓存 加上一个 r=0.7649321
5. request.open(“get”,”check?stname=” name “&r=” Math.random());
6. request.send(null);
7. }
④使用XMLHttpRequest对象发送请求 使用事件触发
- request.onreadystatechange = sendName;
- function sendName(){
- if(request.readyState==4){ //接收完毕
- //数据呢?
- var fhz=request.responseText;
-
- if(fhz==”true”){ //用户存在了
- document.all.info.innerHTML=”用户名已存在”;
- document.all.info.style.color=”red”;
- }else{
- document.all.info.innerHTML=”用户名可用”;
- document.all.info.style.color=”green”;
- }
- }
}
4.两个应用——验证用户存在否,动态加下拉列表1)注册 zhuce.jsp
- <%@ page language=”java” import=”java.util.*” pageEncoding=”gbk”%>
- My JSP ‘zhuce.jsp’ starting page