1、简介:
Ajax:Asynchronous(异步的) JavaScript And XML。Ajax技术使我们可以通过JavaScript发送请求到服务器,并获得返回结果,这就让我们可以在不要的时候只更新页面的一小部分,而不用整个页面都刷新,这称为“无刷新”技术。其实Ajax并不是一种全新的技术,而是整合了几种现有的技术:JavaScript、XML和CSS。其核心是JavaScript,我们可以通过JavaScript的XmlHttpRequest对象完成发送请求到服务器并返回响应结果的任务,然后使用JavaScript更新局部页面。异步指的是:JavaScript发送请求后,并不是一直等着服务器响应,而是发送请求后继续做别的事,请求响应的处理是异步完成的。XML一般用于请求数据和响应数据的封装。CSS用于美化页面样式。
2、以下列出标准XmlHttpRequest操作:
abort(): 停止当前请求
getAllResponseHeaders(): 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header"): 返回指定首部的串值
open("method","url"): 建立对服务器的调用
send(content): 向服务器发送请求
setRequestHeader("header","value"): 把指定首部设置为所提供的值。
标准XmlHttpRequest操作说明:
重点讲解open()方法,此方法的具体参数和说明如下:
1、void open(String method,String url,booleab asynch,String username,String password):这是初始化一个请求的纯脚本方法。其中前两个参数是必须的,后三个是可选参数。要提供调用特定方法(GET,POST或PUT)和提供电泳资源的URL,另外还可以传递一个Boolean值,指示这个调用是异步的还是同步的。默认为true,表示请求本质上时异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。最后两个参数不说自明,允许你指定一个特定的用户名和密码。
2、void send(content):这个方法具体向服务器发送请求,如果请求声明为异步的,这个方法就会立刻返回,否则它就会等待直到接收到响应为止。可选参数是DOM对象的实例、输入流或者串。传入这个方法的内容会作为请求体的一部分发送。
3、void setRequestHeader(String header,String value): 把指定首部设置为所提供的值。这个方法必须在调用open()之后才能调用。
3、以下列出标准XmlHttpRequest属性:
onreadystatechange: 每个状态改变时都会触发这个处理器,通常会调用一个JavaScript函数
readyState: 请求的状态。有5个可取值:0(未初始化),1(正在加载),2(已加载),3(交互中),4(完 成)
responseText: 服务器的响应,表示一个串
responseXML: 服务器的响应,表示为 XML。这个对象可以解析为一个DOM对象
status: 服务器的HTTP状态码(200对应ok,404对应Not Found(未找到),等等)
statusText: HTTP状态码的相应文本(ok或not found等等)
4、Ajax的交互过程:
1、一个客户端触发一个Ajax事件。如:
<input type="text" name="username" id="username" οnchange="vaildation();" />
2、创建XmlHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是GET或POST)。请求实际上通过一个send()方法调用触发。如:
var xmlHttp;
//创建XmlHttpRequest对象
//注意: 创建XmlHttpRequest对象时,要根据不同的浏览器创建不同的XmlHttpRequest对象
function createXMLHttpRequest() {
if(window.ActiveXObject) { //IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) { //非IE浏览器
xmlHttp = new XMLHttpRequest();
}
}
function vaildation() {
createXMLHttpRequest();
var username = document.getElementById("username");
xmlHttp.onreadystatechange = callback;
var url = "servlet/ValidationServlet?username=" + escape(username.value);
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
}
3、向服务器做出请求。可能是servlet、CGI脚本等等
4、服务器做你想做的事情。如访问数据库,甚至访问另一个系统
5、请求返回到浏览器。
6、XmlHttpRequest对象配置为处理返回时要调用callback()函数。如:
function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//do something interesting her
}
}
}