Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【第一季•第六期】Ajax & JSONP in Action

2,489 views

Published on

Published in: Technology, Business
  • Be the first to comment

【第一季•第六期】Ajax & JSONP in Action

  1. 1. LOGO HTTP 脚本化
  2. 2. HTTP 请求产生的方式  访问超链接  提交表单  <link> <img> <iframe> <script>  Ajax -XMLHttpRequest
  3. 3. Ajax Asynchronized Javascript And XML Jesse James Garrett 于 2005 年 2 月提出
  4. 4. Ajax 核心技术  XHTML 和 CSS 的标准表示;  使用 DOM ( Document Object Model )进行 动态显示及交互;  使用 XML 和 XSLT 进行数据交换及相关操作;  使用 XMLHttpRequest 进行异步数据查询、检索 ;  使用 JavaScript 将所有的东西绑定在一起。
  5. 5. Ajax 思想
  6. 6. Ajax 思想
  7. 7. Ajax 思想
  8. 8. Ajax 应用
  9. 9. Ajax 应用
  10. 10. 在 YUI 下使用 Ajax YAHOO.util.Connect.asyncRequest asyncRequest(method,uri,callback,postData) Method : 请求使用的方法 Uri : 请求的地址 Callback : 回调方法 postData : 使用 POST 的时候传输的内容
  11. 11. 在 YUI 下使用 Ajax var callback = { success: function(o){}, failure: function(o){}, argument: [] }; o.status : HTTP 响应状态码 o.statusText : HTTP 响应状态码对应的信息 o.getResponseHeader : 获取头信息 o.getAllResponseHeaders : 获取所有头信息 o.responseText : 以文本返回请求的内容 o.responseXML : 以 XML 的形式返回请求的内容 o.argument : 参数
  12. 12. HTTP 响应的状态码  1xx 临时响应 100- 继续 101- 切换协议  2xx 成功响应 200 成功  3xx 已经重定向 301 永久移动 302 临时移动 304 未修改  4xx 请求错误 400 请求语法错误 401 未授权 403 已禁止 404 未找 到  5xx 服务器错误 500 服务器内部错误
  13. 13. 返回内容为 JSON 格式 eval(string) var json = eval(‘{title:”taobao”,url:””}’); eval(‘var json = {title:”taobao”,url:””}’);
  14. 14. jQuery 中的 Ajax  $(“#id”).load()  $.ajax()  $.getJSON()  $.get()  $.post()
  15. 15. jQuery 中的 Ajax $(”#id”).load(url, [data], [callback]); url : 请求的链接 data : GET 参数 Callback : 回调方法
  16. 16. jQuery 中的 Ajax $.get(url, [data], [callback], [type]); url : 请求的链接 data : GET 参数 callback : 回调方法 type : 返回的格式 $.post(url, [data], [callback], [type]);
  17. 17. jQuery 中的 Ajax $.getJSON(url, [data], [callback]); url : 请求的链接 data : GET 参数 callback : 回调方法
  18. 18. 实现 Ajax  创建一个 XMLHttpRequest 对象  指定 HTTP 请求并向一个 Web 服务器提交  同步或异步地获取服务器的响应
  19. 19. 实现 Ajax XMLHttpRequest var request = new XMLHttpRequest(); var request = new ActiveXObeject(“Msxml2.XMLHTTP”); var request = new ActiveXObeject(“Microsoft.XMLHTTP”); 非 IE 浏览器, IE7+ IE5 IE6
  20. 20. 实现 Ajax request.open(“GET”, url, false); request.setRequestHeader(“Accept-language”, ”en”); request.send(null);
  21. 21. 实现 Ajax request.onreadystatechange request.readyState request.status request.responseText request.responseXML
  22. 22. 实现 Ajax 0 - (未初始化)还没有调用  send() 方法   1 - (载入)已调用  send() 方法,正在发送请求   2 - (载入完成)  send() 方法执行完成,已经接收到全 部响应内容   3 - (交互)正在解析响应内容    4 - (完成)响应内容解析完成,可以在客户端调用了  request.readyState
  23. 23. 实现 Ajax request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200){ alert(request.responseText); } }
  24. 24. Ajax 的适用的场景  表单的交互 – 注册页面  深层次的树状导航结构  用户与用户间所需要的快速响应 – 微博新信息的提示  没必要刷新当前页面完成的场景 – 微博回复、评论  需要对数据进行排序,过滤  普通的文本输入提示和自动完成的场景
  25. 25. Ajax 的不适用的场景  一些简单的表单  搜索  基本的导航  替换大量的文本  对呈现的操纵 – Ajax 应作为数据同步和传输的技术 成本 > 效果 是 效果还 > 成本 ?
  26. 26. Ajax 的缺点  后退按钮失效  无法收藏页面  页面变化导致迷失位置  调试困难  搜索引擎分析失效
  27. 27. Ajax 常见问题  跨域问题  解决方案 – iFrame – 页面代理方式 – JSONP
  28. 28. Ajax 常见问题  乱码问题 – 采用 GBK 这种编码会遇到 – 由于 Ajax 是基于 UTF-8 的编码,必须在服务端接收的 时候做一次转换 。
  29. 29. Ajax 常见问题  缓存问题 – 加时间戳或随机数的方式解决 – 请求头设置 – POST 代替 GET (不推荐) var url = “www.taobao.com/get.htm?t=“+newDate().getTime() var url = “www.taobao.com/get.htm?t=“+Math.ramdon(); request.setRequestHeader("Cache-Control","no-cache"); request.setRequestHeader("If-Modified-Since","0");
  30. 30. JSONP
  31. 31. YUI 中的 JSONP YAHOO.util.Get.script(url, opts);
  32. 32. jQuery 中的 JSONP $.getScript(url, [callback]); url : 请求的链接 callback : 回调方法

×