轻松理解JavaScript之AJAX

摘要

AJAX技术是网页构建的必备技能之一，本文希望能帮助大家轻松的学习这项技术

一、什么是ajax?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

二、如何使用ajax?

第一步：创建xmlhttprequest对象

创建xmlhttprequest对象，XMLHttpRequest对象用来和服务器交换数据。

var xmlhttp =new XMLHttpRequest();

第二步：注册回调函数

onreadystatechange函数，当服务器响应请求并返回数据后，我们想要客户端处理这些数据就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。对于readyState会在下一章节详细介绍。

 xmlHttp.onreadystatechange= callback;  function callback(){}

第三步：配置和发送请求

使用xmlhttprequest对象的open（）和send（）方法配置和发送资源请求给服务器。

xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）

xmlhttp.send();使用get方法发送请求到服务器。

xmlhttp.send(string);使用post方法发送请求到服务器。

post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。

post 发送请求什么时候能够使用呢？

(1)更新一个文件或者数据库的时候。

(2)发送大量数据到服务器，因为post请求没有字符限制。

(3)发送用户输入的加密数据。

xhttp.open("POST", "ajax_test.aspx", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhttp.send("fname=Henry&lname=Ford");

第四步：处理响应数据

使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

使用responseText属性得到服务器响应的字符串数据，使用responseXML属性得到服务器响应的XML数据。

在回调函数中使用readyState==4和status==200判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。

function callback(){  if(xmlHttp.readyState == 4){   //判断交互是否成功   if(xmlHttp.status == 200){    //获取服务器返回的数据    //获取纯文本数据    var responseText =xmlHttp.responseText;    document.getElementById("info").innerHTML = responseText;   }  }}

三、AJAX运行过程中5种状态（readyState）

在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，这五种状态是由AJAX引擎切换设置的，分别是。

0 ： 定义了XHR，但还未初始化

1 ：调用send()方法，正在发送请求，请求发送完毕后，开始等待接收响应