使用AJAX 异步提高Web应用交互能力(徐承禹)

简介:
随着网络技术的飞速发展,在提供商业以及其他应用方面,IT行业对Web系统的依赖程度越来越高。如何提高B/S架构的应用系统在客户端贫乏的交互能力,这一直困扰者Web系统的设计、开发人员,他们研究出很多方法增强客户端界面的交互性,这些方法只能说表面的实现了桌面应用的一些交互方式,但没有真正的使得问题得到了解决。
作为Web2.0核心应用,Ajax的出现很好的解决了这个问题。他的特点就是异步交互,异步交互就是一个简单的多线程。在必要的时候应用可以不需要刷新整个页面来更新页面上的内容,对于用户而言完全是一个“无刷新”、“无阻塞”的过程,而在这个过程中,异步交互默默的在后台工作,而不是像传统的B/S应用那样必须是:用户请求刷新页面内容时必须提交HTTP请求,然后强制用户进入提交、等待、重新显示交互结果的过程。
1、传统的交互解决方法及其优、缺点
    在研发Web应用的过程中,设计和开发人员设计了很多方法增强Web应用的交互性:
1.1 弹出窗口。使用在事件处理函数中调用showModalDialog(URL)方法,将请求页面链接通过showModalDialog打开窗口,请求经过服务器处理后,窗口打开后又立即关闭,然后由事件处理函数中的脚本处理窗口返回的数据。缺点:只能处理类似鼠标点击事件,如果是键盘事件,即使是最快的网络速度,也会使客户端有延迟。并且有屏幕闪烁的现象。
1.2 使用JS脚本。将所有的基础数据生成到js文件中,在页面加载时下载到本地,或者在加载页面时动态生成JAVASCRIPT数组定义。在处理事件时,对js文件的数组进行分析,然后显示结果。优点是:相应速度快,可以应用在各种事件中,但是开发难度大、脚本复杂、功能单一、维护复杂,而且页面源程序太大,使得加载速度比较慢。
1.3 页面中脚本的按需加载。在页面源程序中预先加入一段没有内容的JAVASCRIPT的代码段,并设置好id,在事件处理时使用代码段的src属性动态加载javascript代码。并且执行这些代码。 <SCRIPT language=JavaScript id=script_do type=text/JavaScript></SCRIPT><SCRIPT LANGUAGE=JavaScript >function fun_do(){script_do.src=URL;}</SCRIPT>。优点是响应速度快,可以实现复杂的业务逻辑,但是在处理键盘事件比如onKeyPress事件时,就可以感觉到有一定的延迟。
其他还可以使用隐藏的Iframe,综合上述三种方法,可以看出虽然实现了桌面应用的一些功能,但是由于根本上使用了浏览器/服务器固有的这种请求/响应的断开式网络通讯模式,所以会使用户不得不等待服务器的返回的信息。
2、Ajax技术
2.1 Ajax组成
Ajax 是Asynchronous JavaScript and XML 的缩写。即“异步的JavaScript 和 XML处理” 或“非同步JavaScript 和 XML技术”,它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,在同共的协作中发挥各自的作用,它涵盖。
(1)XMLHttpRequest: XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端,然后以后台活动的方式获取数据,但并不会中断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式,虽然从名字上建议是XML格式的数据。
(2)CSS:层叠样式表,CSS提供了从内容中分离应用样式和设计的机制,在Ajax应用中,用户的界面样式可以通过CSS独立修改。
(3)DHTML或Dynamic HTML,用于动态更新表单。一般使用div、span和其他动态HTML元素来标记HTML。
(4)DOM:文档对象模型,用于(通过JavaScript代码)处理HTML结构和(某些情况下)服务器返回的XML。使用DOM实现Ajax应用的动态显示和交互。
(5)JavaScript:JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。JavaScript代码是运行Ajax应用程序的核心代码。

2.2 工作原理
 
 
Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web页面和服务器之间。当逻辑触发时,数据发送给一些 JavaScript 代码而不是 直接发送给服务器,JavaScript 代码捕获数据后向服务器发送请求,请求是异步发送的,就是说 JavaScript 代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后,服务器将响应数据返回 JavaScript 代码,后者决定如何处理这些数据。它可以操作DOM处理数据,并且将页面更新,它也可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预。它可以根据需要自行与服务器进行交互。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验。
2.3 普遍适用性
AJAX 之所以成为可能,是因为现在许多主要的浏览器都提供可进行独立 XML HTTP 请求的对象。Internet Explorer 5 以及更高版本提供了一个 XMLHTTP 对象,而基于 Mozilla 的浏览器则提供了一个 XMLHttpRequest 对象。这些对象都能够从服务器请求 XML 数据,并以类似的方式处理这些数据。所有能够动态提供 XML 的技术都可以使用服务器端 AJAX 组件。任何动态 Web 技术(从 ASP、PHP 到 JSP、Servlet)都可以充当 AJAX 服务器。因为所有流行的浏览器都支持 Javascript 和必要的 XMLHTTP 请求对象,且几乎所有 Web 服务器技术均可生成 XML(或任何标记),所以核心 AJAX 技术普遍适用。
 
3、《铁路安全行车事故综合分析系统》中Ajax实现
3.1 应用背景
《铁路安全行车事故综合分析系统》是铁路运输事故统计分析的重要系统,其基础信息必须具有绝对的正确性、严肃性。设计开发时,系统采用B/S架构。行车事故概况表(安监报一)是本系统的基本数据来源,数据项有六十多项,其中“事故地点”有8000多个可选项,“事故类别”有60多可选项,“线路别”有530多选项,“责任单位”也多达1000多选项。为了数据录入时的标准化,在桌面应用系统中用户可以只录入拼音码,应用程序根据拼音码检索符合条件的选项并很快的更新到下拉选择框里,但是在传统的Web应用中很难实现如此平滑的操作。笔者作为该系统的设计和开发人员,采用了Ajax技术进行实现。下面以铁路线路的录入为例具体实现。
3.2 具体实现
    (1) 创建XMLHttpRequest 请求对象:要求浏览器使用XMLHttpRequest或ActiveXObject。这两个对象的主要区别在于使用他们的浏览器以及创建对象的方式。
<script> function createRequestObject() { var ro; var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{ro = new XMLHttpRequest();}return ro;}
var txtObj;//当前获得输入的文本框(51aspx.com)
var http = createRequestObject();</script>
(2)发送请求:创建了请求对象,即向服务器发出请求作了准备。当用户在“线路名称”输入域里输入线路的拼音码时即可触发sndReq(txt,pym)函数,具体实现如下: <input type="text" name="line_name"   onKeyUp="sndReq(this,this.value);">
调用的函数有2个参数:该文本框对象和它的值。函数具体实现如下:
<script> function sndReq(txt,pym) {txtObj=txt;// 当前获得输入的文本框
if(pym=="") {return false;}
http.open('get', 'quick_ajax_retrun.jsp?pym='+pym, 'true');//51aspx.com
http.onreadystatechange = handleResponse; http.send(null);} </script>
函数中首先设置请求对象 http url http.open  ("GET",url, true);  true ”表示是异步方式, 接着设置请求返回值的接收方法: http.onreadystatechange = handleResponse ; handleResponse是该请求 返回值的接收方法)最后是发送请求: req.send(null)
3 )应用程序处理请求:
处理请求的应用程序是quick_ajax_retrun.jsp ,它的功能是,用查询参数pym的值,作为拼音码的匹配条件从数据库检索符合条件的记录。实现也比较简单:
a、             使用JDBC 链接ORACLE数据库
b、             组织查询语句查询数据库
c、             将查询的前 50 条记录中线路名字段数据以“,”隔开,组成一个字符串传回客户端。
4 )客户端接收处理服务器返回的请求:客户端接收到服务器端返回字符串型数据后立刻调用请求的处理函数。 这里应用 HMLHttpRequest 对象的 responseText 属性,其作用是将响应信息作为字符串接收。
<script> Function handleResponse() { if(http.readyState == 4){var response ="";
if (http.status==200){ try{ response= http.responseText; //获得返回的字符串
 }catch(exception) { response="浏览器无法支持快速输入"; }
var lines= new Array(); lines=response.split(','); //转为数组
toosing_show(txtObj,quicksel,quicklays,lines);//刷新下拉选择框中列表
}}}</script>
toosing_show功能是以文本框、下拉框、包含下拉框的层、lines数组为参数的函数,功能是将lines数组加载到下拉框中,将下拉框定位到文本框的下面,并显示出来。整个过程让人的感觉是Web程序是立即完成的,页面没有提交而用户得到了新的数据。
四、结束语
Web应用软件的开发除了考虑系统提供的之外,还要考虑应用的交互能力,使得用户操作时方便快捷。Ajax技术为B/S架构的应用程序提供了一种实现良好可交互性的选择,他的异步交互特点使得数据交换在页面之间完成,每次提交请求不需要刷新整个页面。本文通过一个具体项目实践说明了Ajax在增强Web应用交互能力方面的强大功能。作为一种技术,Ajax应用没有固定的模式,其具体实现方法要根据具体应用进行设计,以便向用户提供更方便、快捷、及时的服务,本文希望能起到抛砖引玉的作用。


本文转自 liudao 博客园博客,原文链接:http://www.cnblogs.com/liudao/archive/2007/10/31/944210.html,如需转载请自行联系原作者
相关文章
|
2月前
|
机器学习/深度学习 数据采集 人工智能
智能嗅探AJAX触发:机器学习在动态渲染中的创新应用
随着Web技术发展,动态加载数据的网站(如今日头条)对传统爬虫提出新挑战:初始HTML无完整数据、请求路径动态生成且易触发反爬策略。本文以爬取“AI”相关新闻为例,探讨了通过浏览器自动化、抓包分析和静态逆向接口等方法采集数据的局限性,并提出借助机器学习智能识别AJAX触发点的解决方案。通过特征提取与模型训练,爬虫可自动推测数据接口路径并高效采集。代码实现展示了如何模拟AJAX请求获取新闻标题、简介、作者和时间,并分类存储。未来,智能化将成为采集技术的发展趋势。
智能嗅探AJAX触发:机器学习在动态渲染中的创新应用
|
4月前
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
299 11
|
10月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
209 2
|
8月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
181 3
|
8月前
|
网络协议 前端开发 数据处理
11 Web交互知识你了解吗?
路老师带你深入PHP世界,纯干货分享。本文从Web工作原理讲起,介绍了HTTP协议和Web数据处理流程,重点讲解了PHP如何获取表单数据,包括POST和GET方法的具体实现及示例代码。适合初学者入门,助你掌握PHP核心技术。
76 1
|
8月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
169 1
|
9月前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
362 1
|
9月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
104 3
|
9月前
|
API C#
异步轮询 Web API 的实现与 C# 示例
异步轮询 Web API 的实现与 C# 示例
176 1
|
10月前
|
数据库 开发者 Python
实战指南:用Python协程与异步函数优化高性能Web应用
在快速发展的Web开发领域,高性能与高效响应是衡量应用质量的重要标准。随着Python在Web开发中的广泛应用,如何利用Python的协程(Coroutine)与异步函数(Async Functions)特性来优化Web应用的性能,成为了许多开发者关注的焦点。本文将从实战角度出发,通过具体案例展示如何运用这些技术来提升Web应用的响应速度和吞吐量。
88 1

热门文章

最新文章