Enviar pesquisa
Carregar
【第一季•第六期】Ajax & JSONP in Action
•
2 gostaram
•
716 visualizações
T
tbosstraining
Seguir
Tecnologia
Negócios
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 32
Baixar agora
Baixar para ler offline
Recomendados
Vic weekly learning_20160325
Vic weekly learning_20160325
LearningTech
EventProxy introduction - JacksonTian
EventProxy introduction - JacksonTian
Jackson Tian
Parse, cloud code 介紹
Parse, cloud code 介紹
wantingj
Template mb-kao
Template mb-kao
xwcoder
Static server介绍
Static server介绍
sun jamie
Ken20150320
Ken20150320
LearningTech
探索海量文章,Elasticsearch 建置和應用
探索海量文章,Elasticsearch 建置和應用
Yi-Wei Lai
Mvc
Mvc
tbmallf2e
Mais conteúdo relacionado
Mais procurados
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
Commt gzip
Commt gzip
Keliang Cricy
Node way
Node way
Ethan Zhang
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
前端MVVM框架安全
前端MVVM框架安全
Borg Han
Twitter 與 ELK 基本使用
Twitter 與 ELK 基本使用
Mark Dai
Mais procurados
(6)
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Commt gzip
Commt gzip
Node way
Node way
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
前端MVVM框架安全
前端MVVM框架安全
Twitter 與 ELK 基本使用
Twitter 與 ELK 基本使用
Destaque
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
twMVC
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
twMVC
雲端環境的快取策略-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)
Joseph Chiang
Javascript
Javascript
Ryan Chung
Wlw blog撰寫技巧-keeptouchme-adam
Wlw blog撰寫技巧-keeptouchme-adam
Huang Blake
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
Joseph Chiang
AJAX Basic
AJAX Basic
Ryan Chung
Angularjs in mobile app
Angularjs in mobile app
Yvonne Yu
專案分層架構 twMVC#18
專案分層架構 twMVC#18
twMVC
JavaScript Promise
JavaScript Promise
Joseph Chiang
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Angular js twmvc#17
Angular js twmvc#17
twMVC
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
twMVC
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
twMVC
Let's Redux!
Let's Redux!
Joseph Chiang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Girls wewon'tmeetatservices 1.pps
Girls wewon'tmeetatservices 1.pps
stevewenski
Destaque
(18)
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
雲端環境的快取策略-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)
Javascript
Javascript
Wlw blog撰寫技巧-keeptouchme-adam
Wlw blog撰寫技巧-keeptouchme-adam
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
AJAX Basic
AJAX Basic
Angularjs in mobile app
Angularjs in mobile app
專案分層架構 twMVC#18
專案分層架構 twMVC#18
JavaScript Promise
JavaScript Promise
AngularJS training in Luster
AngularJS training in Luster
Angular js twmvc#17
Angular js twmvc#17
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
Let's Redux!
Let's Redux!
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Girls wewon'tmeetatservices 1.pps
Girls wewon'tmeetatservices 1.pps
Semelhante a 【第一季•第六期】Ajax & JSONP in Action
2015.07.22 新人報告(3)
2015.07.22 新人報告(3)
Chih-Wei Chuang
Asp.net mvc 培训
Asp.net mvc 培训
lotusprince
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Li JianYe
没有Xhr,ajax精彩依旧
没有Xhr,ajax精彩依旧
vinqon
Php&Xml Http Request
Php&Xml Http Request
Peter Tsai
Ajax Lucence
Ajax Lucence
Roger Xia
jsp基础速成精华讲解
jsp基础速成精华讲解
wensheng wei
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
Node Web开发实战
Node Web开发实战
fengmk2
Node Web开发实战
Node Web开发实战
fengmk2
异步编程与浏览器执行模型
异步编程与浏览器执行模型
keelii
四天学会Ajax
四天学会Ajax
Kelvin Zhong
12. 網路通訊方案
12. 網路通訊方案
Justin Lin
Html5 history api
Html5 history api
景智 張
前端MVC之backbone
前端MVC之backbone
Jerry Xie
JQuery 学习
JQuery 学习
cssrain
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Justin Lin
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
Zhi Zhong
J Query Learn
J Query Learn
guestfb42fc
Structs2簡介
Structs2簡介
catonchuang
Semelhante a 【第一季•第六期】Ajax & JSONP in Action
(20)
2015.07.22 新人報告(3)
2015.07.22 新人報告(3)
Asp.net mvc 培训
Asp.net mvc 培训
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
没有Xhr,ajax精彩依旧
没有Xhr,ajax精彩依旧
Php&Xml Http Request
Php&Xml Http Request
Ajax Lucence
Ajax Lucence
jsp基础速成精华讲解
jsp基础速成精华讲解
Ajax Transportation Methods
Ajax Transportation Methods
Node Web开发实战
Node Web开发实战
Node Web开发实战
Node Web开发实战
异步编程与浏览器执行模型
异步编程与浏览器执行模型
四天学会Ajax
四天学会Ajax
12. 網路通訊方案
12. 網路通訊方案
Html5 history api
Html5 history api
前端MVC之backbone
前端MVC之backbone
JQuery 学习
JQuery 学习
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
J Query Learn
J Query Learn
Structs2簡介
Structs2簡介
Mais de tbosstraining
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
tbosstraining
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization
tbosstraining
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
tbosstraining
【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event
tbosstraining
【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】开发的前端之痛 by 银环
tbosstraining
【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰
tbosstraining
【第一期】开发的前端之痛 by 银环
【第一期】开发的前端之痛 by 银环
tbosstraining
Mais de tbosstraining
(7)
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event
【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】开发的前端之痛 by 银环
【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰
【第一期】开发的前端之痛 by 银环
【第一期】开发的前端之痛 by 银环
【第一季•第六期】Ajax & JSONP in Action
1.
LOGO HTTP 脚本化
2.
HTTP 请求产生的方式 访问超链接
提交表单 <link> <img> <iframe> <script> Ajax -XMLHttpRequest
3.
Ajax Asynchronized Javascript And XML Jesse James Garrett
于 2005 年 2 月提出
4.
Ajax 核心技术 XHTML
和 CSS 的标准表示; 使用 DOM ( Document Object Model )进行 动态显示及交互; 使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索 ; 使用 JavaScript 将所有的东西绑定在一起。
5.
Ajax 思想
6.
Ajax 思想
7.
Ajax 思想
8.
Ajax 应用
9.
Ajax 应用
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 服务器内部错误
13.
返回内容为 JSON 格式 eval(string) var
json = eval(‘{title:”taobao”,url:””}’); eval(‘var json = {title:”taobao”,url:””}’);
14.
jQuery 中的 Ajax
$(“#id”).load() $.ajax() $.getJSON() $.get() $.post()
15.
jQuery 中的 Ajax $(”#id”).load(url,
[data], [callback]); url : 请求的链接 data : GET 参数 Callback : 回调方法
16.
jQuery 中的 Ajax $.get(url,
[data], [callback], [type]); url : 请求的链接 data : GET 参数 callback : 回调方法 type : 返回的格式 $.post(url, [data], [callback], [type]);
17.
jQuery 中的 Ajax $.getJSON(url,
[data], [callback]); url : 请求的链接 data : GET 参数 callback : 回调方法
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
20.
实现 Ajax request.open(“GET”, url,
false); request.setRequestHeader(“Accept-language”, ”en”); request.send(null);
21.
实现 Ajax request.onreadystatechange request.readyState request.status request.responseText request.responseXML
22.
实现 Ajax 0 -
(未初始化)还没有调用 send() 方法 1 - (载入)已调用 send() 方法,正在发送请求 2 - (载入完成) send() 方法执行完成,已经接收到全 部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了 request.readyState
23.
实现 Ajax request.onreadystatechange =
function(){ if (request.readyState == 4 && request.status == 200){ alert(request.responseText); } }
24.
Ajax 的适用的场景 表单的交互 –
注册页面 深层次的树状导航结构 用户与用户间所需要的快速响应 – 微博新信息的提示 没必要刷新当前页面完成的场景 – 微博回复、评论 需要对数据进行排序,过滤 普通的文本输入提示和自动完成的场景
25.
Ajax 的不适用的场景 一些简单的表单
搜索 基本的导航 替换大量的文本 对呈现的操纵 – Ajax 应作为数据同步和传输的技术 成本 > 效果 是 效果还 > 成本 ?
26.
Ajax 的缺点 后退按钮失效
无法收藏页面 页面变化导致迷失位置 调试困难 搜索引擎分析失效
27.
Ajax 常见问题 跨域问题
解决方案 – iFrame – 页面代理方式 – JSONP
28.
Ajax 常见问题 乱码问题 –
采用 GBK 这种编码会遇到 – 由于 Ajax 是基于 UTF-8 的编码,必须在服务端接收的 时候做一次转换 。
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");
30.
JSONP
31.
YUI 中的 JSONP YAHOO.util.Get.script(url,
opts);
32.
jQuery 中的 JSONP $.getScript(url,
[callback]); url : 请求的链接 callback : 回调方法
Baixar agora