Ajax 是什么? 如何创建一个 Ajax？

在上世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。用户体验极差！由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

Ajax简介

Ajax 并不算是一种新的技术，全称是 asynchronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持 ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对 ajax 的原生支持使用 ajax 原生方式发送请求主要通过 XMLHttpRequest( 标准浏览器 ) 、 ActiveXObject(IE 浏览器)对象实现异步通信效果

ajax是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)

JavaScript/DOM (信息显示/交互)

CSS (给数据定义样式)

XML (作为转换数据的格式)

Ajax优缺点

【1】优点

页面局部刷新，用户体验好。
异步通信，更加快的响应能力。
减少冗余请求，减轻了服务器负担；按需获取数据，节约带宽资源。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

【2】缺点

ajax干掉了back按钮和加入收藏书签功能，即对浏览器后退机制的破坏。
存在一定的安全问题，AJAX 暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
无法用URL直接访问

创建Ajax的步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据

ajax过程：

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象

创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

设置响应 HTTP 请求状态变化的函数

发送 HTTP 请求

获取异步调用返回的数据

使用 JavaScript和 DOM 实现局部刷新

【1】创建XMLHttpRequest

XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

var xhr;
if (window.XMLHttpRequest){
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xhr = new XMLHttpRequest();
} else {
  // IE6, IE5 浏览器执行代码
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

【2】向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

| 方法 | 描述 |
| open(method,url,async) |

规定请求的类型、URL 以及是否异步处理请求。

1、method：请求的类型；GET 或 POST

2、url：文件在服务器上的位置

3、async：true（异步）或 false（同步）

|
| send(string) |

将请求发送到服务器。

1、string：仅用于 POST 请求

// 一个简单的get请求
xhr.open("GET","ajax_info.txt",true);
xhr.send();

// 一个简单的post请求
xhr.open("POST","/try/ajax/demo_post.php",true);
xhr.send();

【3】处理服务器响应

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

|
| status | 200: "OK"
404: 未找到页面 |

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText); // responseText获取字符串形式的响应数据  responseXML获取XML形式的响应数据
    } 
}

Ajax实例

【1】原生Ajax请求

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="myDiv">
    <h2>使用 AJAX 修改该文本内容</h2>
  </div>
  <button type="button" onclick="loadXMLDoc()">修改内容</button>

  <script>
    function loadXMLDoc() {
      var xhr;
      if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr = new XMLHttpRequest();
      }
      else {
        // IE6, IE5 浏览器执行代码
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          document.getElementById("myDiv").innerHTML = xhr.responseText;
        }
      }
      xhr.open("GET", "/try/ajax/ajax_info.txt", true);
      xhr.send();
    }
  </script>

</body>

</html>

【2】jQuery封装Ajax请求

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
</head>

<body>

  <div id="myDiv">
    <h2>使用 jQuery AJAX 修改文本内容</h2>
  </div>
  <button>修改内容</button>

  <script>
    $(document).ready(function () {
      $("button").click(function () {
        htmlobj = $.ajax({
          type: "GET",
          url: "/jquery/test1.txt",
          data: {},
          dataType: "json",
          async: false,
          success: function (data) {
            $("#myDiv").html(data);
          }
        });
      });
    });
  </script>

</body>

</html>

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料