JAVA技术
返回
登录/注册
Ajax技术分类与实现
楼主
疯狂java 于 2013-12-10 09:22:11
Ajax技术分类与实现
[P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 1.AJAX简介[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] AJAX是实现web2.0服务中的核心技术，全称为“异步JavaScript和XML技 术”（Asynchronous JavaScript and XML）；Ajax的核心技术理念在于使用XMLHttpRequest对象发送异步请求。最初为XMLHttpRequest对象提供浏览器支持的是微软公司。AJAX技术的出现，可以说是挽救了传统的B/S结构，并赋与web应用新的生命。简单的说，通过AJAX，我们可以用XMLHttpRequest对象来直接与服务器进行通信，通过这个对象，我们就可以在不重载页面的情况与 Web 服务器交换数据。[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 2.AJAX的优点[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 在传统的 JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 通过利用 AJAX，您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 3.AJAX中用到的技术[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 实际上，Ajax不是一种技术，而是几种技术。每种技术都具有独特之处，合在一起就形成功能强大的新技术。Ajax包括：[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] javaScript:实现客户端的数据发送和界面更新，是ajax实现的编程语言；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] XMLHttpRequest：浏览器内置的用以进行异步数据发送和接收的对象，是AJAX核心对象；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] Css+div:对用户而言，AJAX的价值是用户界面更加友好---这当然还是依靠css+div实现；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] DOM模型：AJAX常见的技巧就是使用js响应dom组件事件或更新其；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] Xml:XML仅是一种传输数据的格式，在ajax应用中常以xml格式在c/s间交换数据；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] Html[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 4.AJAx的实现步骤[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 实现AJAX的第一步就是要创建XMLHttpRequest对象[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 而在不同的浏览器中，创建该对象的方法是不同的[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 为了是程序更加的兼容，我们可以使用if语句或者是try catch语句来创建该对象[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 如：function ajaxFunction（）[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] var xmlHttp;[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] try[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] // Firefox, Opera 8.0+, Safari[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] xmlHttp=new XMLHttpRequest（）；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] catch （e）[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] // Internet Explorer[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] try[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] catch （e）[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] try[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] catch （e）[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] {[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] alert（"您的浏览器不支持AJAX！"）；[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] return false;[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] }[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] [/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=21px][FACE=Simsun][COLOR=rgb(102, 102, 102)][BGCOLOR=rgb(255, 255, 255)][SIZE=14px] 在上面的例子中，首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。（转载）[/SIZE][/BGCOLOR][/COLOR][/FACE][/LINE-HEIGHT][/P]
回复
1楼
qa_wangkang 于 2013-12-25 11:46:49
ajax 如果不区分浏览器支持的话 那就更大爱了
回复
1
电脑版
Page created in 0.0938 seconds with 4 queries.