Contenu connexe Similaire à 【第一季•第六期】Ajax & JSONP in Action Similaire à 【第一季•第六期】Ajax & JSONP in Action (20) Plus de tbosstraining (7) 【第一季•第六期】Ajax & JSONP in Action4. Ajax 核心技术
XHTML 和 CSS 的标准表示;
使用 DOM ( Document Object Model )进行
动态显示及交互;
使用 XML 和 XSLT 进行数据交换及相关操作;
使用 XMLHttpRequest 进行异步数据查询、检索
;
使用 JavaScript 将所有的东西绑定在一起。
10. 在 YUI 下使用 Ajax
YAHOO.util.Connect.asyncRequest
asyncRequest(method,uri,callback,postData)
Method : 请求使用的方法
Uri : 请求的地址
Callback : 回调方法
postData : 使用 POST 的时候传输的内容
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. HTTP 响应的状态码
1xx 临时响应
100- 继续 101- 切换协议
2xx 成功响应
200 成功
3xx 已经重定向
301 永久移动 302 临时移动 304 未修改
4xx 请求错误
400 请求语法错误 401 未授权 403 已禁止 404 未找
到
5xx 服务器错误
500 服务器内部错误
14. jQuery 中的 Ajax
$(“#id”).load()
$.ajax()
$.getJSON()
$.get()
$.post()
16. jQuery 中的 Ajax
$.get(url, [data], [callback], [type]);
url : 请求的链接
data : GET 参数
callback : 回调方法
type : 返回的格式
$.post(url, [data], [callback], [type]);
18. 实现 Ajax
创建一个 XMLHttpRequest 对象
指定 HTTP 请求并向一个 Web 服务器提交
同步或异步地获取服务器的响应
19. 实现 Ajax
XMLHttpRequest
var request = new XMLHttpRequest();
var request = new ActiveXObeject(“Msxml2.XMLHTTP”);
var request = new ActiveXObeject(“Microsoft.XMLHTTP”);
非 IE 浏览器, IE7+
IE5 IE6
22. 实现 Ajax
0 - (未初始化)还没有调用 send() 方法
1 - (载入)已调用 send() 方法,正在发送请求
2 - (载入完成) send() 方法执行完成,已经接收到全
部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
request.readyState
24. Ajax 的适用的场景
表单的交互
– 注册页面
深层次的树状导航结构
用户与用户间所需要的快速响应
– 微博新信息的提示
没必要刷新当前页面完成的场景
– 微博回复、评论
需要对数据进行排序,过滤
普通的文本输入提示和自动完成的场景
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");