Ajax的个人理解

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对象发送请求 使用事件触发

1. request.onreadystatechange = sendName;
2. function sendName(){
3. if(request.readyState==4){ //接收完毕
4. //数据呢？
5. var fhz=request.responseText;
6. 
   
   1. if(fhz==”true”){ //用户存在了
7. document.all.info.innerHTML=”用户名已存在”;
8. document.all.info.style.color=”red”;
9. }else{
10. document.all.info.innerHTML=”用户名可用”;
11. document.all.info.style.color=”green”;
12. }
13. }

14. }
    4.两个应用——验证用户存在否，动态加下拉列表

    1）注册 zhuce.jsp

15. <%@ page language=”java” import=”java.util.*” pageEncoding=”gbk”%>
19. My JSP ‘zhuce.jsp’ starting page