实例学习AJAX－基础1

2022-07-15 80酷酷网 80kuku.com

　　ajax从现在开始，我把自己学习AJAX的一些心得体会写出来。打算以短小的实例为主，用实例来说明问题。对于AJAX的了解肯定是需要不少理论的，这里我就不会多说了，网上有很多资料。一些好的资料，我会以参考或引用的方式给列出来。好了，首先来看看XML HTTP Request 的用法。看实例： 例1：显示本地文件内容两个文件： ajax1.html和hello.txt。

ajax1.html

<HTML>
<HEAD>
<TITLE>实例1：XMLHTTP的简单使用 </TITLE> <script type = "text/javascript">

function HelloAjax(localfile){
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.open("Get", localfile, false);
  xmlhttp.send(null);
  alert(xmlhttp.responseText);
}
</script> </HEAD> <BODY>
<INPUT TYPE="button" VALUE="实例1" >
</BODY> </HTML>

用记事本新建一个 hello.txt 文件，内容就一句：“ Hello AJAX! ”。将ajax1.html和hello.txt这两个文件放在同一目录下，在IE浏览器中打开ajax1.htm，点击“实例1”按钮，可以看到如下所示：

例2：获取网页源代码

ajax2.html

<HTML>
<HEAD>
<TITLE>实例2：获取网页源代码 </TITLE> <script type = "text/javascript">

function getSourceCode(){
  var myUrl = document.getElementById("urlInput").value;
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.open("GET", myUrl);
  xmlhttp.send(null);
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState == 4) {
    if (xmlhttp.status == 200) {
     document.getElementById("sourceCode").value = xmlhttp.responseText;
    }
   }
  }

}

</script> </HEAD> <BODY>
请输入URL: <INPUT TYPE="text" id="urlInput" value="" size="40" >
<INPUT TYPE="button" value="查看源代码" ></br>
<textArea id="sourceCode" height:200;"></textArea>
</BODY> </HTML>

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

说明：     为了简单，以上两个例子都只能在IE浏览器中打开，对于FireFox浏览器不适用。     在例1中，ajax1.html中的函数HelloAjax把从hello.txt中的内容用alert方法显示出来，我们所要了解的是它如何做到的。     关键是XML HTTP Request ，有篇经典的文章的可以参考《》，如果不习惯英文，可以看看相关的翻译《》，还有一个中文站点：，也是比较不错的。     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”,点击“查看源代码”按钮，可以看到也出现了乱码，注意到：其源代码中含有 <meta http-equiv=Content-Type content="text/html; charset=gb2312"> ，而 “http://blog.csdn.net/javamxj/”中含有 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ,这两个网页的编码是不同的。因为XMLHTTP默认将响应数据的编码定为UTF-8，所以csdn网站的数据被正确解析了，而百度的数据却不能正确解析。