教你AJAX一分钟学会

文章来自:http://www.zuoyefeng.com/html/2008-01/590.htm 

十分钟教你学会AJAX,这绝不是夸张!有时候,我十分憎恨一些图书、教程,讲了好几十页,说了一大堆,结果没有简单有效的说出,这个东西怎么用,何时用!

实际上,对于IT行业,新技术新思想,此起彼伏,并且有些技术常常昙花一现,不了了之!常常这些技术名异效同,加之有些书籍和教程如法炮制、千篇一律,这都让程序员们累中加累,莫名一处。

我个人认为,学习一门技术应从两方面着手:原理、应用。

掌握原理,是理解这门技术,以致把它应用到极点的重要根基。 掌握应用,是我们的目标,所谓学以致用,概此理也。

下面我开始说说AJAX。

1、什么是AJAX? AJAX是Ajax(Asynchronous JavaScript. and XML)的简称,它并不是什么新技术,是现有技术的组合,实现了客户端(浏览器)与服务器的异步通信。也就是,我们通常所说的,不刷新页面。也有人称之为富客户端技术。

假如,你有过开发体验,在会员注册或者添加软件用户时,往往要验证这个用户名是否重复,传统上的实现,要提交整个表单,在服务器端判断这个用户是否存在,然后将信息返回客户端。这个过程,需要刷新页面,让用户的眼前空白一段时间,而使用ajax,就可以解决这样的问题,网页不需要刷新,但仍完成了在服务器端的验证。

就这是ajax。

2、AJAX的原理? 实际上,AJAX的原理很简单。打个比方,你要买张车票,你要自己去车站(这个过程好比浏览器提交信息给服务器的过程),买好票你再回来(服务器把信息发回浏览器),这一去一回,肯定要占用时间啊,也会耽误你其它的工作。使用了AJAX就不同了,现代你找个代理,让小张帮你去买票,而你只需要坐在办公室,看书阅报就OK了。

实际上,AJAX就是这样一个简单的原理。AJAX实际客户端不刷新的原理,就是通过Javascript中的 XmlHttpRequest 这个对象来代理客户端和服务器的通信过程,包括了GET和POST,这样就不需要再提交表单了,也不需要重置网址了,所以也就不刷新了。

“代理”的思想,在软件业中,用的是很广的。生活中也是很常见的。你像Java的虚拟机,.Net的运行时,实际上,就是通过一个代理,来实现了跨平台、跨语言的功能;生活中的中介、代办不也就是代理之思维。

所以,AJAX不是改变了客户端与服务器通信这一现状,只是通过Javascript(客户端脚本语言)客户端(浏览器)将要发送的数据准备好,然后通过XmlHttpRequest这个代理发送给服务器,待服务器把信息返回给客户端时,Javascript再将数据从代理者XmlHttpRequest中读出来,就是这么点事。 3、花多久AJAX? 我个人认为,如果你不是专业从事AJAX的研发与应用的人员,三天时间足矣!超过三天就是浪费时间了!希望本教程,可以让你十分钟搞定AJAX。

我个人认为,不久之后,浏览器中会内置异步通信功能,所以那时AJAX也就没有意义了。所以,对于AJAX技术,我们掌握其原理,能应用到项目中去就可以了。整个web开发,无非也就是一个网络通信Socket!所以,不是浏览器的厂商,没必要过于研究AJAX,因为那没有意义!

4、AJAX的使用?

通过对AJAX的原理了解,我们知道,AJAX实际就是写Javascript,写Javascript通过XmlHttpRequest来发送、接收数据,而不是使用表单了。

所以,能发送,能接受,这就是使用AJAX的责任所在。国际上,有许多AJAX框架,但他们几乎都有一个特点,学习麻烦,并且和语言相关,储如.net2.0集成的Ajax框架,php的xajax框架等。针对这一情况,我写了一个纯javascript的ajax框架,这个ajax框架是我为jwork for php而定做的,但它同时也支持asp、net、jsp等所有web开发语言,因为它是纯js的。

我们知道,web开发主要是get(一般为网址请求)、post(一般为提交表单)方式,jwork框架中的ajax也是如此:

jget(url,output) Url:表示你要提交请求的网址。网址中可带一个或多个参数。 Output:表示服务器回调的值显示的位置。一般为input或div标签的id名。

jpost(url,input,output) jpost有三处参数: Url:表示你要提交请求的网址。网址中可带一个或多个参数。 Input:表示通过表单POST方式提交的数据。形式为:name=ccopen&id=20 Output:表示服务器回调的值显示的位置。一般为input或div标签的id名。

5、示例用户名是否重复验证 注册页面:reg.html

<!-- 引入jwork的ajax框架 --> <script. language="javascript" src="libs/ajax.js"></script> <!-- 提示信息 --> <div id="err" /> <form. action="reg2save.php" name="form1" method="POST">  [ 用户注册 ] <hr>  用户名: <input name="username" nblur="checkname()" ><br> 密码:<input name="password" ><br> 性别<input type="radio" value="男" name="sex" />男   <input type="radio" name="sex" value="女" />女<br> <input type="submit" value="提交" name="sub" /> </form> <script. language="javascript">  function checkname()  {   //调用ajax     var username=document.getElementById("username");    jget("checkname.php?username="+username.value,"err");   } </script> 处理页面:checkname.php <?php header('Content-Type:text/html;charset=GBK'); //查询数据库,判断是否重复,如果重复,打印下面这句话 $username=$_REQUEST["username"];

if($username=="jyh") echo "<font color=red>用户名重复</font>"; else echo "<font color=red>用户名可用</font>"; ?>

O了,AJAX就是如此简单! 关于开发AJAX的常见关题,以及具体示例,本次时间有限,待我下回分解

你可能感兴趣的:(JavaScript,PHP,Ajax,应用服务器,浏览器)