轩枫阁

首页 / 授人以渔 / Javascript / AJAX 技术分享

AJAX 技术分享

AJAX 在哪里?Where

无所不在的 AJAX。

  • 百度搜索框,智能补全
  • 微博搜索框,智能补全
  • 淘宝搜索框,智能补全
  • 百度相册,图片浏览
  • QQ 二维码登录

什么是 AJAX?What

网页中处理异步请求的技术。

  • AJAX 即 “Asynchronous Javascript + XML”,是指一种创建交互式网页应用的网页开发技术。
  • AJAX 是一种用于创建快速动态网页的技术。

扩展

  • 什么是异步请求?不堵塞用户界面的请求。

AJAX 工作流程

687474703a2f2f646976696f2e71696e6975646e2e636f6d2f467573326a796d376a5249575f674b64357144706f45745272793236

为什么要用 AJAX?Why

异步才够快!

优势

  • 优质的用户体验,加载快速、智能补全、即时通知等等。
  • 节省带宽,内容更新不用加载整个网页,可以按需加载内容。
  • 无兼容性问题,常见浏览器均支持。

怎么用 AJAX?How

需要了解的概念

  • 跨域(cross-domain)
    • image.baidu.comwww.baidu.com 跨域吗?
    • baidu.comwww.baidu.com 跨域吗?
  • JSON(JavaScript Object Notation)JS 对象符号

  • JSONP(JSON with Padding)

  • JS 模板(JavaScript templates)
    • 优势:不用拼接字符串,可维护性更强

开发步骤

前端工作

  • 制订协议,上行,下行。
  • 调试接口,请求和应答是否符合预期。
  • 处理数据,数据加工。
  • 更新界面,更新元素内容。

客户端代码

 

jQuery / Zepto AJAX

  • 类库做了什么事?异常处理、浏览器兼容、JSONP 兼容

     

实战

  • 原生方法、类库方法
  • 格式化数据
  • JS 模板
  • 分页控件
  • 搜索功能

追求极致

  • 优化用户体验。
    • 良好的初始状态
    • 保存用户习惯
  • 编写易于维护的代码。
  • 利用缓存避免重复的请求。
  • 做好单元测试。

常见相关面试题

  • 请尽可能详尽的解释 AJAX 的工作原理。
    • AJAX 流程
    • 原生 AJAX 实现细节
  • 请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX。
  • 你使用过 JavaScript 模板系统吗?
    • 模板系统的好处?
  • GET 和 POST 的区别?

参考资料

扩展阅读

转载自:renrousousuo

本文标题:AJAX 技术分享 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
130/432
132/432

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]