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 : 回调方法