Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

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

on

  • 2,347 views

 

Statistics

Views

Total Views
2,347
Views on SlideShare
2,289
Embed Views
58

Actions

Likes
2
Downloads
18
Comments
0

1 Embed 58

http://taobaojstraining.info 58

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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