ajax学习小结

一、Ajax Asynchronous JavaScript And XML = 异步的 JavaScript 及 XML。 目的：使得整个页面不刷新也能出现效果。没有后退按钮。 二、XMLHttprequest(由浏览器内核创建) 方法： open("get/post", "URL"); send(); 属性： readyState 客户端请求就绪状态码 status 服务器响应状态码 responseText 响应的文本内容 responseXML 响应的XML文档对象(一般不用) 事件处理器： onreadystatechange 示例代码： <script type="text/javascript"> // 方式1 function ckName() { // 获取用户名对象 var name = document.getElementsByTagName("input")[0]; // 创建XMLHttpRequest对象 var xhr = getXMLHttpRequest(); // 处理响应结果，创建回调函数，根据响应状态动态更新页面 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 说明客户端请求一切正常 if (xhr.status == 200) { // 说明服务器响应一切正常 // alert(xhr.responseText); // 得到响应结果 var msg = document.getElementById("msg"); if (xhr.responseText == "true") { // msg.innerText = "用户名已存在"; msg.innerHTML = "<font color='red'>该用户名已存在</font>"; } else { msg.innerHTML = "<font color='green'>该用户名可以使用</font>"; } } } } // 建立一个连接 xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name.value); // 发送请求 xhr.send(null); } // 方式2 window.onload = function() { var nameElement = document.getElementsByName("userName")[0]; nameElement.onblur = function() { var name = this.value; // this等价于nameElement // 创建XMLHttpRequest对象 var xhr = getXMLHttpRequest(); // 处理响应结果，创建回调函数，根据响应状态动态更新页面 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 说明客户端请求一切正常 if (xhr.status == 200) { // 说明服务器响应一切正常 // alert(xhr.responseText); // 得到响应结果 var msg = document.getElementById("msg"); if (xhr.responseText == "true") { // msg.innerText = "该用户名已存在"; msg.innerHTML = "<font color='red'>该用户名已存在</font>"; } else { msg.innerHTML = "<font color='green'>该用户名可以使用</font>"; } } } } // 建立一个连接 xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime()); // 发送请求 xhr.send(null); } } </script>  三、使用Ajax 1. 确定使用什么事件调用什么方法 2. 步骤： 获取XMLHttpRequest对象 处理响应结果 建立一个连接 发送请求