【第一季•第六期】ajax & jsonp in action
DESCRIPTION
TRANSCRIPT
LOGO
HTTP脚本化
HTTP请求产生的方式 访问超链接 提交表单 <link> <img> <iframe> <script> Ajax
-XMLHttpRequest
Ajax
AsynchronizedJavascriptAndXML
Jesse James Garrett 于2005年 2月提出
Ajax核心技术 XHTML 和 CSS 的标准表示； 使用 DOM （ Document Object Model ）进行
动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。
Ajax思想
Http(s) 传输
用户接口
浏览器
Web服务器
服务器端系统
数据库
Http请求数据
Html+CSS数据
传统Web应用模式
Http(s) 传输
用户接口
浏览器
Web/XML服务器
服务器端系统
数据库
AJAX应用模式
AJAX引擎
Http请求数据
XML/文本数据
Html+CSS数据
Javascript调用
Ajax思想
Ajax思想
Ajax应用
Ajax应用
在 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("Cache-Control","no-cache");request.setRequestHeader("If-Modified-Since","0");
JSONP
YUI中的 JSONP
YAHOO.util.Get.script(url, opts);
jQuery中的 JSONP
$.getScript(url, [callback]);
url : 请求的链接callback : 回调方法