关于Ajax:
- 更新网页而不重新加载网页
- 在页面加载后从服务器请求数据
- 在加载页面后从服务器接收数据
- 将数据发送到服务器 - 在后台
Ajax如何工作:
- 网页中发生事件(页面加载,点击按钮)
- XMLHttpRequest对象由JavaScript创建
- XMLHttpRequest对象向Web服务器发送请求
- 服务器处理请求
- 服务器将响应发送回网页
- 响应由JavaScript读取
正确的操作(如页面更新)由JavaScript操作
Ajax示例:
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp;
//检查浏览器是否支持XMLHttpRequest对象
if (window.XMLHttpRequest) {
//如果是,创建一个XMLHttpRequest对象
xhttp = new XMLHttpRequest();
} else {
//如果没有(IE5,IE6),创建ActiveXobject对象
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
XMLHttpRequest对象属性:
readyState属性:标识XMLHttpRequest对象的状态,有五种值:
0 : 未初始化状态(对象创建,但未初始化)
1 : 准备发送状态(此时,已经调用了XMLHttpRequest对象的open()方法,并且该对象已经准备好将一个请求发送到服务器)
2 : 已发送状态(此时,已通过调用send()方法把一个请求发送到服务器,但还没有收到一个响应)
3 :正在接收状态(此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到)
4:完成响应接收(此时,已完成了HttpResponse响应的接收)responseText属性:
该属性包含客户端接收到的HTTP响应的文本内容。当readyState属性为0、1、2时,该属性包含空字符串; 当readyState值为3时,响应中包含客户端还未完成的响应信息; 当readyState值为4时,该属性才包含完整的响应信息。responseXML属性:
只有当readyState属性值为4,并且响应头部的Content-Type的MIME类型被指定为XML (text/xml或者application/xml)时,该属性才有值并且被解析为一个XML文档,否则该属性值为null。如果回传的XML文档结构不良或者未完成响应回传,该属性也为空。status属性:
描述HTTP状态码。注意,仅当readyState值为3(正在接收)或4(已加载)时,才能访问此属性。否则,试图读取时,将引发异常。statusText属性:
描述HTTP状态码文本。跟status的注意事项一样,必须readyState为3或4。
XMLHttpRequest对象的方法:
onreadystatechange 事件:
当readyState属性值发生改变,就会触发此事件。一般都通过此事件来触发回传处理函数。open() 方法:
XMLHttpRequest对象是通过调用open(method, url, async, username, password)方法来进行初始化的。调用该方法会得到一个可以用来进行发送(send()方法)的对象。此时,readyState状态会被设为1(准备发送状态)。方法参数解释如下:
① method参数是必须提供的,用于指定用来发送请求的HTTP方法(GET, POST, PUT, DELETE或HEAD)。按照HTTP规范,该参数要大写。
②url用来指定请求的URL,该地址会被自动解析为绝对地址。
③async参数用来指定请求是否是异步的,默认值为true。发同步请求,设为false
④如果需要服务器验证访问用户的情况,可以设置username和passwordsend() 方法:
必须在调用了open方法,即readyState的值为1,对象处理可发送状态时,才可以调用send()方法,将请求发送出去。
当open()方法的参数async为true时,send()方法调用后立即返回,否则将等待请求返回。
调用了send()方法到接收到响应之前,readyState的值将被设为2;一旦接收到响应,被设为3;直到响应接收完成,readyState的值才会被设为4。
send()可使用一个可选参数,用于传递POST数据到服务器。参数可以不传或直接用null。
一般情况下,在调用send()方法之前,应该设置Content-Type头部信息。如果send(data)方法中的data参数的类型为DOMString,那么数据将被编码为UTF-8。如果数据是Document类型,那么将使用由data.xmlEncoding指定的编码串行化该数据。abort() 方法:
该方法可以暂停一个HttpRequest的请求发送或者HttpResponse的接收,并将XMLHttpRequest对象设置为初始化状态。setRequestHeader() 方法:
用来设置请求的头部信息。需要在调用了open()方法之后调用此方法,否则会报异常。setRequestHeader(header, value)包含两个参数:前一个是键名称,后面是键值。- getResponseHeader() 方法:
用于检索响应的头部值,仅当readyState属性值是3或4时,才可以调用此方法;否则,返回一个空字符串。
此外,还可以通过getAllResponseHeaders()方法获取所有的HttpResponse的头部信息。