AJAX学习笔记

 

AJAX，即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，中文译名----阿贾克斯。AJAX不是一个缩写词，而是由Jesse James Gaiiett创造的名词，是一种创建交互式网页应用的网页开发技术（From Baidu）。

         然后说说我学习后的理解。

AJAX，是一种技术的融合的技术，在Web应用中，在客户端引入更多的人性化和桌面应用程序的体验。举个简单的例子，Google搜索页面，当输入框输入关键词时，输入框下面自动出现一个类似下拉框的东西，显示一些和用户输入的关键词关联的信息。这就是AJAX技术实现的。类似的例子很多，用户注册时用户名检测等等。AJAX为Web开发带来了新的活力，使得网页不在如传统的“请求----应答”那么死板。

AJAX技术，包括：

1.       核心对象,异步请求对象。

2.       JavaScript，AJAX技术的代码实现。

3.       CSS+DIV，更美观的将服务器返回的信息呈现在网页上。

4.       DOM组件，通过Javascript调用DOM组件，实现数据显示在网页。

5.       HTTP，这个么，网页都得用，没它没法玩。

6.       XML，AJAX程序在浏览器和服务器间实现数据传输，类似一种运输工具。

异步请求对象，实现了客户端和服务器的数据交互。就像，在通信学习中，需要一个Socket对象，建立连接后，可以通信。在AJAX中，异步请求对象从Web页面获取信息后，发送给服务器处理，而用户不需要等待处理结果返回就可以继续操作，所以称之为异步，也就是不同于Http的“请求----应答”模式。在代码实现中，很简单。不过，要注意的就是不同浏览器支持的异步请求对象不同。

AJAX三部曲之一，异步请求对象的创建：

var xmlHttp; function createRequest() {     if (window.XMLHttpRequest) {         request = new XMLHttpRequest(); //Chrome,FireFox,Oprea,Safari     } else if (window.ActiveXObject) {         try {             request = new ActiveXObject("Msxml2.XMLHTTP");//IE5         } catch (e) {             try {                 request = new ActiveXObject("Microsoft.XMLHTTP");//IE5+,IE6及更高版本             } catch (e) {}         }     }  }

这里简单给出常用的几个异步请求对象创建的代码实现。

AJAX三部曲之二，回调函数：

function processResult(){          if(request.readyState==4&&request.status==200){               ....          }      }

回调函数，我理解的相当于一个监听器。异步请求对象有这样的两个属性：readyState、status。readyState，即异步请求对象的状态，有五个值：

0，（uninitialized），未初始化，即还没有调用send（）方法；

1，（loading），载入，以调用了森达（）方法，请求正在发送；

2，（loaded），完成载入，send（）方法执行完毕，已接收到响应内容；

3，（inreractive），交互，解析响应内容；

4，（completed），完成，响应内容解析完成，可以使用了；

而，status属性，我们只用关注200的值，相当于一切OK了。代码中可以看到，if中的判断条件成立时，….的内容就是对响应的内容进行提取，然后显示在网页上。之所以说是监听器，因为这两个属性的不同值，异步请求对象建立后，它的这两个属性的值在不停的改变，只有当readyState==4&&status==200 ，可以继续。回调的含义就在于，异步请求对象的readyState和status的值发生变化，就调用该函数，判断是否OK。在代码实现中，没有什么难的东西，都是死流程。

AJAX三部曲之三，发送：

function sendRequest(){        createRequest();        request.onreadystatechange=processResult;        request.open("GET",url,true);        request.send(null);     }

创建对象，绑定回调函数，发送。简单的几行代码，可谓酣畅淋漓，但是后台已经在做很多事情了。值得说的一点儿就是，open（）方法，第一个参数可以是GET，POST，表示发送请求的方式；第二个是url，即请求发送到哪里，其实就是后台进行数据处理的地方，servlet，这里的url中可以带上相应的值，如：”AutoRefreshServlet?count=”+count，这里带上值以后，和servlet中名值对是一样的；然后第三个参数true表示在服务器异步处理该请求，反之false。现在，就可以发送了，send（null）是必须的，相应的数据在url中已经包含了，但是这一句依然不可以省略。还要说明的就是，回调函数的绑定，函数名后面不需要圆括号，切忌。

到这里，异步请求对象创建，绑定回调函数，发送，就完成了AJAX主体流程。

然后接着说，Javascript。AJAX技术的实现，依赖于Javascript语言，前面的代码已经可以说明这个问题了。无论异步请求的创建，回调函数绑定，请求发送，操作DOM组件改变网页内容，都是有它完成的，就像一种AJAX的承载。由于Javascript是一种弱类型语言，没有很强的规则，所以在代码书写中，总有这样那样的问题，而且都是很隐蔽的问题，不能很直观的察觉到，说实话，比较棘手。但是，问题总有解决的办法，细心一点儿就好了，这个没有捷径的。说来说去还是经验，多写才行。说起来很是简单，细心，就两个字，写出错误了就不那么简单了。所谓大道至简就是这个意思吧。

至于3、4、5的东西，不用多说了，现在搞Web这些东西基本是离不开的。所以，还是说说XML。XML，Extensible Markup Language ，即可扩展标记语言。它的强大之处在于可扩展、跨平台，在很多结构化数据处理中使用很多。在AJAX技术中，我们如何使用的呢。简言之，就是后台处理的数据，我们用xml标签包装起来，然后传送xml文档到客户端，客户端也很容易解析文档包含的信息。其实，就是把信息包装成xml文档在网络上传输。当信息量很大时，数据很多，它的优点就体现出来了。

 

后记：那天上课，没几个人来，结果熊哥出其不意的要让我上台讲AJAX，当时就懵了哈。主要是我前天上了课，然后也没怎么看，代码倒是看着书走了两个例子。没办法啊，两点50给我说三点要开讲，只好硬着头皮就上了。最终呢，前前后后的也扯了一个小时，都不知道我怎么扯过来的。不过，他们听的怎样我不很知道，但是我讲了以后知道了很多，好多细节的问题一下子明白了，而且印象深刻。不错。