纯AJAX例子:读取数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>纯AJAX例子:读取数据</title>
</head>
<body>

<script type="text/javascript">

function ajaxCall()
{
     var xmlHttp;
     try{// Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();//实例化XMLHttpRequest对象
        }
     catch (e)
        {

      // Internet Explorer 5+
       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)
            {
                if (xmlHttp.status == 200)
                {
                    document.getElementById('txtResult').innerHTML = document.getElementById('txtUsername').value + xmlHttp.responseText;
                } else
                {
                    alert('请求出错.');
                        // there was a problem with the request,
                        // for example the response may be a 404 (Not Found)
                        // or 500 (Internal Server Error) response codes
                }

            }
          }
        xmlHttp.open("GET","data.txt",true);//异步请求数据
        xmlHttp.send(null);
}
</script>

<form style="text-align:left">
姓名: <input type="text" id="txtUsername"  style="width:400px;" />
<br />
测试:<input type="button" id="btn"   value="测试" onclick="ajaxCall();" style="width:400px;" />
<br />
结果: <textarea id="txtResult" style="width:400px;"></textarea>

</form>
</body>
</html>

posted @ 2011-04-09 11:02  smodi  阅读(275)  评论(0编辑  收藏  举报