AJAX学习

一．什么是AJAX
AJAX = 异步JavaScript及XML（Asynchronous JavaScript and XML）
    AJAX不是一种新的编程语言，而是一种用来创建更好更快以及交互性更强的Web应用程序的技术。

优点：
1．通过AJAX，您的JavaScript可使用JavaScript的XMLHttpRequest对象在不重载页面的情况来直接与服务器进行通信，打破了传统的利用HTML表单向服务器GET或POST数据的方式。

2．AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

3．AJAX可使因特网应用程序更小、更快，更友好。

4．AJAX是一种独立于Web服务器软件的浏览器技术。

5．AJAX基于如下Web标准：JavaScript ,XML ,HTML ,CSS ,在AJAX中使用的Web标准已被良好定义，并被所有的主要浏览器支持。AJAX应用程序独立于浏览器和平台。

二．XMLHttpRequest 对象
通过使用XMLHttpRequest对象，web开发者可以做到在页面已加载后从服务器更新页面.
1．背景：
    在2005年AJAX被Google推广开来（Google Suggest）。Google建议使用XMLHttpRequest对象来创建一种动态性极强的web界面：当您开始在Google的搜索框中输入查询时，JavaScript会向某个服务器发出这些字词，然后服务器会返回一系列的搜索建议。

2．支持的浏览器
XMLHttpRequest对象得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+以及Netscape 7。

3．XMLHttpRequest对象的三个重要的属性

onreadystatechange属性
onreadystatechange属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对onreadystatechange属性进行设置：

xmlHttp.onreadystatechange=function()
  {
  // 我们需要在这里写一些代码
  }

readyState 属性
readyState 属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行。
这是readyState属性可能的值：
状态 描述
0 请求未初始化
1 请求已提出
2 请求已发送
3 请求处理中
4 请求已完成

我们要向这个onreadystatechange函数添加一条If语句，来测试我们的响应响应是否已完成（意味着可获得数据）：

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 从服务器的response获得数据
    }
  }

responseText 属性
由服务器返回的数据可以通过responseText属性来取回。

在我们的代码中，我们将把时间文本框的值设置为等于responseText：

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }

三．如何开发AJAX应用
一个AJAX应用的例子
1．GetXmlHttpObject函数说明

<script type="text/javascript">
function GetXmlHttpObject() ()
 {
 var xmlHttp;
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {
  // Internet Explorer 6.0+
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {
      try
         {
       //Internet Explorer 5.5+
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
 }
</script>

1)首先声明一个保存XMLHttpRequest对象的xmlTttp变量。

2)然后使用XMLHttp=new XMLHttpRequest()来创建此对象。这条语句针对Firefox、Opera以及Safari浏览器。

3)假如失败，则尝试针对Internet Explorer 6.0+的

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")

4)假如同时不成功，则尝试针对Internet Explorer 5.5+的

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")

5)假如这三种方法都不起作用，那么这个用户所使用的浏览器已经太过时了，他或她会看到一个声明此浏览器不支持AJAX的提示.

  注释：上面这些浏览器定制的代码很长，也很复杂。不过，每当您希望创建XMLHttpRequest对象时，这些代码就能派上用场，因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的主流浏览器：Internet Explorer、Opera、Firefox以及Safari。

2．stateChanged函数
   当xmlHttp.readyState的状态发生变化是激发此函数，将服务器端响应结果写到time文本框里

<script type="text/javascript">
function  stateChanged (){
if(xmlHttp.readyState==4)
        {
         document.myForm.time.value=xmlHttp.responseText;
        }
}</script>

3．ajaxTest函数
  当键盘抬起时激发此函数

<script type="text/javascript">
function ajaxTest ()
{
   xmlHttp=GetXmlHttpObject()
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
}
</script>

要想把请求发送到服务器，需要使用open()方法和send()方法。
1）open()方法需要三个参数：第一个参数定义发送请求所使用的方法（GET还是POST），第二个参数规定服务器端脚本的URL(向服务器发请求的URL)，第三个方法规定应当对请求进行异步地处理。

2）send()方法可将请求送往服务器。


4．页面

<form name="myForm">
用户: <input type="text" name="username"  onkeyup="ajaxTest();" />
时间: <input type="text" name="time" />
</form></body>
</html>

到此，就已经完成了一个简单的AJAX的例子。

评论

1 楼 倪现军 2012-01-31  

对我很有用，谢啦！