J avaScript的功能这么强~没想到啊！！AJAX 基本概念Asynchronous Javascript and XML一、典型流程1、 客户端触发异步操作 区别于B->S->B的同步提交模式，有等待时间，异步式在客户操作同时又AJAX引擎与服务器交互，更加人性化和快捷2、 创建新的XMLHttpRequest对象 AJAX技术的核心与服务器交互的类3、 与Server进行连接 通过send()方法实现4、 服务器端进行连接处理 必须的5、 返回包含处理结果的XML文档 其实未必是XML文档，而是字符串TEXT6、 XMLHttpRequest对象接收处理结果并分析7、 更新页面二、原来的流程 browser --àserver --àbrowser 同步的编程模型, 有等待的时间三 AJAX的流程四、XMLHttpRequest 对象 1、属性readystate0描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化 1描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器 2 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 3 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。4描述一种"已加载"状态；此时，响应已经被完全接收responseText 从AJAX引擎中拿出server返回的信息status AJAX与sever交互成功没有？状态码200表示成功//-----AJAX BEGIN----- var xmlHttp; //定义变量用来装XMLHttpRequest function createXMLHttpRequest() { if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //NS FIREFOX 等的初始化XMLHttpRequest实例 } else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //MS的流浪器的初始化XMLHttpRequest实例 } //浏览器大战牺牲的产物，只有这样才能具有垄断地位，不过现在也在趋于标准化W3C出标准也是迟早的问题 function validate() { //提供DOM模式的入口方法，在事件中调用JAVASCRIPT函数即可进入AJAX引擎 var vUserId = trim(document.getElementById("userId").value);if(vUserId != "") { createXMLHttpRequest(); //上面的那个方法~初始化XMLHttpRequest,状态码为0 var url = "user_validate.jsp?userId=" + vUserId + "×tamp=" + new Date().getTime(); //这里的URL里加入了时间戳，这样就不会提交到同一个页面，避免了IE缓存所产生的一些奇怪的问题，也不用清缓存了 xmlHttp.open("GET", url, true); //准备提交给服务器进行事务处理，状态码变成2，具体的食物处理可以再user_validate.jsp中经行，不过我觉得提交给SERVERLET更好 在JSP直接out.println("用户已经存在，代码=[" + userId + "]");就可以被捕获我觉得挺奇怪的其实 } xmlHttp.onreadystatechange=callback; //当状态码代发生变化的时候调用后面的函数 xmlHttp.send(null); //提交给服务器进行处理 } else { document.getElementById("resText").innerHTML = ""; } }function callback() { //状态码改变时调用 if(xmlHttp.readyState == 4) { //确定了变化的状态，定位是服务器处理完毕 if(xmlHttp.status == 200) { //确定了处理的结果，是服务器成功处理，不是404，500错误 var resTextSpan = document.getElementById("resText"); //DOM if(trim(xmlHttp.responseText) != "") { //获得服务器的响应结果，response以字符串的形式返回（TEXT) resTextSpan.innerHTML = "" + xmlHttp.responseText + ""; //还是DOM } else { resTextSpan.innerHTML = ""; } } else { alert("请求失败，错误码=" + xmlHttp.status); //返回错误信息 } } } //-----AJAX END-----AJAX引擎的一般步骤a) 创建Ajax引擎对象XMLHttpReqest creatXMLHttpRequest();b) 调用open方法与Ajax引擎建立连接，并告诉Ajax引擎我们的请求方式为get，请求url及采用异步方式c) 告诉Ajax引擎处理完成后，如何把结果反馈给我们，我们通常指定一个方法句柄，那么Ajax就会调用我们指定的方法，从而就可以得到Ajax引擎返回的数据（这种方式一般称为回调机制） onreadystatrchange()=function(...)d) 最后调用send方法把我们步骤b和c设置的参数发送给Ajax引擎（也就是真正的交给Ajax引擎去处理）实际过程 validate() { createXMLHttpRequest(); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange=function(...); xmlHttp.send(null); } 其中响应处理在FUNCTION 事务处理在URL我写的虽然有借鉴
