Ajax基础教程：Ajax入门讲解（含实例）

在网站中的使用让很多新手羡慕，他的优势这里不再阐述，本文以实例讲解Ajax基础，带你进入Ajax世界。

什么是AJAX? 它的优点劣势是什么？
Asynchronous JavaScript and XML（异步和XML），是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合，目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。关于它的概念，止于此。想了解更多，请前往：

优点很明显，利于用户体验，不会打断用户的操作，在不刷新页面的情况下更新内容，减小服务器压力也是它很硬性的一个优点；而缺点，除了倍受追捧的SEO问题，安全问题、前进后退（这个虽然可以用其他方法解决，但AJAX本身的机制还是没变）、破坏程序的异常机制以及对新兴手持设备支持不完美的问题都是它现存的一些缺点。人无完人，AJAX也是如此，我们并不能因为它有缺点而摒弃它。
什么地方需要AJAX?
其实这是一个太宽泛的问题，各人各项目都有不同的用处，依我的经验与理解，AJAX应该用于小面积更新数据而不希望整个页面刷新的情况下使用。比如对用户名或者注册邮箱等数据判断、内容选项卡内容、弹出的登录注册窗口以及用户提交信息后的反馈信息等等。
实践出真知！

首先我们看一下效果图：

 
崇尚思考加实践，我坚信这是深入任何一门技术的必备法宝。下面，我就以一个常用的验证用户是否使用的实例，浅尝辄止的讲解一下基础的AJAX。验证用户名这种数据判断，不用多说了，会一点点前端的人都知道是必须的。最传统的模式可能是输入信息，然后用户点提交后alert出一个窗口，告诉用户 XXX用户名已被注册，请重新输入！我讨厌极丑的alert框！我想大多用户也是一样。此时，AJAX就可以华丽登场了。当用户输入完名字后，在表单外任何地方点一下（失去焦点），AJAX就迅速把用户输入的信息反馈到服务器端判断，并迅速返回一个信息告知用户输入的昵称是否可用。如此，我们需要一个前台的输入表单，代码如下：

1 <form action="#" method="post" name="iform">

2 <p><label for="nickname">用户名：</label>

3 <input name="nickname" id="nickname" placeholder="在这里输入用户名" type="text"><span id="tips"></span></p>

4 </form>

另外，我们还需要一个判断输入昵称是否存在的后端页面（本文以PHP为例，这部分不用细究）:

01 ...

02 if(isset($_GET['entryname'])){

03     $entryname=$_GET['entryname'];

04 }else{

05     $entryname='DATA NULL';

06 }

07 $sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);

08 $res=$iajax->query($sql);

09 //sleep只是为了展示readState==1时的效果

10 sleep(1);

11 if(($res->num_rows)>0){

12     echo "抱歉！此昵称已存在 :(";

13 }else{

14     echo "恭喜！此昵称可注册 :)";

15 }

16 ...

如此，万事俱备，只欠东风，剩下的就交给AJAX来处理了。
XMLHttpRequest，不得不提的一个对象，AJAX最核心也是最底层的对象。可悲哀的是，它是W3C的一个标准，但微软IE一直很自我（微软 IE）。怎么办？当然是用一个方法和谐掉它们。微软IE支持ActiveXObject(‘Microsoft.XMLHTTP’)对象，这样就简单了：

01 //兼容的XMLHttpRequest对象

02 IXHR: function(){

03     if(window.ActiveXObject){

04             XHR=new ActiveXObject('Microsoft.XMLHTTP');

05         }else if(window.XMLHttpRequest){

06             XHR=new XMLHttpRequest();

07         }else{

08             return null;

09         }

10 }