<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" onclick="loadXMLDoc()">修改内容</button> </body> </html>