Ajax学习笔记（一）

最新推荐文章于 2025-08-10 21:10:58 发布

原创最新推荐文章于 2025-08-10 21:10:58 发布 · 617 阅读

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #javascript #服务器 #asynchronous #浏览器

对与任意一门语言的学习，我们大都是从基础开始，而对于Ajax的学习我们大可不必，因为它本身就不是一门新的语言，Ajax=Asynchronous javascript and xml。肤浅的说，它就是基本语言混合应用的结果，正由于这种混合不是随心所欲，任意勾兑的，才有了成系统，成规范的Ajax。

为此，我们一开始就从一个简单的Ajax应用开始，了解各种技术的作用，以及它们之间巧妙的衔接作用：

Ajax带给我们的：

通过 Ajax，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 javascript 可在不重载页面的情况与 Web 服务器交换数据
Ajax在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
Ajax可使因特网应用程序更小、更快，更友好。
Ajax是一种独立于 Web 服务器软件的浏览器技术。

了解Ajax的核心对象XMLHttpRequest:

我们有必要了解一下XMLHttpRequest对象的三个重要属性。

1.onreadystatechange属性

onreadystatechange属性存有处理服务器响应的函数

e.g:xmlHttp.onreadystatechange=function(){ 写上我们需要它做的事 }

2.readyState属性

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

状态0：请求未初始化（在调用open()之前）

1：请求已提出（调用send()之前）

2：请求已发送（可以从响应得到内容头部）

3：请求处理中（响应中通常有部分数据可用，但服务器还没有完成响应）

4：请求已完成（可以访问服务器并使用它）

3.responseText属性

可以通过responseText属性来取回由服务器返回的数据e.g:xmlHttp.responseText

Ajax简单示例：

test.html文件如下：

//不同的浏览器创建XMLHttpRequest对象的方法
function AjaxFunction()
{
var xmlHttp;
try{

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

//IE6.0+
               xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
         }catch(e){
                try{

//IE5.5+
                   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>
</head>
<body>