Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

没有Xhr,ajax精彩依旧

3,601 views

Published on

Published in: Technology
  • Sex in your area is here: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

没有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 />

×