ajax

ajax是什么?

   ajax,全名asynchronous JavaScript + XML的缩写,这一技术实现了无需卸载页面就能够向服务器请求数据。ajax技术的核心是XMLHttpRequest对象,简称XHR对象,XHR为向服务器获取数据和解析服务器的响应信息提供了接口。通过XHR获取数据之后,再将获取的数据通过DOM插入到页面之中。

XMLHttpRequest对象

   创建XMLHttpRequest对象的方法是,通过new XMLHttpRequest()构造函数.

1
var xhr = new XMLHttpRequest();

XMLHttpRequest对象的用法

   使用ajax请求数据有两个步骤,首先open一个准备好的请求,然后发送请求。第一步中调用XHR对象的open方法,这个方法接受三个参数。

  1. 请求的方法,get、post等;
  2. 请求的url;
  3. 是否异步执行的Boolean value,true为异步执行,false为同步执行,立马执行。
    1
    xhr.open('get','example.php',false);

   第二步,发送请求,调用XHR对象的send方法,这个方法接受一个参数,要向服务器发送的数据,若不需要发送数据,将参数设置为null。

1
xhr.send(null);

   从服务器获取的数据会自动填充到XHR对象的属性中,下面是关于属性的说明。

  • status: HTTP请求的状态,200,404等;
  • statusText: HTTP状态的说明;
  • responseText: 作为响应主体的文本;
  • responseXML: 如果响应内容的类型是xml,那么这个属性就保存着XML DOM文档。
  • readystate:表示当前请求或响应的状态
       0:还未调用open() method;
       1:已经调用open(),还未send();
       2:已经send(),还未收到response;
       3:已经接受部分响应数据;
       4:已经接受全部响应数据。
       XHR对象的readystate属性发生改变时,都会触发readystatechange事件,由于请求是异步的,所以通过这个事件,在请求数据完成时完成DOM树的更改。