Javascript ajax 请求

1.ajax简介

全称：Asynchronous Javascript And Xml 普通页面刷新的时候不但从服务器获取了变化的部分，连同不变化的固定的部分也刷新了，这不变的一部分占用的网络带宽和服务器负载是没有必要的。 这种缺点可以通过异步加载来避免，1995年，随着Java第一版的发布，Java applets首次实现了异步加载，浏览器通过运行嵌入的Java applets可以在不刷新页面的情况下与服务器交换数据，随后，微软在1996年时在ie将iframe加入到HTML中，支持局部刷新网页。1998年前后，Outlook Web Access小组写成了允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0[2]的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。 2005年出，Google在其著名交互应用使用Ajax技术使得这项技术开始流行起来。

维基百科-Ajax

2.ajax的优点和缺点

-优点：不更新整个页面的前提下维护数据，避免在网络上发送无用的数据。 -缺点：可能破坏浏览器后退和保存书签的功能。浏览器之间的兼容问题

3.在应用程序中使用Ajax
3.1 创建XMLHttpRequest对象

  var req;
  if (window.ActiveXObject) {
    req = new ActiveXObject('Microsoft.XMLHTTP');
  } else if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  }

3.2 打开与服务器的链接，指定请求的url和请求方式

//基本语法：req.open(type, url, async, user, password);
//type:请求类型，常用的有GET和POST  
//url:请求的url地址
//async:true or false,标识请求是否异步。
//  默认是异步，异步的情况下状态改变的时候会调用onreadystatechange属性指定的回调函数,
//  函数是可选的。
//user，password与权限有关  
req.open('GET', '/test/get');
req.onreadystatechange = () => {
  if (req.readyState === 4 && req.status = 200) {
    console.log(req.responseText);
  } else {
    console.log('request error!');
  }
}
req.send();

其中，在请求发出后XMLHttpRequest对象的readyState状态会经历0-4几个状态变化

• 0 - 请求未初始化
• 1 - 服务器连接已建立
• 2 - 请求已接收
• 3 - 请求处理中
• 4 - 请求完成，响应就绪

XMLHttpRequest的status表示服务器返回的响应码，正常返回是200，常见的如404标识请求的资源没有找到。

3.3 处理响应 如3.2中的处理，当XMLHttpResponde的readyState为4，且响应码是200时，我们可以提取XMLHttpResponse对象的responseText或者是
responseXML,取决于响应的内容，responseText表示响应是普通的文本，responseXML表示返回的是XML格式的数据。