Ajax学习笔记(一)

    对与任意一门语言的学习,我们大都是从基础开始,而对于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文件如下:

<html>
<head>
<script type="text/javascript">

//不同的浏览器创建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>

<form name="myForm">
用户名:<input type="text" name="username" οnkeyup="AjaxFunction();"/>
时间:<input type="text" name="time"/>
</form>
</body>
</html>

 

time.asp 文件如下:

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

 

写作时间:2010-02-2715:53:12 foxman209

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值