1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>修改内容</title> 6 <!-- 7 所有现代浏览器均支持XMLHttpRequest对象（IE6 IE5使用ActiveXObject） 8 XMLHttpRequest用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 9 创建XMLHttpRequest对象 10 IE7+ FireFox chrome Opera Safari 11 xmlhttp = new XMLHttpRequest(); 12 IE5 IE6 13 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 14 15 --> 16 <script> 17 function loadXMLDoc() { 18 var xmlhttp; 19 if (window.XMLHttpRequest) { 20 //code for IE7+ FireFox chrome Opera Safari 21 xmlhttp = new XMLHttpRequest(); 22 } else { 23 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 24 } 25 /** 26 * 当使用async=true时，请规定在想赢处于onreadystatechange事件中的就绪状态时执行的函数 27 * 如果async=false时就不必使用onreadystatechange函数，将代码放到send()语句之后即可 28 * xmlhttp.open("GET","ajax_info.txt",false); 29 *xmlhttp.send(); 30 *document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 31 * */ 32 xmlhttp.onreadystatechange = function () { 33 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 34 document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 35 } 36 } 37 //open(method,url,async): 38 //method :规定请求的类型 GET或POST 39 //url : 文件在服务器上的位置 40 //async:true为异步 false为同步 41 xmlhttp.open("GET", "../ajax_info.txt", true); 42 //send(string)将请求发送到服务器 带有string参数的仅用于POST请求 43 /** 44 * 与POST想比GET更简单也更快，并且在大部分情况下都能使用 45 * 然而在以下情况下请使用POST请求： 46 * 无法使用缓存文件（更新服务器上的文件或数据库） 47 * 向服务器发送大量数据（POST没有数据量限制） 48 * 发送包含未知字符的用户输入时POST比GET更稳定也更可靠 49 * 使用POST请求时如果需要HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头然后在send()方法中规定希望发送的数据 50 * xmlhttp.open("POST","ajax_test.html",true); 51 *xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 52 *xmlhttp.send("fname=Henry&lname=Ford"); 53 * sendRequestHeader(header,value) header:规定头的名称 value：规定头的值 54 * 55 * */ 56 57 xmlhttp.send(); 58 59 } 60 </script> 61 </head> 62 <body> 63 <div id="myDiv"> 64 <h2>使用Ajax修改该文本的内容</h2> 65 </div> 66 <button type="button" onclick="loadXMLDoc()">修改内容</button> 67 </body> 68 </html>