AJAX

AJAX ：Asynchronous JavaScript And XML

Ajax是基于服务器的页面异步处理技术,实现网页局部刷新的功能,当前页面发送一个请求给服务器，当前页面不需要等待服务器响应才能操作网页。发送完请求之后，当前页面可以继续浏览，操作。 AJAX在应用程序跟服务器之间引入了一个中间层ajax引擎,用JavaScript编写,在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面，以及代表用户跟服务器交互。

应用模型

传统的WEB应用模型

---

AJAX工作机制

AJAX编码步骤 1、创建XmlHttpRequest对象() 2、注册状态监控回调函数 3、建立与服务器的异步连接 4、发出异步请求

window.onload=init; function init() { var nameinputbox =document.getElementsByTagName("input")[0]; //绑定函数 nameinputbox.onblur=checkname; } function checkname( ) { var xhr = new XMLHttpRequest( ); var nameinputbox =document.getElementsByTagName("input")[0]; //回调函数 xhr.onreadystatechange = function() { //请求正常 if(xhr.readyState==4) {//服务器响应正常 if(xhr.status=200) {//拿到响应结果 var resultspan =document.getElementById("usernameInfo"); /* 服务器返回数据格式 HTML片段 JSON格式的数据 XML格式的数据*/ if(xhr.responseText== "true") { usernameInfo.innerHTML=" 用户名ok"; }else { usernameInfo.innerHTML="fail"; } } } }; //创建连接 xhr.open("get", "/Day23_AJAXDemo/servlet/CheckUsernameServlet?username="+nameinputbox.value,true); //发送请求 xhr.send(null); }

XmlHttpRequest 属性 readyState：类型short；只读 responseText：类型String；只读 responseXML：类型Document；只读 status：类型short；只读 方法： open() send() setRequestHeader() 事件处理器 onreadystatechange open(method,url, asynch):method表示HTTP调用方法，一般使用”GET”，”POST”,url表示调用的服务器的地址asynch表示是否采用异步方式，true表示异步，一般这个参数不写,GET方式提交,数据在URL上,POST方式提交 xmlHttp.setRequestHeader(“CONTENT-TYPE”,”application/x-www-form-urlencoded”); xmlHttp.send(“name=xxx&pwd=xxx”);