AJax技术

前端必备HTTP技能之Ajax技术详解

字号+ 作者:H5之家 来源:H5之家 2017-03-20 18:02 我要评论( )

Ajax(Asynchronous JavaScript and XML)是一系列web开发技术的集合,使用很多的web技术在客户端开发异步web应用。利用Ajax,web应用可以异步的发送数据获取数据,而不干扰现有页面的显示和行为。通过解耦数据接口层和展现层,Ajax允许web页面或者其他扩展的w

Ajax(Asynchronous JavaScript and XML)是一系列web开发技术的集合,使用很多的web技术在客户端开发异步web应用。利用Ajax,web应用可以异步的发送数据获取数据,而不干扰现有页面的显示和行为。通过解耦数据接口层和展现层,Ajax允许web页面或者其他扩展的web应用动态的改变数据而不用重新加载整个页面。实现通常选择JSON代替XML,因为更接近JavaScript。

Ajax不是一种技术,是一组技术。HTML和CSS用来组合标记和样式信息。用户可以利用js访问DOM对象负责动态展示。js和XMLHttpRequest对象提供一种浏览器和服务端异步互换数据的方法从而避免整个页面加载。

历史

在90年代中期,许多web站点完全基于html页面。每个用户行为都需要从服务端重新加载页面。这个过程很不方便,影响用户体验:所有的页面内容消失,然后又出现。每次因为小部分改动需要浏览器重新加载页面,所有内容都必须重新获取,甚至只有很少的信息改变。这会额外增加服务端负载,浪费带宽,影响性能。

在1996年,IE引入了iframe标签来异步加载获取内容。

在1998年,微软的邮件组团队利用客户端脚本实现了第一个XMLHTTP组件。

在1999年,微软在IE的默认页面使用iframe技术动态更新新闻故事和股票行情,并且在IE5中创建了XMLHTTP ActiveX组件,这个技术随后被Mozilla,Safari,Opera以及其他浏览器采用,作为XMLHttpRequest js对象。微软在IE7中采用了原生的XMLHttpRequest模块。IE仍然支持ActiveX版本,但是在Edge中不支持了。这种技术的使用在当时相当不明朗直到出现在大规模线上应用中,比如Outlook Web App (2000)和Oddpost。

谷歌在Gmail(2004)和Google Maps(2005)中广发部署了符合标准的跨浏览器Ajax。在2004年10月Kayak.com的公测版本是首次大规模电子商务网站使用了他们当时称为"the xml htpp thing"的技术。

Jesse James Garrett在2005年2月18号发表的一篇题为"Ajax: A New Approach to Web Applications"的论文中,基于Google 页面中使用的技术,公开阐明了"Ajax"这个术语。

在2006年4月5号,W3C发表了第一个关于XMLHttpRequest对象的草案,尝试建立一个官方的Web标准。关于XMLHttpRequest对象最新的草案是在2014年1月30号发布的。

技术集

Ajax术语已经变成了web应用用来与服务端在幕后交流不打断页面当前状态而使用的一组技术的代表。在Jesse James Garrett的论文里创造的Ajax术语包括以下技术:

  • 展现层的HTML(或者XHTML)和CSS
  • 动态显示和与数据交互的DOM对象
  • 为了交换数据的JOSN或者XML,为了操纵数据的XSLT
  • 为了异步通信的XMLHttpRequest对象
  • 把这些技术整合起来的JavaScript
  • 从那以后,Ajax应用使用的技术已经有了很大的发展,包括Ajax术语的定义。数据交换不再需要XML,操纵数据也不再需要XSLT了。JOSN经常被使用作为数据交换的一种格式,尽管其他的格式例如预定义的HTML或者纯文本仍然可以使用。

    Asynchronous HTML and HTTP(AHAH)使用XMLHttpRequest对象获取(X)HTML片段,然后插入到Web页面中。


    传统Web应用模型与使用Ajax的Web应用模型对比

    弊端 例子

    下面就是一个简单的使用GET方法进行Ajax请求的例子
    get-ajax-data.js:

    var xhr = new XMLHttpRequest(); xhr.open('get', 'send-ajax-data.php'); xhr.onreadystatechange = function () { var DONE = 4; var OK = 200; if (xhr.readyState === DONE) { if (xhr.status === OK) { alert(xhr.responseText); } else { alert('Error: ' + xhr.status); } } }; xhr.send(null);

    send-ajax-data.php:

    header('Content-Type: text/plain'); echo "This is the returned text."; jQuery示例

    使用流行的jQuery库,完成上例中相同的事情

    $.get('send-ajax-data.php') .done(function(data) { alert(data); }) .fail(function(data) { alert('Error: ' + data); });

    做好前端开发必须对HTTP的相关知识有所了解,所以我创建了一个专题前端必备HTTP技能专门收集前端相关的HTTP知识,欢迎关注,投稿。

    PS:本文翻译自维基百科,原文地址https://en.wikipedia.org/wiki/Ajax_(programming)

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 前端学习——使用Ajax方式POST JSON数据包

      前端学习——使用Ajax方式POST JSON数据包

      2017-03-15 12:00

    • 拉扯网,刘威龙个人网站,Web前端开发交流网,欢迎访问拉扯网

      拉扯网,刘威龙个人网站,Web前端开发交流网,欢迎访问拉扯网

      2017-03-13 14:03

    • jQuery EasyUI API 中文文档 DateTimeBox日期时间框

      jQuery EasyUI API 中文文档 DateTimeBox日期时间框

      2017-03-12 10:02

    • XMLHttpRequest学习笔记

      XMLHttpRequest学习笔记

      2017-03-11 15:01

    网友点评