没有Xhr,ajax精彩依旧

3,540 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,540
On SlideShare
0
From Embeds
0
Number of Embeds
1,877
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

没有Xhr,ajax精彩依旧

  1. 1. 维生数工作室第四次技术交流大会<br />没有XHR,Ajax精彩依旧<br />Feather主讲<br />
  2. 2. What is Ajax?<br /> AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)是一种创建交互式网页应用的网页开发技术。<br /> AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。<br />
  3. 3. Baidu Demo<br />
  4. 4. Two Models<br />
  5. 5. XHR<br />XMLHttpRequest (XHR) is an API available in web browser scripting languages such as JavaScript. <br />——Wiki<br />很多框架都对XHR进行了封装,例如Jquery的$.ajax方法。<br />
  6. 6. Ajax不仅是XHR<br />
  7. 7. Real Ajax<br />根据Ajax提出者Jesse James Garrett建议<br />Ajax技术包括:<br />1.基于web标准XHTML+CSS的表示;<br />2.使用 DOM进行动态显示及交互;<br />3.使用 XML 和 XSLT进行数据交换及相关操作;<br />4.使用 XMLHttpRequest进行异步数据查询、检索;<br />
  8. 8. DHTML<br />
  9. 9. Before the Era of DHTML<br />在DHTML时代之前:<br />所有页面都是静态的,即一次性渲染;<br />DHTML系列技术实现了动态显示(实时渲染)。<br />异步下载(XHR)<br />Ajax<br />实时渲染(DHTML)<br />
  10. 10. DHTML也可以异步下载<br />
  11. 11. DownLoad by DHTML<br />通过添加这些标签,实现异步下载:<br />图片:<img> CSS:<link><br />脚本:<script> Html:<iframe><br />主要通过以下方式添加:<br />Document.write()<br />innerHTML<br />DOM节点操作<br />BOM对象操作<br />
  12. 12. <img><br />Simple Demo<br /><input type="button" value="加载" onclick="clickhandler()" /><br /><div id="box"></div><br /><script type="text/javascript"><br />function clickhandler(){<br />document.getElementById('box').innerHTML='<imgsrc="1029084058.jpg">‘<br />}<br /></script><br />Another Demo:新生专题网的验证图片实时下载<br />只下载不显示 (预加载Pre-Loading)<br />1.CSS:display:none;<br />2.BOM:<br />var a =new Image();<br />a.src='0081029084058.jpg'<br />
  13. 13. Lazy-Loading<br />延迟下载(懒惰下载),将部分资源延迟到需要的时候下载,减轻带宽,提升响应。<br />Img Demo:<br />淘宝:http://www.taobao.com/<br />京东:http://www.360buy.com/l<br />REM:http://remember2015.info/blog/?p=141<br />Tools:<br />Jquery:delayKissy:DataLazyload <br />Other Demo:<br />腾讯微博 <br />
  14. 14. <link><br />Simple Demo<br /> <link href="a.css" type="text/css" rel="stylesheet" id="css" /><br /><input type="button" value="加载" onclick="clickhandler()" /><br /><script type="text/javascript"><br />function clickhandler(){<br />document.getElementById('css').href="b.css"<br />}<br /></script><br />
  15. 15. <script><br />通过script异步下载脚本是一种很常用的手段,通常在以下情况中使用:<br />1.无阻塞其他资源下载和页面渲染;<br />2.脚本并行下载;<br />3.跨域访问(jsonp);<br />Web Optimization:<br />1.创建Script DOM:并行下载,无阻塞;<br />2.Document.write():IE中并行下载<br />Two Books:<br />
  16. 16. <iframe><br />iframe是一个全能的标签,可以通过它实现很多改善用户体验的功能。<br />用iframe实现类似jquery的Ajax方法<br />
  17. 17. THX!<br />

×