AJAX入门之使用 AJAX 修改页面文本内容（四）

红太狼 2022-09-23 08:12 229阅读 0赞

<html>
    <head>
    <script>
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      // XMLHttpRequest对象：用来实现异步通讯的组件对象，是Ajax的核心技术
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      // 初始化 XMLHttpRequest 对象
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
    	// HTTP 请求的状态，只能有5个可选的值
    	// 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete.
    	// 最重要的是readyState==4， 这时请求响应才真正完成，可以进行数据的操作。
    	// 这个在HTTP响应中的响应码,200代表响应成功。
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    	// 该属性代表的是从Server端返回的一个string格式的响应。
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    // 该方法会建立对服务器的调用，但并不会真正发送，只是准备.
    // 前两个参数是必须的，分别代表HTTP请求方法和所调用资源的URL
    // 第三个是一个 boolean值，默认true，代表请求异步.
    // 如果为false，前端浏览器对于用户响应的处理就会等待，直到从服务器返回响应为止。
    // 异步调用是AJAX的优势之一，本次传到前台的文件为 ajax_info.txt 。
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    // send 这个方法才是真正发送请求，如果上面的第三个参数设置为ture， 那么调用完后会立即返回，
    // 如果为 false 就会直到接收到响应才返回，但这并不会影响回调函数的多次执行，
    // 因为浏览器后台也是多线程的，同步只会阻止前端页面的响应。
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" οnclick="loadXMLDoc()">修改内容</button>
    
    </body>
    </html>