AJAX 请求数据

来源:互联网 发布:导航端口和波特率 编辑:程序博客网 时间:2024/06/06 08:26

1.布局

 <h2>ajax</h2>
    <button type="button" onclick="LoadText()">请求数据</button>
    <div id="mydiv"></div>



2.js函数

<script type="text/javascript">
        function LoadText()
        {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "/ajax/HtmlPage1.html", true);
            xmlhttp.send();
      
        }
       
    </script>


3.前提是路径下有"/ajax/HtmlPage1.html", 这个html

4.全部html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function LoadText()
        {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "/ajax/HtmlPage1.html", true);
            xmlhttp.send();
      
        }
       
    </script>
</head>
<body>
    <h2>ajax</h2>
    <button type="button" onclick="LoadText()">请求数据</button>
    <div id="mydiv"></div>
</body>
</html>


0 0