[AJAX系列]XMLHttpRequest请求 

 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>

 

posted @ 2016-09-17 16:55  霓裳梦竹  阅读(303)  评论(0)    收藏  举报