Ajax分析方法

Ajax 分析方法

　　以前面的微博为例，拖动刷新的内容由 Ajax 加载，而且页面的 URL 没有变化，那么应该到哪里去查看这些 Ajax 请求呢？

查看请求

　　需要借助浏览器的开发者工具，下面以 Chrome 浏览器为例。

　　用 Chrome 浏览器打开微博的链接 https://m.weibo.cn/，随后在页面中点击鼠标右键，从弹出的快捷菜单中选择 “检查” 选项，便会弹出开发者工具。

　　这里展示的就是页面加载过程中，浏览器与服务器之间发送请求和接收响应的所有记录。

　　事实上，Ajax有特殊的请求类型，叫做xhr。如下图中，有一个以getIndex开头的请求，其Type就为xhr，意味着这就是一个Ajax请求，单机该请求可以查看其详情信息。

　　观察这个 Ajax 请求的 Request Headers、URL 和 Response Headers 等信息。其中 Request Headers 中有一个信息为 X-Requested-With:XMLHttpRequest，这就标记了此请求是Ajax请求。

　　随后点击一下 Preview，即可看到响应的内容，它是 JSON 格式的。这里 Chrome 自动做了解析，点击箭头即可展开和收起相应内容。

　　观察可以发现，这里的返回结果是我的个人信息，如昵称、简介、头像等，这也是用来渲染个人主页所使用的数据。JavaScript 接收到这些数据之后，再执行相应的渲染方法，整个页面就渲染出来了。

　　也可以切换到 Response 选项卡，从中观察到真实的返回数据。

　　微博页面的真实数据并不是最原始的页面返回的，而是后来执行 JavaScript 后再次向后台发送了 Ajax 请求，浏览器拿到数据后再进一步渲染出来的。

2. 过滤请求

　　利用 Chrome 开发者工具的筛选功能筛选出所有的 Ajax 请求。在请求的上方有一层筛选栏，直接点击 XHR，此时在下方显示的所有请求便都是 Ajax 请求了。

　　接下来，不断滑动页面，可以看到页面底部有一条条新的微博被刷出，而开发者工具下方也一个个地出现 Ajax 请求，这样我们就可以捕获到所有的 Ajax 请求了。

　　随意点开一个条目，都可以清楚地看到其 Request URL、Request Headers、Response Headers、Response Body 等内容，此时想要模拟请求和提取就非常简单了。