一. 概述
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
使用了Ajax技术的网页通过在后台跟服务器进行少量的数据交换,在不重新加载整个页面的情况下网页就可以实现异步局部更新
同步与异步:
同步:页面请求实时传给服务器,导致必填数据没有填的时候,要回到页面上重新从头填写,耗时长、客户体验差。
异步:在页面必填项写上必填选项,不用通过传给服务器判断必填内容是否已经填写完整,耗时短、用户体验强。
如何实现ajax:
- HTML 和CSS 实现页面 表达信息
- 运用XMLHttpRequest 对象和 web服务器进行数据的异步交换
- 运用 js操作dom 实现动态局部刷新
二. XMLHttpRequest对象
1. 创建XMLHttpRequest对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
为了应对所有的现代浏览器,包括 IE5 和 IE6,需检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 向服务器发送请求
在使用 XHR 对象时,先必须调用 open()方法,它接受三个参数:要发送的请求类型(get 、post)、请求的 URL 和表示是否异步。
xhr.open('get', 'demo.php', false); //对于 demo.php 的 get 请求,false 同步
open()方法并不会真正发送请求,而只是启动一个请求以备发送。通过 send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。当使用get方法请求时,则可以不填参数。执行 send()方法之后,请求就会发送到服务器上。
xhr.send(); //发送请求
当请求发送到服务器端,收到响应后,响应的数据会自动填充xhr对象的属性。一共有四个属性:
属性名 | 说明 |
---|---|
responseText | 作为响应主体被返回的文本 |
responseXML | 如果响应主体内容类型是”text/xml”或”application/xml” ,则返回包含响应数据的 XML DOM 文档 |
status | 响应的 HTTP 状态 |
statusText | HTTP 状态的说明 |
接受响应之后,第一步检查 status 属性,以确定响应已经成功返回。一般而已 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码,还有一些别的:
HTTP 状态码 | 状态字符串 | 说明 |
---|---|---|
200 | OK | 服务器成功返回了页面 |
400 | Bad Request | 语法错误导致服务器不识别 |
401 | Unauthorized | 请求需要用户认证 |
404 | Not found | 指定的 URL 在服务器上找不到 |
500 | Internal Server Error | 服务器遇到意外错误,无法完成请求 |
503 | ServiceUnavailable | 由于服务器过载或维护导致无法完成请求 |
如果需要像 HTML 表单那样 POST 数据,需使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-formurlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
2. 获取服务器响应
readyState属性的变化代表服务器响应的变化:
0:请求未初始化,open还没有调用
1:服务器连接已建立,open已经调用了
2:请求已接收,也就是接收到头信息了
3:请求处理中,也就是接收到了响应主体
4:请求已完成,且响应已就绪,也就是响应完成了
通过对readyState属性进行监听(即对服务器的响应进行监听),我们可以获取服务器响应的内容或者在页面上做一些呈现:
* responseText : 获得字符串形式的响应数据
* responseXML :获得XML形式的响应数据
* status和statusText : 以数字和文本形式返回HTTP状态码
* getAllResponseHeader() :获取所有的响应报头
* getResponseHeader() :查询响应中的某个字段的值
var xtr = new XMLHttpRequest() //建立XHR对象
xtr.open("GET","get.php",true); //用get方法异步打开get.php
xtr.send(); //发送请求头信息
xtr.onreadystatechange=function(){
if(request.readState===4&&request.status===200){
document.getElementById("myDiv").innerHTML=xtr.responseText;
}
}