AJAX是什么

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 是一种在无需重新加载整个网页的情况下，AJAX通过在后台与服务器进行少量数据交换，使网页实现异步更新，从而能够更新部分网页的技术。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX 工作原理

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

XMLHttpRequest 对象

AJAX的基础是XMLHttpRequest 对象 (异步的与服务器交换数据)，以下简写为XHR。该对象用于后台和服务区交换数据，意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

注意： （IE5 和 IE6 使用 ActiveXObject）

XHR属性

XMLHttpRequest 对象的三个重要的属性:

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

当 readyState 等于 4 且status为 200 时，表示响应已就绪

XHR请求

XMLHttpRequest对象的opend()和send()方法可以向服务器发送请求

xhr.open("GET","ajax_info.txt",true);
xhr.send();

xhr对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。

注意：千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
调用send()方法才真正发送请求到服务器。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 无大小限制）

发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

XHR响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

AJAX实例

  // 1.创建对象
  var xhr;
  if (window.XMLHttpRequest)
  {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  // 2.处理响应结果
  xhr.onreadystatechange = function() { // 状态发生变化时，函数被回调
    if (xhr.readyState === 4) { // 请求完成,且响应已就绪
        // 判断响应结果:
        if (xhr.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(xhr.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(xhr.status);
        }
    } else {
        // HTTP请求还在继续...
    }
  
  // 3.初始化
  xhr.open("GET","/try/ajax/ajax_info.txt",true);
  // 4.发送
  xhr.send();

1.通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。

注意： 不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。

2.当创建了xhr对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。

AJAX基本介绍