10分钟学会Ajax

 

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

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

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

掌握原理，是理解这门技术，以致把它应用到极点的重要根基。

掌握应用，是我们的目标，所谓学以致用，概此理也。

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>";

?>

 

OK了，AJAX就是如此简单！