实例学习AJAX－基础1

从现在开始，我把自己学习AJAX的一些心得体会写出来。打算以短小的实例为主，用实例来说明问题。对于AJAX的了解肯定是需要不少理论的，这里我就不会多说了，网上有很多资料。一些好的资料，我会以参考或引用的方式给列出来。

 

    好了，首先来看看XML HTTP Request 的用法。看实例：

 

 

例1：显示本地文件内容

 

两个文件： ajax1.html和hello.txt。

ajax1.html

 

   用记事本新建一个 hello.txt 文件，内容就一句：“ Hello AJAX! ”。

 

   将ajax1.html和hello.txt这两个文件放在同一目录下，在IE浏览器中打开ajax1.htm，点击“实例1”按钮，可以看到如下所示：

 

 

 

例2：获取网页源代码

 

ajax2.html

请输入URL:

 

在IE浏览器中打开这个网页，点击“查看源代码”，如果网络正常，应该如下显示。

 

---

说明：

 

    为了简单，以上两个例子都只能在IE浏览器中打开，对于FireFox浏览器不适用。

 

    在例1中，ajax1.html中的函数HelloAjax把从hello.txt中的内容用alert方法显示出来，我们所要了解的是它如何做到的。

 

    关键是XML HTTP Request ，有篇经典的文章的可以参考《 Using the XML HTTP Request object》，如果不习惯英文，可以看看相关的翻译《 [翻译]使用 XML HTTP Request 对象(2006.1) 》，还有一个中文站点： XMLHttp中文参考，也是比较不错的。

 

    IE中使用ActiveX控件方式创建XmlHttp对象，如  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  如果你使用的是IE6，可以使用XMLHTTP的更高级版本，如   "Msxml2.XMLHTTP.7.0",  "Msxml2.XMLHTTP.6.0"等等，版本越高，也许速度更快、性能更好，反正具体如何我不清楚。

 

    而在非IE的浏览器中，是用 new XMLHttpRequest() 来创建一个对象的（据说在IE 7中，XMLHTTP 将作为本地 Javascript 对象，也许也可以这样创建了）。   

    

    在创建一个XMLHttp对象后，就可以使用它的open方法了，其参数为 open( http-method, Url, boolAsync, userID, password)。前两个是必要的，后两个是可选的(在服务器需要进行身份验证时提供)。参数的含义如下所示：

http-method：  HTTP的通信方式，比如GET, HEAD, POST, PUT, DELETE, CONNECT等，常用GET，POST。
url：   接收XML数据的服务器的URL地址。URL可带QueryString
boolAsync：  一个布尔标识，说明请求是否为异步的。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作， 默认为 true。
userID:  用户ID，用于服务器身份验证
password: 用户密码，用于服务器身份验证 

 

 

    在 例1中，使用的Get方式，获取的url是一个本地文件，使用的是同步方式。 注意：一般很少使用同步方式，如果处理的是本地文件且文件不大，也可以使用同步方式，但如果处理的是网络上的文件，网络性能不好的话，看起来就像死机一样。

 

 

 

    在 例2中，使用的还是Get方式，获取的是一个网页文件的源代码，使用的异步方式。

    

    因为使用的是异步方式，浏览器向服务器发出请求后，不必等待服务器的响应。那么在服务器完成请求后，就需要告诉请求者（浏览器）工作已经完成。这种方法的使用就引出了下面这个函数。

 

    “xmlhttp. onreadystatechange=function(){...}”是关键，onreadystatechange 属性的字面上的意思就是状态改变时准备做什么，它将注册一个回调函数，一旦请求完成就会调用该函数。这个函数是在异步方式下使用的，如果采用的同步方式，那么就没有必要使用这个函数了。

    

    再看看如何处理服务器的相应。当xmlhttp的就绪状态等于4，并且Http状态码等于200时，将从服务器中得到的响应以文本方式显示在网页的TextArea中。

 

readyState的五种状态：

  0：请求没有发出（在调用 open() 之前）。 
  1：请求已经建立但还没有发出（调用 send() 之前）。
  2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
  3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
  4：响应已完成，可以访问服务器响应并使用它。
 

一些常见的状态码为：

  200 - 服务器成功返回网页
  404 - 请求的网页不存在
  503 - 服务器超时  

 

 

 注：

   由于使用的是Get方式提交数据，可以通过URL本身发送数据，这里send()方法的参数为null或“”，如果使用Post方式提交数据，那么send()方法的参数就是要提交的数据。

 

 

 

编码

   现在，hello.txt文件中增加一行汉字，如：“欢迎来到javamxj的Blog”，保存。刷新ajax1.html，然后点击“实例1”按钮，这个时候弹出的窗口中的第二行应该是乱码。用“记事本”打开hello.txt，点击“文件 －>另存为”，注意这时弹出的“另存为”窗口中的文件编码应该是“ANSI”，现在要改变它，选择编码为“Unicode”或“UTF-8”，保存。然后再次点击“实例1”按钮，可以看到汉字已经正确显示出来了。

 

 

   将ajax2.html中的输入URL改为“http://www.baidu.com”,点击“查看源代码”按钮，可以看到也出现了乱码，注意到：其源代码中含有 gb2312"> ，而 “http://blog.csdn.net/javamxj/”中含有 utf-8" /> ,这两个网页的编码是不同的。因为 XMLHTTP默认将响应数据的编码定为UTF-8，所以csdn网站的数据被正确解析了，而百度的数据却不能正确解析。