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 请求,浏览器拿到数据后再进一步渲染出来的。
利用 Chrome 开发者工具的筛选功能筛选出所有的 Ajax 请求。在请求的上方有一层筛选栏,直接点击 XHR,此时在下方显示的所有请求便都是 Ajax 请求了。
接下来,不断滑动页面,可以看到页面底部有一条条新的微博被刷出,而开发者工具下方也一个个地出现 Ajax 请求,这样我们就可以捕获到所有的 Ajax 请求了。
随意点开一个条目,都可以清楚地看到其 Request URL、Request Headers、Response Headers、Response Body 等内容,此时想要模拟请求和提取就非常简单了。