最实用的ajax封装

什么是ajax?

        Ajax不是一门新技术，是旧技术的新应用。Ajax即： 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简单的来说，就是：在不重载网页的情况下与服务器进行数据交互，并将返回的数据进行有效的处理。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面，这对于用户体验十分不好。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等，目前基本上所有网站都在使用ajax技术。

ajax可以做什么？为什么要使用ajax？

 ```
    上面对ajax的定义、介绍其实已经回答了这个问题。ajax的功能就是实现：页面和web服务器之间数据的异步传输。关于异步和同步可以看上一篇文章，其中对异步同步进行了简单介绍。同步：不采用ajax的页面，当用户在页面发起请求时，将会刷新整个页面，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，无法进行其他操作。客户端和服务器传递了许多多余的数据，效率低，等待时间长，用户体验差。异步：采用ajax技术，可以实现页面的局部更新，而不是整个页面的更新，当用户发起请求后，用户还可以进行页面上的其他操作。客户端和服务端间只传递需要的数据，效率高，用户体验性较好

4：ajax具体步骤：

①  创建异步对象（XMLHttpRequest）。

②  设置请求行（请求行内参数1：请求方式get/post，参数二：设置请求url。注：get方式数据拼接在url中）。

③  设置请求头（get方式可以省略，post方式无数据时也可省略）。

④  回调函数，处理从服务器返回的数据。

⑤  请求体，发送请求，post方式数据放于send()中，get方式或post无数据时为:null。

发起 ajax

//1.创建xmlhttprequest 对象
var xhr = null;
if(window.ActiveXObject) {
     xhr = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest) {
     xhr = new XMLHttpRequest();
}

//2. 打开链接   请求方式get
//   url（接口）
var url = 'https://api.readhub.me/topic?lastCursor=40462&pageSize=20'
xhr.open('GET', url);

//3.发送
xhr.send(null);

//4.指定回调函数，请求成功（回调）调用这个函数
xhr.onload= function() {
          if(xhr.status == 200) {
              //请求成功
              //console.log(xhr.responseText)
              var obj = JSON.parse(xhr.responseText)
              console.log(obj)
          }

}