- 浏览: 7250491 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
Ajax的工作原理
使用Ajax的主要原因:1、通过适当的Ajax应用达到更好的用户体验;2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
Ajax是Asynchronous JavaScript and XML的缩写。它包括
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
XMLHttpRequest 对象方法描述
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送 ('post'方法一定要 )
XMLHttpRequest 对象属性描述
onreadystatechange 状态改变的事件触发器,readyState 对象状态(integer):
0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
responseBody 服务器返回的主题(非文本格式)
responseStream 服务器返回的数据流
status 服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
statusText 服务器返回的状态文本信息
2、JavaScript
JavaScript是一在浏览器中大量使用的编程语言。
3、DOM Document Object Model。
DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述,让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如,document 就代表“文件本身“这个对像, table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据,这些数据被封在DOM(Document Object Model)中,DOM提供了网页中各个对象的读写的支持。
4、XML
可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。
5、综合
Ajax引擎,实际上是一个比较复杂的JavaScript应用程序,用来处理用户请求,读写服务器和更改DOM内容。JavaScript的Ajax引擎读取信息,并且互动地重写DOM,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,这是我们一直在通过JavaScript和DOM在广泛使用的方法,但要使网页真正动态起来,不仅要内部的互动,还需要从外部获取数据,在以前,我们是让用户来输入数据并通过DOM来改变网页内容的,但现在,XMLHTTPRequest,可以让我们在不重载页面的情况下读写服务器上的数据,使用户的输入达到最少。
Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),而在以前两者是没有清晰的界限的,数据与呈现分离的分离,有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理。
四、应用
Ajax理念的出现,揭开了无刷新更新页面时代的序幕,并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势。
五、Ajax的优势
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和响影对服务器造成的负担;
2、无刷新更新页面,减少用户实际和心理等待时间;
3、也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本;
4、Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离);
Ajax原始代码如下:常用的东东
function() {
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event) {
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("divResult").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true); xhr.send(null); });
}
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false; } }
}
return xmlHttp;
}
发表评论
-
【转】互联网常见Open API文档资源
2012-07-17 17:22 2365原文出处:http://www.williamlong.i ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1829块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2009原文:http://www.joezimj ... -
highcharts制作强大的页面图表
2011-11-26 13:58 4755官方网址:http://www.highc ... -
JS 在IE和FireFox中的区别(三)
2009-12-26 18:45 3057(7)form表单提交问题 ... -
JS 在IE和FireFox中的区别(二)
2009-12-26 18:44 204610. const 问题现有问题:IE:不支持 const ... -
JS 在IE和FireFox中的区别
2009-12-26 18:43 22991. HTML 对象的 id 作为对象名的问题IE:HT ... -
window.showModalDialog()方法用例
2009-12-19 18:31 2066项目中使用到的父子窗体交互,仅有一个参数,想传递多个参数,其 ... -
js 父子窗体交互
2009-12-19 18:29 33791>父窗体是使用window.open(url,name ... -
js 时间工具类的应用
2009-11-21 15:08 2285项目中使用的时间工具类,主要针对javascript中 ... -
企业中使用MapAbc开发应用
2009-08-22 09:41 2910在项目中使用地图时必须考虑企业的访问量和各种Map ... -
js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)
2009-06-14 08:43 2866js 代码// 1.判断select选项中 是否存在Value ... -
JS的正则表达式
2009-05-17 09:10 1703校验是否全由数字组成 [code] function ... -
40种网页常用小技巧
2009-05-14 19:40 16571. oncontextmenu="window.e ... -
Ajax的学习应用
2009-05-11 17:01 1836Ajax的常用方式在java web 中的开发的应用代码如下: ... -
Prototype的源码分析
2009-05-11 16:52 2508/**这个文件是对xmlhttp ... -
XMLHTTP对象的API详解
2009-05-11 16:51 5001XMLHttpRequest 提供客户端同http服务器通 ... -
prototype的学习使用(二) Ajax的局部更新
2009-05-11 13:13 1870Ajax对象 上面提到的共通方法非常好,但是面对它吧,它们 ... -
prototype的学习使用(一)
2009-05-11 13:05 2007一些实用的函数这个类库带有很多预定义的对象和实用函数,这些东 ... -
iframe高度自适应问题
2009-05-09 08:15 3325iframe高度自适应问题是个难题,至少困扰了我很久,通过go ...
相关推荐
JQuery与Ajax常用代码实现对比,大家可以看下,根据实际情况选用。
ajax经典实例+代码大全 绝对经典 -------- 目录说明 -------- database 目录存放数据库SQL文件 java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 -------------- 数据库安装说明 -------------- 了解...
登陆注册注销 数据库操作 跨页传值 显示长文本的一部分 获得当前服务器信息
全书内容由浅入深,充分考虑了Ajax学习者的特点,并在配套光盘中提供了书中实例的全部源代码,以方便读者能够举一反三,编写出适合需求的程序。 本书不仅适合Ajax技术的初学者,还能够帮助有一定编程...
自己写的一些JS代码,包括常用的AJAX调用、DIV浮层、DOC处理查找。
js 常用代码,收集有最齐全的web开发常用代码,及少见的js对浏览器的各项操作
《Ajax+JSP网站开发从入门到精通》的源代码,全书共分为16章,包括JSP的基础知识、JSP访问外部数据、JSP高级技术、Ajax概述、Ajax相关技术、Ajax开发基础、Ajax开发模式、Ajax框架、Ajax常用技巧。本书最后介绍了6个...
ajax开发实例教程 源代码一些关于ajax常用实例和一些常用包
第二部分详细介绍了Prototype、jQuery、DWR、AjaxTags等四个最常用的Ajax框架的用法,并针对每个框架提供了一个实用案 例。这两个部分是笔者在“疯狂Java实训营”的培训讲义,是《疯狂Ajax讲义:Prototype/jQuery+...
这是个人整理的javascript的一些常用方法代码块!里面有ajax请求,浏览器的判断等一些常用代码。
ajax是非常常用的技术,主要作用是异步请求数据,实现局部刷新,这是我的一些学习代码,希望和大家分享
ASP.NET常用代码和第三方控件和类生成模版 常用代码包含了jmail邮件收发,登录验证码自动生成,分页代码,浮动框架导航,权限设置,上传附件,图片上传,过滤字符串 等等。 第三方空间包含了 ajax控件,fck,jmail,...
整理了一些 Ajax css ejb flex JAVA JavdScript jsp struts2 winform xml 数据库 上传和下载 的 常用代码
在写js代码是有一部分是常用的代码,页面传递阐述,截取参数等使用ajax
jquery 常用代码 jquery属性 jquery文档处理 jQuery时间 jQuery效果 jQuery ajax
230个常用JavaScript代码[XHTML _ CSS _ Script _ Ajax] 适合新手学习使用。
-采用最新AJAX技术,实现页面无刷新动态更新。 -全新类C/S的B/S框架基础结构设计。 -全新采用Tencent QQ2007清新海蓝色界面风格设计。 -与第一版数据完美兼容,新旧版本可以同时运行。 -采用活动页签版面设计,...
《超实用的JavaScript代码段》分为9章,包括JavaScript的一些必备知识,常用的表单处理、图片处理、内容展示、页面处理、日期处理、页面特效、移动开发等代码及其他常用代码,涉及闭包、Ajax、Data URI、DOM、BOM、...