AJAX入门实例

spllot

首先简单介绍一下AJAX以及其相关的知识点。
AJAX
AJAX是Asynchronous JavaScript and XML的缩写，即异步的Javascript和XML。其核心是一个称作为XMLHttpRequest的对象。
XMLHttpRequest
XMLHttpRequest是一个JavaScript对象，该对象有一些属性和方法：
open()：建立到服务器的新请求。
send()：向服务器发送请求。
abort()：退出当前请求。
readyState：提供当前 HTML 的就绪状态。
status:提供请求的状态码。
responseText：服务器返回的请求响应文本。
onreadystatechange：用来设置请求完成后的回调方法。
Http就绪状态
Http就绪状态表示请求的状态或情形。它用于确定请求是否已经开始，是否得到了响应或者请求/响应模型是否已经完成。在AJAX应用程序中有以下五种就绪状态：
0：请求没有发出（在调用 open() 之前）。
1：请求已经建立但还没有发出（调用 send() 之前）。
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。
Http状态码
Http状态码可以参见我的博客文章“Http状态码”，我们期望的返回状态码为200。
实例
1.创建XMLHttpRequest实例。
通常的创建方式为(JS代码)：
var request = new XMLHttpRequest();
注意：一些较老的浏览器是不支持XMLHttpRequest对象的，在创建的时候需要捕获异常。
另外，由于Microsoft是支持AJAX的，但是其对XMLHttpRequest版本有不同的称呼。如果是较新版本的IE，则需使用对象Msxml2.XMLHTTP,而较老版本的IE则使用Microsoft.XMLHTTP对象。相应的创建代码分别如下：
var request = new ActiveXObject("Msxml2.XMLHTTP");var request = new ActiveXObject("Microsoft.XMLHTTP");
为了保证各浏览器的兼容以及定位错误的来源，可以用以下代码来创建XMLHttpRequest对象：
try{   request = new XMLHttpRequest();}catch(trymicrosoft)   {    try    {    request=new ActiveXObject("Msxml2.XMLHTTP");    }catch(othermicrosoft)    {             try             {    request=new ActiveXObject("Microsoft.XMLHTTP");     }catch(failed)     {                    alert("initializing failed");             }             }        }
2.打开请求。
调用open()方法打开一个请求。例如：
request.open("GET", "http://spllot.iteye.com/admin", true);
open方法有五个参数，最后两个可以不用。
第一个参数值表示请求的方式为“GET”方式；
第二个参数值表示请求的URL；
第三个参数值表示采用异步的方式进行请求；
（第四个参数用来设置请求的用户名；
第五个参数用来设置请求的密码）。
3.设置回调方法。
即当请求成功结束后应该执行的方法。例如：
request.onreadystatechange=function(){if(request.readyState==4){if(request.status==200){   alert(request.responseText);}}
这段代码的意思是：当HTTP就绪状态为4,且HTTP状态码为200（即请求成功）时，返回请求的内容。
4.发送请求。
request.send();
注意：设置回调方法一定要在发送请求之前完成。
完整的一个示例代码如下：
<script language="javascript" type="text/javascript">try {  request = new XMLHttpRequest();} catch (trymicrosoft) {  try {    request = new ActiveXObject("Msxml2.XMLHTTP");  } catch (othermicrosoft) {    try {      request = new ActiveXObject("Microsoft.XMLHTTP");    } catch (failed) {     alert("Error initializing XMLHttpRequest!");    }  }} request.open("GET", "http://spllot.iteye.com/admin", true); request.onreadystatechange=function() { if (request.readyState==4) {if(request.status==200){alert(request.responseText);} } } request.send();</script>
在EditPlus中新建一个文件，将该代码拷贝进去，然后以网页的形式查看，则得到请求的内容如下：