scribble

吕小荣

Blog Friends RSS About

调试 Ajax 的思路

24 November, 2013

这周要用Ajax实现级联菜单的效果,在实现的过程中遇到一个个的问题。由于对前端工具不太熟悉,所以在填坑时,基本靠猜。

光明开始传授我「调试Ajax大法」,回家后我又学习了 Railscast 的一个课程 jQuery & Ajax。大体知道了调试 Ajax的套路。

  1. 使用 Console 检查 javascript 的语法错误

    JS这门奇葩的语言的奇葩语法把我绕到云里雾里,漏掉花括号{}已经成为家常便饭。在调试Ajax之前,先通过 Console 检查我的拼写是否有误。

    network

  2. 使用 Network 检查网络请求

    通过Chrome Network, 可以监测浏览器发起的所有请求。我们可以找到属于Ajax的那一个请求,然后抽丝剥茧,排插问题。

    network

  3. 检查 Headers

    Headers中包含的参数很多,我看的比较多的就是 Status Code, Query String Parameter.

    • Query String Parameter:浏览器发起某个请求时,包含的参数。
    • Status Code:服务器状态码,不同的状态码有不同的含义,大家都喜欢 200
  4. 检查 Response

    Response是服务器返回给浏览器的内容,可以是一段html代码,也可以是一段js。

    network

通过以上四步,大部分问题就可以搞定。

总结

定位问题的思路是最重要的,也是最难通过自学获取的,这时候小伙伴的一句指点胜过十年书。