AJAX - 创建 XMLHt... 登录

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 对象

XMLHttpRequest对象是Ajax技术的核心。

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

不刷新页面就和服务器进行交互是Ajax最大的特点。这个重要的特点主要归功于XMLHttpRequest对象。使用XMLHttpRequest对象使得网页应用程序像windows应用程序一样,能够及时响应用户与服务器之间的交互,不必进行页面刷新或者跳转,并且能够进行一系列的数据处理,这些功能可以使用户的等待时间缩短,同时也减轻了服务器端的负载。

创建 XMLHttpRequest 对象

有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

variable=new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject ::

<!DOCTYPE html>
<html>
<head>
<script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
</script>
</head>
<body>
    <div id="myDiv"><h2>使用AJAX</h2></div>
    <button type="button" onclick="loadXMLDoc()">点击修改</button>
</body>
</html>


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> 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> </head> <body> <form name="myForm">   用户: <input type="text" name="username" /> <br>   时间: <input type="text" name="time" /> </form> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送