1.首先创建Ajax请求对象,即XMLHttpRequest对象,大多数浏览器都内建了该对象,当然大多数一般和IE6关系不大,所以针对这一点,再获得该对象时,需要做一些处理:
1 var xmlhttp; 2 if (window.XMLHttpRequest) 3 {// code for IE7+, Firefox, Chrome, Opera, Safari 4 xmlhttp=new XMLHttpRequest(); 5 } 6 else 7 {// code for IE6, IE5 8 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 9 }
2.发送请求需要用到的方法。
方法 | 描述 |
---|---|
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。
|
send(string) |
将请求发送到服务器。
|
open->method:可选参数为“GET”和“POST”
GET:请求简单,快速。但不能发送较大的数据。
携带数据时,与平时的其它的get请求格式一致。
POST:1.不希望使用缓存数据时建议使用
2.发送较大的数据时建议使用
3.安全性较get方法好
4.post数据可为空,若有数据,则在将数据以字符串形式传入send()方法,格式为"名1=值1&名2=值2”"。
open->async:可选参数为"true"和“false”
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","text.txt",false); xmlhttp.send(); alert("ok");
以上示例代码中,当open->async设置为false时,弹窗消息“ok”一般都会在响应文本显示之前,当其设置为true后,弹窗消息一定会在响应文本显示之后,
也就是说,设置为true后会阻塞javascript的脚本继续往下执行,需要等到请求响应完成,才继续往下执行,而设置为false,javascript会在等待服务器响应数据
的同时,继续执行代码。
3.需要添加响应头,需要用到以下方法:
方法 | 描述 |
---|---|
setRequestHeader(header,value) |
向请求添加 HTTP 头。
|
4.服务器响应属性:
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
5.当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status |
200: "OK" 404: 未找到页面 304:浏览器缓存数据,数据并未修改 |