SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
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 进行数据交换及相关操作;
 使用 XMLHttpRequest 进行异步数据查询、检索
;
 使用 JavaScript 将所有的东西绑定在一起。
Ajax 思想
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 : 回调方法

Mais conteúdo relacionado

Mais procurados

2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0Anthony Chen
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)ziggear
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全Borg Han
 
Twitter 與 ELK 基本使用
Twitter 與 ELK 基本使用Twitter 與 ELK 基本使用
Twitter 與 ELK 基本使用Mark Dai
 

Mais procurados (6)

2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
 
Commt gzip
Commt gzipCommt gzip
Commt gzip
 
Node way
Node wayNode way
Node way
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全
 
Twitter 與 ELK 基本使用
Twitter 與 ELK 基本使用Twitter 與 ELK 基本使用
Twitter 與 ELK 基本使用
 

Destaque

一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18twMVC
 
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13twMVC
 
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場twMVC
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang
 
Wlw blog撰寫技巧-keeptouchme-adam
Wlw blog撰寫技巧-keeptouchme-adamWlw blog撰寫技巧-keeptouchme-adam
Wlw blog撰寫技巧-keeptouchme-adamHuang Blake
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsJoseph Chiang
 
Angularjs in mobile app
Angularjs in mobile appAngularjs in mobile app
Angularjs in mobile appYvonne Yu
 
專案分層架構 twMVC#18
專案分層架構 twMVC#18專案分層架構 twMVC#18
專案分層架構 twMVC#18twMVC
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in LusterJason Chung
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17twMVC
 
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場twMVC
 
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13twMVC
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会Joseph Chiang
 
Girls wewon'tmeetatservices 1.pps
Girls wewon'tmeetatservices 1.ppsGirls wewon'tmeetatservices 1.pps
Girls wewon'tmeetatservices 1.ppsstevewenski
 

Destaque (18)

一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
 
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
 
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 
Javascript
JavascriptJavascript
Javascript
 
Wlw blog撰寫技巧-keeptouchme-adam
Wlw blog撰寫技巧-keeptouchme-adamWlw blog撰寫技巧-keeptouchme-adam
Wlw blog撰寫技巧-keeptouchme-adam
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
 
AJAX Basic
AJAX BasicAJAX Basic
AJAX Basic
 
Angularjs in mobile app
Angularjs in mobile appAngularjs in mobile app
Angularjs in mobile app
 
專案分層架構 twMVC#18
專案分層架構 twMVC#18專案分層架構 twMVC#18
專案分層架構 twMVC#18
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17
 
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
 
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
 
Let's Redux!
Let's Redux!Let's Redux!
Let's Redux!
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
Girls wewon'tmeetatservices 1.pps
Girls wewon'tmeetatservices 1.ppsGirls wewon'tmeetatservices 1.pps
Girls wewon'tmeetatservices 1.pps
 

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

2015.07.22 新人報告(3)
2015.07.22 新人報告(3)2015.07.22 新人報告(3)
2015.07.22 新人報告(3)Chih-Wei Chuang
 
Asp.net mvc 培训
Asp.net mvc 培训Asp.net mvc 培训
Asp.net mvc 培训lotusprince
 
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践Li JianYe
 
没有Xhr,ajax精彩依旧
没有Xhr,ajax精彩依旧没有Xhr,ajax精彩依旧
没有Xhr,ajax精彩依旧vinqon
 
Php&Xml Http Request
Php&Xml Http RequestPhp&Xml Http Request
Php&Xml Http RequestPeter Tsai
 
Ajax Lucence
Ajax LucenceAjax Lucence
Ajax LucenceRoger Xia
 
jsp基础速成精华讲解
jsp基础速成精华讲解jsp基础速成精华讲解
jsp基础速成精华讲解wensheng wei
 
Ajax Transportation Methods
Ajax Transportation MethodsAjax Transportation Methods
Ajax Transportation Methodsyiditushe
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战fengmk2
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战fengmk2
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型keelii
 
12. 網路通訊方案
12. 網路通訊方案12. 網路通訊方案
12. 網路通訊方案Justin Lin
 
Html5 history api
Html5 history api Html5 history api
Html5 history api 景智 張
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backboneJerry Xie
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习cssrain
 
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應Justin Lin
 
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会Zhi Zhong
 

Semelhante a 【第一季•第六期】Ajax & JSONP in Action (20)

2015.07.22 新人報告(3)
2015.07.22 新人報告(3)2015.07.22 新人報告(3)
2015.07.22 新人報告(3)
 
Asp.net mvc 培训
Asp.net mvc 培训Asp.net mvc 培训
Asp.net mvc 培训
 
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
 
没有Xhr,ajax精彩依旧
没有Xhr,ajax精彩依旧没有Xhr,ajax精彩依旧
没有Xhr,ajax精彩依旧
 
Php&Xml Http Request
Php&Xml Http RequestPhp&Xml Http Request
Php&Xml Http Request
 
Ajax Lucence
Ajax LucenceAjax Lucence
Ajax Lucence
 
jsp基础速成精华讲解
jsp基础速成精华讲解jsp基础速成精华讲解
jsp基础速成精华讲解
 
Ajax Transportation Methods
Ajax Transportation MethodsAjax Transportation Methods
Ajax Transportation Methods
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型
 
四天学会Ajax
四天学会Ajax四天学会Ajax
四天学会Ajax
 
12. 網路通訊方案
12. 網路通訊方案12. 網路通訊方案
12. 網路通訊方案
 
Html5 history api
Html5 history api Html5 history api
Html5 history api
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
 
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
 
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
 
J Query Learn
J Query LearnJ Query Learn
J Query Learn
 
Structs2簡介
Structs2簡介 Structs2簡介
Structs2簡介
 

Mais de tbosstraining

【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程tbosstraining
 
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimizationtbosstraining
 
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽tbosstraining
 
【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript eventtbosstraining
 
【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】开发的前端之痛 by 银环【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】开发的前端之痛 by 银环tbosstraining
 
【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰tbosstraining
 
【第一期】开发的前端之痛 by 银环
【第一期】开发的前端之痛 by 银环【第一期】开发的前端之痛 by 银环
【第一期】开发的前端之痛 by 银环tbosstraining
 

Mais de tbosstraining (7)

【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
 
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization
 
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
 
【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event
 
【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】开发的前端之痛 by 银环【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】开发的前端之痛 by 银环
 
【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰
 
【第一期】开发的前端之痛 by 银环
【第一期】开发的前端之痛 by 银环【第一期】开发的前端之痛 by 银环
【第一期】开发的前端之痛 by 银环
 

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