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

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 进行数据交换及相关操作；
 使用 XMLHttpRequest 进行异步数据查询、检索
；
 使用 JavaScript 将所有的东西绑定在一起。

在 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]);
data : GET 参数
callback : 回调方法
type : 返回的格式
$.post(url, [data], [callback], [type]);

jQuery 中的 Ajax
$.getJSON(url, [data], [callback]);
data : GET 参数

实现 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("Cache-Control","no-cache");
request.setRequestHeader("If-Modified-Since","0");

YUI 中的 JSONP
YAHOO.util.Get.script(url, opts);

jQuery 中的 JSONP
$.getScript(url, [callback]);

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

More Related Content

What's hot

Viewers also liked

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

More from tbosstraining

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