Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/16 2:51:16
Ajax 及其入门基础(1)_[AJAX教程]

Ajax 及其入门基础(1)_[AJAX教程]

















一、白话Ajax的原理




这个可以从 C/S 和 B/S 的原理说起。Windows操作系统的诞生,为单机通信提供了很大的支持,程序设计也从早期DOS的单任务单用户向网络的分布式应用过度。C/S提供的客户/服务器编程模式为网络应用提供了一个有效的通信手段。浏览器与Web服务器之间的请求/ 服务,就是一个典型的C/S应用。
有人说,怎么是C/S?这应该是B/S呀!其实是这样理解的:浏览器/Web服务器作为我们实现网页发布的一个平台,对于我们在这个平台上开发的应用,我们的应用是由浏览器从Web服务器上下载下来然后展示在浏览器的“容器”里的,我们的应用是B/S模式的。但是浏览器与Web服务器的通信,却是C/S模式的。可以说,B/S模式是建立在C/S模式之上的。
Windows早期的桌面应用程序(包括单机程序和C/S结构的网络应用程序),其界面是调用Windows的API来实现的,后来,出现了VB、Delph(VCL)、VC++(MFC)等应用程序框架,把繁杂的API包装起来,使Windows程序开发大大降低、效率大大提高。
进入B/S编程阶段后,我们只需要面向Web服务器和浏览器编程,不需要考虑网络通信和并发等复杂的问题。但是在浏览器和Web服务器之间,为了进行数据交互,浏览器经常频繁的向Web服务器提交一些信息,现在的网络环境又极差,使我们经常等待于浏览器与Web服务器的通信状态,用户体验很差。而传统的桌面程序没有这个缺陷。
怎样既能利用B/S程序极强的界面表现力,又能避免其提交后的那一段眩晕的“真空”状态呢?
其实,在浏览器的设计阶段,设计师已经为我们考虑到了这个问题。这就是我们要说到的Ajax!Ajax英文是Asynchronous JavaScript and XML,就是在浏览器里通过一个机制,实现浏览器端与Web服务器端的一个异步通信,参与这个过程的有javascript、XML等技术。Ajax的引入,使B/S信息传递的量减少了,浏览器界面不再闪烁了,浏览者的感觉好多了。
Ajax并不是一项新技术,而是几个现有技术的新组合,而且它的发展也得益于几家大的互联网企业的率先应用(大家常拿Google的在线Maps来举例)。连浏览器寡头微软当初都没怎么看得起这项技术,后来才在VS.NET2.0时代玩命的赶呀追。




二、Ajax的实现




Ajax是由浏览器通过内部的一个组件实现的,这个组件负责接收用户的请求,以XML作为信息中介,并与Web服务器实现异步通信,并把请求的结果返回给浏览器,再由浏览器呈现给用户界面。“异步”的意思就是组件在后台工作期间,浏览器与用户保持在交互状态,并不更新当前窗口。也不是所有的数据都被组件提交到后台去。
Ajax实现的基础是:浏览器有一个Ajax引擎;浏览器支持Javascript;Web服务器端也支持XML数据格式。并不是所有浏览器都支持Ajax技术的,但支持Ajax的浏览器越来越多。
这个组件在Windows下是一个COM组件,由IE浏览器调用。IE浏览器也是在5.0版本以后才提供这个组件的。不同的浏览器实现和创建XMLHttpRequest对象的方式是不太一样的。但作为一个通用的Ajax接口,其外在表现是一致的。
Ajax其实是一项复杂的技术,牵扯到的东西很多。除过XMLHttpRequest对象和Javascript,还有DOM(文档对象模型),XML等。Javascript是一个粘合剂,它通过XMLHttpRequest对象对浏览器端页面的诸多元素进行操控,实现与Web服务器的后台交互,实现数据验证、存取等功能。




三、Ajax编程示例




1,客户端(文件client.htm)



AJAX 客户端










用户名:
onClick=”userCheck()”>






2,Web服务器端(文件server.php)
//取得客户端数据
username = _POST[”username”];




//判断用户名的惟一性
if( username==”网眼”) //实际工程中,这里一般是从数据库取用户名的值
{
printf(”用户名“%s”已经被注册,请更换一个用户名”, username);
}
else
{
printf(”用户名“%s”尚未被使用,您可以继续”, username);
}
?>




在以上Client.htm代码中,首先建立XMLHttpRequest对象实例,然后很据对象的状态触发事件处理函数,对返回的信息进行处理。一切控制逻辑都是用Javascript脚本来书写的,XMLHttpRequest对象与Web服务器的XML信息交换对我们是隐含的,我们不必关心。




这是一个最原始的Ajax编程框架,它能简单的处理一些少量数据。经过代码重构,完全可以用在我们自己的小型工程中。




注意Ajax本身是一种浏览器端技术,它和Web服务器端采用什么脚本书写代码是没有关系的。比如我们把Client.htm的语句send_request(’server.php’, username)换为send_request(’server.asp’, username),再相对应的建立server.asp文件,内容为:




<%
dim username
username = request(”username”)




if username=”Thomas” then
response.write(”用户名” & username & “已经被注册,请更换一个用户名”)
else
response.write(”用户名” & username & “尚未被使用,您可以继续”)
end if
%>
做了这样的改变后,在浏览器端,用户看到的效果是一模一样的。




张庆(网眼)http://blog.why100000.com

























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759