一、Ajax是什么
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。作为创建交互式网页应用的网页开发技术,它有以下特点:
使用XHTML CSS来表示信息
使用JavaScript操作DOM(Document Object Model)进行动态显示及交互
使用XML和XSLT进行数据交换及相关操作
使用XMLHttpRequest对象与Web服务器进行异步数据交换
使用JavaScript将所有的东西绑定在一起
使用SOAP以XML的格式来传送方法名和方法参数
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的"派生/合成"式(derivative/composite)的技术正在出现,如"AFLAX"。
AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象,也不支持XSLT。(摘自于:http://zh.wikipedia.org/zh-cn/AJAX)


二、Ajax诞生的背景,为什么使用Ajax
我们都知道,用户通过浏览器产生一个请求后,此请求通过HTTP协议,向服务器请求所要的资源,如果是一个图片链接,则请求的就是一个图片资源,如果是一个文件链接,则请求的是一个文件资源,多数情况下,请求的是整个网页,网页又根据自身的HTML代码,请求各个具体的资源,比如图片、音频等。随着网站的发展,用户量越来越大,服务器的压力也越来越大,这就暴露出了一个问题,即:大多数用户在请求资源时,新请求的那个网页中,与现在的那个网页有很多相同的地方。但是由于请求的是整个网页,它会重新从服务器获取所有的资源(当然,有很多图片、文件之类的会从客户端中获取),这就是大大的浪费。
为了解决这个问题,Ajax就诞生了,它主要的作用就是,通过XMLHttpRequest对象获取服务器资源,局部刷新用户正在浏览页面,大大减轻了服务器的压力,由于只获取的是需要更新的资源,相对整个页面的资源来说,浏览器也服务器之间的数据交互量也大大减少(大约只有原来的5%),大大加快了页面的加载速度。

三、Ajax发展史
该技术原属于微软的一个研发小组,为了允许客户端发送HTTP请求,研发出来的,但没有得到广泛应用。后经Google广泛用于它的应用程序进行异步通讯交互,如google讨论组、google地图等,Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创,该文的迅速流传提高了人们使用该项技术的意识,后来就出现了疯狂的Ajax革命。

四、Ajax实践
AJAX 的要点是 XMLHttpRequest 对象,所有的实现也是通过XMLHttpRequest对象操作的。但是在浏览器大战的今天,不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

// Mozilla, Safari,Opera 8.0 ... 
function ajaxFunction(){ 
var http_request; 
if (window.XMLHttpRequest) { 
http_request = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
// IE 
try { 
http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
try { 
http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) { 
alert("您的浏览器不支持Ajax"); 
return false; 
} 
} 
http_request.onreadystatechange = alertContents; 
http_request.open('GET', url, true); 
http_request.send(null); 
} 
function alertContents() { 
if (http_request.readyState == 4) { 
if (http_request.status == 200) { 
alert(http_request.responseText); 
} else { 
alert('There was a problem with the request.'); 
} 
} 
}

解释:首先创建一个XMLHttpRequest对象http_request,如果支持window.XMLHttpRequest,则用new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器,如果不支持,则尝试针对Internet Explorer 6.0 的Msxml2.XMLHTTP组件创建XMLHttpRequest,如果也不支持,则尝试针对 Internet Explorer 5.5 的Microsoft.XMLHTTP组件,如果仍然不支持,则说明用户的浏览器版本太低了,提示用户“您的浏览器不支持AJAX”。
XMLHttpRequest对象的onreadystatechange方法用于,状态改变时要执行的方法,用来处理这个响应。
readyState的状态是:
  0 请求未初始化(open() 之前)
  1 请求已提出,正在装载 (调用 send() 之前)
  2 装载完毕,请求已发送(这里通常可以从响应得到内容头部)
  3 交互中,请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
  4 请求已完成(可以访问服务器响应并使用它)
所以当readyState等于4时,就表示一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。当HTTP服务器响应的值为200时,表示状态正常。这时候才真正执行客户端要执行的操作。
读取从服务器返回过来的数据,有两种方式:
  1、http_request.responseText:以文本字符串的方式返回服务器的响应
  2、http_request.responseXML:以XMLDocument对象方式返回响应

五、Ajax缺陷与不足
1、可能破坏浏览器后退按钮的正常行为;
2、使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中;
3、Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
4、一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。

六、Ajax工具

1、jQuery 开源JS框架,写得更少,做得更多;
2、ASP.NET AJAX Extension 微软AJAX工具箱;
3、ExtJS 一个自YUI延伸出来的Ajax框架。

Ajax的内部实现机制、原理与实践小结的更多相关文章

  1. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  2. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  3. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  4. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  5. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

  6. ajax编写简单的登录页面

    这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  8. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下

  9. 五分钟理解keep alive用法及原理

    这篇文章主要为大家介绍了keep alive用法及原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  10. 使用AJAX完成用户名是否存在异步校验

    这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部