Ajax学习心得

 

其实吧，对于Ajax这个东西，做WEB应用开发的同学都比较熟悉（据很多C语言的同学反映，他们都不屑于AJAX这个东西，让我很惭愧），而且很多框架性的东西都对它都有一个很良好的支持。在这里也不能写的太深入，要是深入了，没准就错了，到时候囧大了。

其实对于整个AJAX的核心，其实就是对XMLHttpRequest对象的操作，包括它提供的一些方法，属性的了解。基本上对XMLHttpRequest这个对象熟练了，那么AJAX应用也就得心应手了。

首先是创建XMLHttpRequest对象，目前很多浏览器都支持直接 new XMLHttpRequest() 来获取该对象，微软IE7/8/9也同样可以使用该方法来获取。但是IE6/5及以下版本并不能使用该方法来获取XMLHttpRequest对象。我们使用window.XMLHttpRequest判断的时候，在IE6/5返回的是一个null，所以我们在IE6/5及以下版本的IE中使用另外一种方式获取Ajax操作对象：new ActiveXObject("Microsoft.XMLHttp")。这也是我们每次应用AJAX的时候，创建的时候为什么使用if、else去判断一下的缘故。

这里说一个小细节吧。一般很多时候我们都喜欢把window.ActiveXObject判断写在前面，主要是因为IE7/8/9是特殊的包含ActiveXObject、XMLHttpRequest对象的浏览器，而ActiveX控件是微软的一个IE产物（据说这个东西在2008年被评为微软十大垃圾软件之首），碰到IE浏览器，就可以先用new ActiveXObject() 方式创建AJAX对象。国内很多WEB应用开发商都很喜欢应用ActiveX控件，比如说腾讯的QQ快捷登陆、网银、支付宝、财付通等。这也是为什么在Firefox、Chrome、Opera浏览器无法使用网银、支付宝、财付通的一个原因。

创建完了XMLHttpRequest对象之后，我们需要使用open来初始化一个HTTP请求。然后应用send发送请求。这里我发现一个大家应用AJAX常犯的毛病，那就是在我们声明请求URL的时候，会直接把请求的参数包含到URL里面，如：http://www.baidu.com?action=search&name=java&method=post;而在send里面则直接把null传进去就一了百了了。

我之前也是这种习惯，但是有次经验，我发现我的AJAX请求失效了，得到的结果并不是我所希望的。找了半天(半天只是习惯性用词，估计有一天)，百度告诉我：Internet Explorer 有2048 个字符的最大URL长度限制，此限制适用于 POST 请求和 GET 请求url。然后哥就蒙掉了。

于是乎把AJAX请求URL里面的参数整理出来，封装到一个隐藏变量里面，通过设置的方式提交请求。一切OK。这里的经验分享是希望大家在应用AJAX的时候，尽量养成通过send的方式传递参数，或者设置表单的隐藏域，尤其是那种ID、复选框、文本域的。

其他的话，就是一个中文转码和回调函数的说明了。转码问题大家参考JSP中文转码。我听到一个传说，说是现在我们直接在文本头定义UTF-8/GBK/GB2312这样的编码方式就能解决中文显示及乱码问题，事实上这些哥协议都是人家微软帮忙实现的。这个传说是刚毕业的时候一个前辈说的，我找了很多资料，也没有关于这反面的新闻，所以不知道真假如何，希望权威人士出来指正一下。

至于回调函数，这里在公司的文档里面学到了一个JS很函数(不知道是函数还是属性)：attachEvent。它的使用方式是：obj.attachEvent("eventType",fn)，当在obj对象上发生eventType事件的时候，会触发fn函数。

最后，我们来复习一下Ajax调用的一个过程吧。

首先声明一个全局的变量xmlHttp用于存放XMLHttpRequest对象，之后就可以通过IE判断来获取XMLHttpRequest对象，接着使用open初始化HTTP请求，同时需要在此指定onreadystatechange事件句柄的回调函数，然后通过send发送请求。在回调函数中我们需要使用xmlHttp.responseText来获取执行的结果。执行结果的判断需要使用到readyState、status属性(readyState==4、status==200)才能知道请求是否完成、是否成功。最后执行我们需要处理的东西。

哦，我比较喜欢在readyState不等于4的时候显示一个gif图片，以显示正在执行Ajax请求，而且还是美女图片……嘎嘎。