初识Ajax

一. 概述

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;
}
}