Ajax的内部实现机制、原理与实践小结

一、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框架。

(0)

相关推荐

  • Ajax二级联动菜单实现原理及代码

    index.jsp: 复制代码 代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } f

  • AJAX工作原理及优缺点详解

    AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 使用CSS和XHTML来表示. 使用DOM模型来交互和动态显示. 使用XMLHttpRequest来和服务器进行异步通信. 使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpReq

  • js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应

  • ajax原理总结附简单实例及其优点

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

  • Ajax通讯原理XMLHttpRequest

    显然AJax就是利用JavaScript脚本访问数据的一种技术. AJAX 使网页实现异步更新.这就是在不重新加载整个网页的情况下,对网页进行局部更新. XMLHttpRequest 是 AJAX 的关键 现在浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). 向后台请求数据readyState有五个状态0:服务器未初始化,1:服务器连接已建立,2请求已接受收,3请求处理中,4请求完成. 每改变一次状态都好触发一次onreadystatec

  • jQuery的实现原理的模拟代码 -5 Ajax

    复制代码 代码如下: // 创建 XHR 对象 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax is not supported by this browser");

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • 浅析Ajax的 原理及优缺点

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

  • Ajax的内部实现机制、原理与实践小结

    一.Ajax是什么 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术.作为创建交互式网页应用的网页开发技术,它有以下特点: 使用XHTML+CSS来表示信息 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互 使用XML和XSLT进行数据交换及相关操作 使用XMLHttp

  • JS内部事件机制之单线程原理

    任务队列 主线程:正在执行的代码,会生成函数调用栈. macro-task(宏任务,新名:task)包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering. micro-task(微任务,新名:jobs)包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性,队列中只能有一个) 任务分类 同步任务,语句只按

  • Redis核心原理与实践之字符串实现原理

    本文分析Redis字符串的实现原理,内容摘自新书<Redis核心原理与实践>.这本书深入地分析了Redis常用特性的内部机制与实现方式,内容源自对Redis源码的分析,并从中总结出设计思路.实现原理.通过阅读本书,读者可以快速.轻松地了解Redis的内部运行机制. Redis是一个键值对数据库(key-value DB),下面是一个简单的Redis的命令: > SET msg "hello wolrd" 该命令将键"msg".值"hell

  • Windows程序内部运行机制实例详解

    本文以孙鑫老师VC++教程中的程序为基础,详细讲解了Windows程序内部运行机制,相信可以帮助大家更好的理解Windows程序运行原理及相应的VC++程序设计.具体内容如下: 创建一个Win32应用程序步骤: 1.编写WinMain函数; 2.创建窗口(步骤如下): a.设计(一个)窗口类(WNDCLASS) b.注册(该)窗口类. c.创建窗口. d.显示并更新窗口. 3.编写消息循环. 4.编写窗口过程函数. //WinMain.cpp #include <windows.h> #inc

  • Java和Dubbo的SPI机制原理解析

    SPI: 简单理解就是,你一个接口有多种实现,然后在代码运行时候,具体选用那个实现,这时候我们就可以通过一些特定的方式来告诉程序寻用那个实现类,这就是SPI. JAVA的SPI 全称为 Service Provider Interface,是一种服务发现机制.它是约定在 Classpath 下的 META-INF/services/ 目录里创建一个以服务接口命名的文件,然后文件里面记录的是此 jar 包提供的具体实现类的全限定名. 这样当我们引用了某个 jar 包的时候就可以去找这个 jar 包

  • Java十分钟精通反射机制原理

    什么是反射? 反射机制是在运行状态中,它为Java提供一种"操作对象"的能力,在运行状态下,通过Class文件对象,可以调用到任何类里面的属性.方法.以及构造方法,包括私有的,所有的类在反射机制面前都是透明的 自己的概括:通过Class文件对象可以看到这个类里面的所有东西,并且可以使用和修改 反射的前提是获取Class文件对象((字节码对象),那么一共有三种方式获取: Class.forName("全类名") ----通过Class类的静态方法(最常用) 类名.cl

  • Java反射机制原理、Class获取方式以及应用场景详解

    目录 学习背景 一.Java反射机制是什么? 1.1 反射原理 1.2 反射例子 二.Java反射机制中获取Class的三种方式及区别? 2.1 Class的几种获取方式 2.2 代码演示几种方式的区别 三.Java反射机制的应用场景有哪些? 3.1 应用场景 3.2 简单工厂模式优化 3.2.1 什么是简单工厂模式? 3.2.2 简单工厂模式有什么用? 3.2.3 如何实现简单工程模式? 3.2.4 简单工厂模式优化 3.2.5 简单工厂模式再次优化 3.3 代理模式中的动态代理实现 3.3.

  • 一文搞懂MySQL运行机制原理

    目录 前言 MySQL服务器体系架构 网络连接层 服务层 存储引擎层 系统文件层 服务器处理客户端请求 连接管理 解析与优化 查询缓存 语法解析 查询优化 存储引擎 小结 前言 前文我们了解了MySQL采用客户端/服务器架构,用户通过客户端程序发送增删改查需求,服务器程序收到请求后处理,并且把处理结果返回给客户端.这篇文章主要看下MySQL服务端是如何处理客户端的请求,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助. MySQL服务器体系架构 MySQL Server架构自顶向下大致可以分网

  • Python进阶之import导入机制原理详解

    目录 前言 1. Module组成 1.1 Module 内置全局变量 2. 包package 2.1 实战案例 3.sys.modules.命名空间 3.1 sys.modules 3.2 命名空间 4. 导入 4.1 绝对导入 4.2 相对导入 4.3 单独导入包 5. import运行机制 5.1 标准import,顶部导入 5.2 嵌套import 前言 在Python中,一个.py文件代表一个Module.在Module中可以是任何的符合Python文件格式的Python脚本.了解Mo

  • PHP反射机制原理与用法详解

    本文实例讲述了PHP反射机制原理与用法.分享给大家供大家参考,具体如下: 反射 面向对象编程中对象被赋予了自省的能力,而这个自省的过程就是反射. 反射,直观理解就是根据到达地找到出发地和来源.比如,一个光秃秃的对象,我们可以仅仅通过这个对象就能知道它所属的类.拥有哪些方法. 反射是指在PHP运行状态中,扩展分析PHP程序,导出或提出关于类.方法.属性.参数等的详细信息,包括注释.这种动态获取信息以及动态调用对象方法的功能称为反射API. 如何使用反射API <?php class person{

随机推荐