• AJAX 学习笔记 2017_05_04

    1、使用 AJAX 修改该文本内容

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             //    IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码
18             xmlHttpRequest = new XMLHttpRequest();
19         } else{
20             //    IE6,IE5 浏览器执行代码
21             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
22         }
23         xmlHttpRequest.onreadystatechange = function(){
24             /* alert(xmlHttpRequest.status); */
25             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
26                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
27             }
28         }
29         xmlHttpRequest.open("get","demo01?t="+Math.random(),true);
30         xmlHttpRequest.send();
31     }
32 </script>
33 </head>
34 <body>
35     <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div><br>
36     <button type="button" onClick="loadXMLDoc()">修改内容</button>
37 </body>
38 </html>
    View Code

    2、用get方式出现浏览器缓存问题：url后面加上一个随机函数，改变每次请求的路径： 1 ?t="+Math.random() 

    　　 1 t="+new Date().getTime() 也可以，只要是每次请求都会变化的值。

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         
28         xmlHttpRequest.open("get","demo02?t="+Math.random(),true);
29         xmlHttpRequest.send();
30     }
31 </script>
32 </head>
33 <body>
34     <h2>您可能得到的是缓存的结果。为了避免这种情况，请向 URL 添加一个唯一的 ID</h2>
35     <button type="button" onClick="loadXMLDoc()">请求数据</button>
36     <p>多次点击按钮，可以看到时间变化。</p>
37     <div id="myDiv"></div>
38 </body>
39 </html>
    View Code

    3、 GET 方法发送信息

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         
28         xmlHttpRequest.open("get","demo03?fname=Shawn&lname=Yang&t="+Math.random(),true);
29         xmlHttpRequest.send();
30     }
31 </script>
32 </head>
33 <body>
34     <h2>如果您希望通过 GET 方法发送信息，请向 URL 添加信息</h2>
35     <button type="button" onClick="loadXMLDoc()">请求数据</button>
36     <p>多次点击按钮，可以看到时间变化。</p>
37     <div id="myDiv"></div>
38 </body>
39 </html>
    View Code

    4、POST 请求

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         
28         xmlHttpRequest.open("post","demo04",true);
29         xmlHttpRequest.send();
30     }
31 </script>
32 </head>
33 <body>
34     <h2>一个简单 POST 请求</h2>
35     <button type="button" onClick="loadXMLDoc()">请求数据</button>
36     <p>多次点击按钮，可以看到时间变化。</p>
37     <div id="myDiv"></div>
38 </body>
39 </html>
    View Code

    5、使用 setRequestHeader() 来添加 HTTP 头

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         
28         xmlHttpRequest.open("post","demo05",true);
29         xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
30         xmlHttpRequest.send("fname=Shawn&lname=Yang");
31     }
32 </script>
33 </head>
34 <body>
35     <h2>如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据</h2>
36     <button type="button" onClick="loadXMLDoc()">请求数据</button>
37     <p>多次点击按钮，可以看到时间变化。</p>
38     <div id="myDiv"></div>
39 </body>
40 </html>
    View Code

    6、使用 async=true

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         
28         xmlHttpRequest.open("get","ajax_info2.txt?t=" + Math.random(),true);
29         xmlHttpRequest.send();
30     }
31 </script>
32 </head>
33 <body>
34     <h2>当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数</h2>
35     <button type="button" onClick="loadXMLDoc()">修改内容</button>
36     <div id="myDiv"></div>
37 </body>
38 </html>
    View Code

    7、async=false

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.open("get","ajax_info2.txt?t=" + Math.random(),false);
23         xmlHttpRequest.send();
24         //alert(xmlHttpRequest.responseText);
25         document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
26     }
27 </script>
28 </head>
29 <body>
30     <p>我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。</p>
31     <p>请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。</p>
32     <p>注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可</p>
33     <button type="button" onClick="loadXMLDoc()">修改内容</button>
34     <div id="myDiv"></div>
35 </body>
36 </html>
    View Code

    8、来自服务器的响应并非 XML，请使用 responseText 属性

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         
28         xmlHttpRequest.open("get","ajax_info2.txt?t=" + Math.random(),false);
29         xmlHttpRequest.send();
30     }
31 </script>
32 </head>
33 <body>
34     <p>如果来自服务器的响应并非 XML，请使用 responseText 属性。</p>
35     <p>responseText 属性返回字符串形式的响应。</p>
36     <button type="button" onClick="loadXMLDoc()">修改内容</button>
37     <div id="myDiv"></div>
38 </body>
39 </html>
    View Code

    9、来自服务器的响应是 XML，而且需要作为 XML 对象进行解析

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function loadXMLDoc(){
15         var xmlHttpRequest;
16         var txt,x,i;
17         var xmlDoc;
18         if(window.XMLHttpRequest){
19             xmlHttpRequest = new XMLHttpRequest();
20         } else {
21             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
22         }
23         
24         xmlHttpRequest.onreadystatechange = function(){
25             /* alert(xmlHttpRequest.readyState); */
26             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
27                 xmlDoc = xmlHttpRequest.responseXML;
28                 txt = "";
29                 x = xmlDoc.getElementsByTagName("ARTIST");
30                 for(i=0;i<x.length;i++){
31                     txt = txt + x[i].childNodes[0].nodeValue + "<br>";
32                 }
33                 document.getElementById("myDiv").innerHTML = txt;
34             }
35         }
36         
37         xmlHttpRequest.open("get","cd_catalog.xml?t=" + Math.random(),true);
38         xmlHttpRequest.send();
39     }
40 </script>
41 </head>
42 <body>
43     <p>如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。</p>
44     <button type="button" onClick="loadXMLDoc()">修改内容</button>
45     <div id="myDiv"></div>
46 </body>
47 </html>
    View Code

    10、用户在输入框中键入字符时，网页与 web 服务器进行通信

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function showHint(o){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("txtHint").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         //传递 hint 参数
28         //t 参数防止客户端缓存
29         xmlHttpRequest.open("get","gethint?hint="+o+"&t="+Math.random(),true);
30         xmlHttpRequest.send();
31     }
32 </script>
33 </head>
34 <body>
35     <p>用户在输入框中键入字符时，网页如何与 web 服务器进行通信： 请在下面的输入框中键入字母（A - Z）：</p>
36     <p><b>在输入框中尝试输入字母 a:</b></p>
37     <p><input type="text" id="txt1" onkeyup="showHint(this.value)"/></p>
38     <p>提示信息：<span id="txtHint"></span></p>
39 </body>
40 </html>
    View Code

    11、通过 AJAX 从数据库（没连数据库，模拟了类似的功能）读取信息

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     function showCustmer(o){
15         var xmlHttpRequest;
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = function(){
23             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
24                 document.getElementById("txtHint").innerHTML = xmlHttpRequest.responseText;
25             }
26         }
27         //传递 hint 参数
28         //t 参数防止客户端缓存
29         xmlHttpRequest.open("get","getcustomer?q="+o+"&t="+Math.random(),true);
30         xmlHttpRequest.send();
31     }
32 </script>
33 </head>
34 <body>
35     <p>下面的例子将演示网页如何通过 AJAX 从数据库读取信息： 请在下面的下拉列表中选择一个客户：</p>
36     <p>
37         <select name="customers" onclick="showCustmer(this.value)">
38             <option value="APPLE">Apple Computer, Inc.</option>
39             <option value="BAIDU">BAIDU, Inc</option>
40             <option value="Canon">Canon USA, Inc.</option>
41             <option value="Google">Google, Inc.</option>
42             <option value="Nokia">Nokia Corporation</option>
43             <option value="SONY">Sony Corporation of America</option>
44         </select>
45     </p>
46     <div id="txtHint">客户信息将显示在这...</div>
47 </body>
48 </html>
    View Code

    12、读取XML案例

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <style type="text/css">
14 table,th,td {
15   border : 1px solid black;
16   border-collapse: collapse;
17 }
18 th,td {
19   padding: 5px;
20 }
21 </style>
22 <script type="text/javascript">
23     function loadDoc(){
24         var xmlHttpRequest;
25         var i;
26         if(window.XMLHttpRequest){
27             xmlHttpRequest = new XMLHttpRequest();
28         } else {
29             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
30         }
31         
32         xmlHttpRequest.onreadystatechange = function(){
33             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
34                 myFunction(this);
35             }
36         }
37         //t 参数防止客户端缓存
38         xmlHttpRequest.open("get","cd_catalog2.xml?t="+Math.random(),true);
39         xmlHttpRequest.send();
40     }
41     
42     function myFunction(xmlHttpRequest){
43         var xmlDoc = xmlHttpRequest.responseXML;
44         var table = "<table><tr><th>Artist</th><th>Title</th></tr>"
45         var cds = xmlDoc.getElementsByTagName("CD");
46         for(i=0;i<cds.length;i++){
47             var artist = cds[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
48             var title= cds[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
49             table += "<tr><td>" + artist + "</td><td>" + title + "</td></tr>";
50         }
51         table += "</table>";
52         document.getElementById("myDiv").innerHTML = table;
53     }
54     
55     function hide(o){
56         document.getElementById("myDiv").innerHTML = "";
57     }
58     
59 </script>
60 </head>
61 <body>
62     <p>加载XML文件</p>
63     <p>
64         <input type="button" value="收藏我的CD" onclick="loadDoc()"/>
65         <input type="button" value="收起" onclick="hide(this)"/>
66     </p>
67     <div id="myDiv"></div>
68 </body>
69 </html>
    View Code

    13、应用callback函数

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4 String path = request.getContextPath();
 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 6 %>
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <title>AJAX Demo</title>
13 <script type="text/javascript">
14     var xmlHttpRequest;
15     function loadDoc(url,func){
16         if(window.XMLHttpRequest){
17             xmlHttpRequest = new XMLHttpRequest();
18         } else {
19             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         
22         xmlHttpRequest.onreadystatechange = func;
23         xmlHttpRequest.open("get",url+"?t="+Math.random(),true);
24         xmlHttpRequest.send();
25     }
26     function myFunction(){
27         loadDoc("ajax_info2.txt",function(){
28             if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
29                 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
30             }
31         });
32     };
33 </script>
34 </head>
35 <body>
36     <p>callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。</p>
37     <p>
38         <input type="button" value="更新数据" onclick="myFunction()"/>
39     </p>
40     <div id="myDiv"></div>
41 </body>
42 </html>
    View Code

    14、比较完整的ajax方法（参考Blue老师的）

    　　参数解释：

    　　　　ur:请求的服务器路径

    　　　　data:请求的数据，json格式。例如:{username:'李四'}

    　　　　funSucc:处理成功调用的函数

    　　　　funFailed:处理失败调用的函数

     1 function ajax(url,data,funSucc,funFailed){
 2     //创建 ajax 对象
 3     var oAjax;
 4     if(window.XMLHttpRequest) {
 5         oAjax = new XMLHttpRequest();
 6     } else {
 7         oAjax = new ActiveXObject("Microsoft.XMLHTTP");
 8     }
 9     
10     //连接服务器
11     oAjax.open('post', url, true);
12     oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");//post请求设置请求头，charset=服务器端编码(gb2312,gbk,utf-8...)，解决了get请求中文乱码的问题
13     
14     //发送请求
15     var sData = '';
16     if(data){
17         for(var i in data){
18             sData += (i+ '=' +data[i] + '&');
19         }
20         sData = sData.substring(0,sData.length-1);
21     }
22     //alert(sData);
23     oAjax.send(sData);
24     
25     //处理返回数据
26     oAjax.onreadystatechange = function(){
27         if(oAjax.readyState == 4){    //请求处理完成
28             if(oAjax.status == 200){    //请求成功
29                 funSucc(oAjax.responseText);//文本
30             } else {
31                 if(funFailed){
32                     funFailed(oAjax.status);
33                 }
34             }
35         }
36     }
37 }

    代码链接: http://pan.baidu.com/s/1mhJDsEG 密码: tmxr

    示例程序（用AJAX加载的树状无级菜单）链接: https://pan.baidu.com/s/1kVLrTOV 密码: 81yr
  • 相关阅读:
    PHP数字签名算法
    PHP日期相关类
    浏览器常见bug及解决办法
    PHPer整理的前端开发知识
    小程序之轮播图（2020.4.13更新）
    Android APK反编译 apktool使用教程
    秒懂-单列布局水平居中布局
    一句话搞定-phpStudy安装yaf扩展
    Git的简单安装
    人人都能读懂的css3 3d小demo
  • 原文地址：https://www.cnblogs.com/ShawnYang/p/6808343.html
Copyright © 2020-2023  润新知