什么是 Ajax

Ajax,全称为 Asynchronous JavaScript and XML,即异步的 JavaScript 和 XML。它不是一门编程语言,而是利用 JavaScript 在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页内容的技术。

对于传统的网页,如果想更新其内容,就必须刷新整个页面,但有了 Ajax,可以在页面不被全部刷新的情况下更新。这个过程实际上是页面在后台与服务器进行了数据交互,获取数据之后,再利用 JavaScript 改变网贞,这样网内容就会更新了。

可以到 W3School 上体验几个实例感受一下: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

实例引入

浏览网页的时候,我们会发现很多网页都有 “下滑查看更多” 的选项。拿微博来说,以我的主页( https://m.weibo.cn/u/2830678474 )为例,一直下滑,可以发现下滑几条微博之后,再向下就没有了,转而会出现一个加载的动画,不一会儿下方就继续出现了新的微博内容,这个过程其实就是 Ajax 加载的过程,如图 5-1 所示。

图 5-1 页面加载过程

能够看出,页面其实并没有整个刷新,这意味着页面的链接没有变化,但是网页中却多了新内容,也就是后面刷出来的新微博。这就是通过 Ajax 获取新数据并呈现的过程。

基本原理

初步了解了 Ajax 之后,我们接下来详细了解它的基本原理。从发送 Ajax 请求到网页更新的这个过程可以简单分为以下 3 步一一发送请求、解析内容、渲染网页。

下面分别详细介绍一下这几个过程。

发送请求

我们知道 JavaScript 可以实现页面的各种交互功能,Ajax 也不例外,它也是由 JavaScript 实现的,实现代码如下:

var xmlhttp;
if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {//code for IE6、IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("POST","/ajax/",true);
xmlhttp.send();

这是 JavaScript 对 Ajax 最底层的实现,实际上就是先新建一个 XMLHttpRequest 对象 xmlhttp,然后调用 onreadystatechange 属性设置监听,最后调用 opensend 方法向某个链接(也就是服务器)发送请求。前面用 Python 实现请求发送之后,可以得到响应结果,但这里的请求发送由 JavaScript 完成。由于设置了监听,所以当服务器返回响应时,onreadystatechange 对应的方法便会被触发,然后在这个方法里面解析响应内容即可。

解析内容

服务器返回响应之后,onreadystatechange 属性对应的方法就被触发了,此时利用 xmlhttpresponseText 属性便可得到响应内容。这类似于 Python 中利用 requests 向服务器发起请求,然后得到响应的过程。返回内容可能是 HTML,可能是 JSON,接下来只需要在方法中用 JavaScript 进一步处理即可。如果是 JSON 的话,可以进行解析和转化。

渲染网页

JavaScript 有改变网页内容的能力,因此解析完响应内容之后,就可以调用 JavaScript 来基于解析完的内容对网页进行下一步处理了。例如,通过 document.getElementById().innerHTML 操作,可以更改某个元素内的源代码,这样网页显示的内容就改变了。这种操作也被称作 DOM 操作,即对网页文档进行操作,如更改、册删除等。

上面 “发送请求” 部分,代码里的 document.getElementById("myDiv").innerHTML=xmlhttp.responseText 便是将 ID 为 myDiv 的节点内部的 HTML 代码更改为了服务器返回的内容,这样 myDiv 元素内部便会呈现服务器返回的新数据,对应的网页内容看上去就更新了。

我们观察到,网页更新的 3 个步骤其实都是由 JavaScript 完成的,它完成了整个请求、解析和染的过程。

再回想微博的下拉刷新,其实就是 JavaScript 向服务器发送了一个 Ajax 请求,然后获取新的微博数据,对其做解析,并疽染在网页中。

因此我们知道,真实的网页数据其实是一次次向服务器发送 Ajax 请求得到的,要想抓取这些数据,需要知道 Ajax 请求到底是怎么发送的、发往哪里、发了哪些参数。我们知道这些以后,不就可以用 Python 模拟发送操作,并获取返回数据了吗?

总结

本节我们简单了解了 Ajax 请求的基本原理和带来的页面加载效果,下一节我们来介绍下怎么分析 Ajax 请求。