WEB开发-JavaScript的Ajax入门学习

我们学习了HTML，CSS，JavaScript后，现在再来学习一下Ajax。AJAX不是一种新的编程语言，是一种使用现有标准的方法， 是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。

AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX XHR

1.创建对象

创建 XMLHttpRequest 对象，XMLHttpRequest 用于在后台与服务器交换数据。

语法：

// 浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）支持XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 浏览器（IE5 和 IE6）使用 ActiveX 对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

注：在创建XMLHttpRequest对象的时候要判断 window.XMLHttpRequest 是否存在，需使用不同方式创建满足所有浏览器。

2.注册回调函数

函数 onreadystatechange，当服务器响应请求并返回数据后，客户端处理这些数据就需要使用 onreadystatechange 函数，每次 XMLHttpRequest 对象的readyState发生改变都会触发 onreadystatechange 函数。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;
// 定义回调函数
function callback(){
    // 数据处理
}

3.发送请求

将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open(method,url,async) 

method：请求类型 GET 或 POST；

url：请求服务器地址/路径

async：异步或同步（true / false）

send(string)

string：用于POST请求

var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost/test.html",true);
xhr.send();

添加 HTTP 头，可以在 send() 方法中规定发送的数据格式。

setRequestHeader(header,value)

header：规定头的名称

value：规定头的值

var xhr = new XMLHttpRequest();
xhr.open("POST","http://localhost/test.action",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=test&id=1");

4.服务器响应

获取服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

document.body.innerHTML = xhr.responseText;

readyState状态

保存 XMLHttpRequest 的状态，从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status状态值

200：成功

404：未找到页面

AJAX完整示例

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;
xhr.open("POST","http://localhost/test.action",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=test&id=1");
// 定义回调函数
function callback(){
    // 数据处理
    if (xhr.readyState==4 && xhr.status==200)
    {
        document.body.innerHTML=xhr.responseText;
    }
}