1.创建XMLHttpRequest对象
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
2.XMLHttpRequest对象的方法和属性
1.方法
abort() //停止当前请求
getAllResponseHeaders() //把http请求的所有响应首部作为键/值对返回
getResponseHeader("header") //返回指定首部的串值
open("method","url")//建立对服务器的调用,method参数可以是get、post或put,URL参数可以是相对URL,也可以是绝对URL,这个方法还包含3个可选参数
send(content) //向服务器发请求
setRequestHeader("header","value") //把指定首部设置为所提供的值,在设置任何首部之前必须先调用open()
下面详细介绍这些方法:
void open(String method,String url,boolean asynch,String username,String password)
这个方法会建立对服务器的调用,这是初始化一个请求的纯脚本方法,它有两个必要的参数和三个可选的参数,第一个指定调用的方法(GET、POST或PUT),第二个指定所调用资源的URL,第三个传递一个Boolean值,指示这个调用是异步还是同步的,默认值为true,表示请求是异步的,如果这个参数设置为false,处理就会等待,直到服务器返回响应为止,最后两个参数允许指定一个特定的用户名和密码。
void send(content)
这个方法向服务器发出请求,如果请求声明是异步的,这个方法就会立即返回,否则它会等待直到接收到响应为止。传入这个方法的内容会作为请求整体的一部分发送。
void setRequestHeader(String header,String value)
这个方法为HTTP请求中一个给定的首部设置值,它有两个参数,第一个表示要设置的首部,第二个表示要在首部中放置的值,注意,这个方法必须在调用open()之后才能调用。
void abort()
这个方法用来停止请求。
String getAllResponseHeaders()
这个方法返回一个串,其中包含HTTP请求的所有响应首部,首部包括Content-Length、Date和URL。
String getResponseHeader(String header)
这个方法用于返回指定的HTTP响应首部。
2.属性
<span style="font-size:10px;">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等等
3.交互示例
1.一个客户端事件触发一个Ajax事件,比如有下面代码:
<input type="text" id="email" name="email" οnblur="validateEmail">
2.创建XMLHttpRequest对象的一个实例,使用open方法建立调用,并设置所希望的HTTP方法(GET或POST)以及URL,再使用send方法发送请求,代码如下:
var xmlHttp;
function validateEmail () {
var email = document.getElementById('email');
var url = "validate?email=" + escape(email.value);
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET",url);
xmlHttp.onreadystatuschange = callback;
xmlHttp.send(null);
}
3.向服务器做出请求,可以调用任何服务端技术;
4.服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统;
5.请求返回浏览器,下面的代码使浏览器不会在本地缓存结果:
response.setHeader("Cache-Control","no-cache")
response.setHeader("Pragma","no-cache") //Pragma和Cache-Control是一样的,设置Pragma是为了保证向后兼容
6.在这个示例中,XMLHttpRequest对象在请求返回时会调用callback()函数:
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//do something
}
}
}
如上所示,这个函数会检查XMLHttpRequest对象的readState属性,然后查看服务器返回的状态码,如果都正常,callback()函数就会在客户端做一些事。
4.GET与POST
当使用POST方式提交请求时,需要设置XMLHttpRequest对象的Content-Type首部,如下所示:
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
5.一个简单的请求示例
simpleRequest.html文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" οnclick="startRequest();"/>
</form>
</body>
</html>
simpleResponse.xml文件:
Hello from the server!