ajax的了解

虽然每天都在使用ajax，但是我发现我好像对于ajax一点都不了解，他到底是什么？我们每天都在用的jquery的封装，他就是一个黑盒子，方便但是我们却不知道他的本身。我们每天也人云亦云，然而其实我们连ajax到底是什么都不知道。今天我们就来揭开他的神秘面纱。

记得我刚学习web时，觉得很神奇，一个ajax请求就能返回一串json数据。原来我到今天才发现我错了。ajax英文叫做 asynchronous JavaScript and XML，用中文翻译就是异步的javascript和xml技术，那么我们发现我们现在用的貌似和xml没有半毛钱关系。确实，以前xml是前后台之间的数据交互形式，但是现在都是以json来传输数据，所以ajax中的xml技术不是必须的，现在基本被json取代，所以其实我们现在用的是ajaj,这就是ajax的由来。

我们在使用时都知道ajax最厉害的是异步操作，当你发送一个请求时，当没有返回时，浏览器会继续执行其他的任务，而不会挂起等待，这就是异步的好处，当然也带来一些问题。比如我之前写一个东西（忘记是什么了），要做几个ajax请求，他们之间是有先后顺序的，当时我想javascript是按顺序执行的，于是我就把它们按照顺序写下来，发现每次请求的顺序都不一样。。。现在我终于找到了答案。

原生的ajax是依赖于XMLHttpRequest 对象，在比较老的IE5 、6中是依赖于 ActiveXObject对象，所以要兼容性就这么写：

1
2
3
4
5
6
7
8
9
var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }

下面便是发送请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  xhr.open('get', 'send-ajax-data.php');

// 检测ajax的请求状态
xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
        if (xhr.status === OK) {
            alert(xhr.responseText); // 'This is the returned text.'
        } else {
            alert('Error: ' + xhr.status); // An error occurred during the request.
        }
    }
};

// 发送请求
xhr.send(null);

在ajax中onreadystatechange会被调用五次，因为xhr.readyState会有五个值，

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

每一次值变化的时候，onreadystatechange就会被触发，我们也就是在其中穿插回调方法。

请求的回应可以通过xhr.responseText和xhr.responseXML获取，responseText是获取string类型的响应，responseXML是获取xml类型的响应。

到此我们对ajax也有了一个简单的认识，有种豁然开朗的感觉。在这里不得不说有时候有不明白的地方需要自己去查找答案，一切便豁然开朗。这里我推荐使用维基百科，维基百科的解释更加权威，详细。大家也可以去我的个人博客查看（ http://coding.lushunming.top/ 或者是 http://github.lushunming.top/ ），个人博客的排版字体更加优美。