LOGO
HTTP 脚本化
HTTP 请求产生的方式
 访问超链接
 提交表单
 <link> <img> <iframe> <script>
 Ajax
-XMLHttpRequest
Ajax
Asynchronized
Javascript
And
XML
Jesse James Garrett 于
2005 年 2 月提出
Ajax 核心技术
 XHTML 和 CSS 的标准表示;
 使用 DOM ( Document Object Model )进行
动态显示及交互;
 使用 XML 和 XSLT 进行数据交换及相关操作;
 使用 XMLHttpRequ...
Ajax 思想
Ajax 思想
Ajax 思想
Ajax 应用
Ajax 应用
在 YUI 下使用 Ajax
YAHOO.util.Connect.asyncRequest
asyncRequest(method,uri,callback,postData)
Method : 请求使用的方法
Uri : 请求的地址
Cal...
在 YUI 下使用 Ajax
var callback = {
success: function(o){},
failure: function(o){},
argument: []
};
o.status : HTTP 响应状态码
o.st...
HTTP 响应的状态码
 1xx 临时响应
100- 继续 101- 切换协议
 2xx 成功响应
200 成功
 3xx 已经重定向
301 永久移动 302 临时移动 304 未修改
 4xx 请求错误
400 请求语法错误 401...
返回内容为 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, ...
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...
实现 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 - (交互)正在解析...
实现 Ajax
request.onreadystatechange = function(){
if (request.readyState == 4
&& request.status == 200){
alert(request.resp...
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...
JSONP
YUI 中的 JSONP
YAHOO.util.Get.script(url, opts);
jQuery 中的 JSONP
$.getScript(url, [callback]);
url : 请求的链接
callback : 回调方法
Upcoming SlideShare
Loading in …5
×

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

2,340 views
2,227 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,340
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

【第一季•第六期】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 : 回调方法

×