AJAX的基本原理

最新推荐文章于 2025-03-26 17:59:42 发布

buliangniu

最新推荐文章于 2025-03-26 17:59:42 发布

阅读量137

点赞数

分类专栏： AJAX 文章标签： Ajax 浏览器应用服务器 Safari Firefox

AJAX 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的AJAX应用程序，该程序通过用户输入的用户名触发AJAX请求，并使用服务器返回的时间填充时间字段。文章详细解释了如何在不同浏览器中创建XMLHttpRequest对象，以及如何设置其关键属性以实现异步数据获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一个 AJAX 应用程序

首先，我们需要一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写。

AJAX - 浏览器支持

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

如需针对不同的浏览器来创建此对象，我们要使用一条 "try and catch" 语句。

此 HTML 文件名为 "testAjax.htm"（请注意这个 HTML 表单没有提交按钮！）：

<html>
<head>
    <title>AJAX 的基本原理</title>
</head>
<body>

    <script type="text/javascript">

function ajaxFunction()
 {
     var xmlHttp;
     
     try
        {
       // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
     catch (e)
        {

      // Internet Explorer
       try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
       catch (e)
          {

          try
             {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
          catch (e)
             {
             alert("您的浏览器不支持AJAX！");
             return false;
             }
          }
        }
     }
    </script>

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

例子解释：

首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。

然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。

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

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

XMLHttpRequest 对象的知识

在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

onreadystatechange 属性

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

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

readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
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 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。

<html>
<head>
    <title>AJAX 的基本原理</title>
</head>
<body>

    <script type="text/javascript">

        function ajaxFunction()
        {
            var xmlHttp;

            try
            {
                // Firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
            }
            catch (e)
            {

                // Internet Explorer
                try
                {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {

                    try
                    {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e)
                    {
                        alert("您的浏览器不支持AJAX！");
                        return false;
                    }
                }
            }

            xmlHttp.onreadystatechange = function()
            {
                if (xmlHttp.readyState == 4)
                {
                    document.myForm.time.value = xmlHttp.responseText;
                }
            }
            xmlHttp.open("GET", "time.asp", true);
            xmlHttp.send(null);

        }
    </script>

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

AJAX - 服务器端的脚本

现在，我们要创建可显示当前服务器时间的脚本。

responseText 属性会存储从服务器返回的数据。在这里，我们希望传回当前的时间。这是 "time.asp" 的代码：

<%
response.expires=-1
response.write(time)
%>

注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。