ajax与json实战

 1 <script type="text/javascript">
 2     function createXMLHttpRequest() {//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
 3         //如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
 4         //第一步创建XMLHttpRequest()
 5         try {
 6             xmlHttp = new XMLHttpRequest();
 7         } catch (tryMS) {
 8             try {
 9                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
10             } catch (otherMS) {
11                 try {
12                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
13                 } catch (failed) {
14                     xmlHttp = null;
15                     // 这里可以报一个错误，无法获得 XMLHttpRequest对象    
16                 }
17             }
18         }
19         return xmlHttp;
20     }
21     window.onload = function() {
22         document.getElementById("b1").onclick = function() {
23             //调用AJAX发送请求
24             /**
25              * 1.创建xmlHttpRequest对象
26              * 2.绑定回调函数
27              * 3.与服务器建立连接
28              * 4.发送数据
29              * 5.回调函数处理相应的数据
30              */
31             //第一步：创建XMLHttpRequest对象，往上看怎么验证浏览器支持的↑
32             var xmlHttp = createXMLHttpRequest();
33 
34             //第二步：绑定回调函数
35 
36             xmlHttp.onreadystatechange = function() {
37                 if (xmlHttp.readyState == 4) {
38                     //表示readyState的状态已经在第四步，数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据，
39                     //ajax readyState的五种状态详解请看这篇：http://www.jb51.net/article/16966.htm
40                     if (xmlHttp.status == 200) {//http状态码为200表示正常交互完成。
41                         //两步都验证过了则可以设置回调函数
42                         var callback = xmlHttp.responseText;
43                         //如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
44                         //responseText是获得字符串形式的响应数据。responseXML则获得 XML 形式的响应数据。
45                         document.getElementById("myDiv").innerHTML = callback;//这里就可以预设值对回调函数的处理。比如这里把回调函数展示到 id为myDiv的标签中。
46                     }
47                 }
48             }
49             //第三步：与服务器建立连接
50             xmlHttp.open("POST", "../servlet/AjaxServlet", true);
51             //第一个参数是请求的类型，get或者post，但是get会取得缓存的数据，get携带数据量有限，get对大量未知字符输入时不稳定，有以上三点障碍时，请选择POST;
52             //第二个参数是请求的地址url，这个 地址可以请求任何类型的文件如.txt .xml 或者是.js ，为了防止虚拟路径问题，建议使用el表达式动态获取地址，把url修改为：“${pageContext.request.contextPath}/servlet/AjaxServlet”。再者，如果担心get请求取得了缓存数据，可以让地址每次都不一样就获取不到缓存了，比如这样写：“${pageContext.request.contextPath}/servlet/AjaxServlet？t=”+Math.random()。
53             //第三个参数是设置async 参数，true为异步请求，false为同步请求，false请求时会导致浏览器锁住，等数据处理完才能操作页面。而且，当您使用 async=false 时，请不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可。就是说上面的document.getElementById("myDiv").innerHTML=callback;把这一段放到send后面。
54             //第四步：向服务器发送请求
55             xmlHttp.setRequestHeader("CONTENT-TYPE",
56                     "application/x-www-form-urlencoded");//向请求添加 HTTP 头。可以添加多个。自行百度。
57             xmlHttp.send("name=张三");//send中的string是在请求正文里，只在post的时候用，get的话就空着，因为例子是post请求的数据，所以这里写了一个例子。
58         }
59     }
60 </script>

1 <p id="txt1" style="color:red">woshi yiduan txt wenben !</p>
2 <p id="txt2">woshi dier duan txt wenben !</p>

 1 <script type="text/javascript">
 2     function createXMLHttpRequest() {
 3         try {
 4             xmlHttp = new XMLHttpRequest();
 5         } catch (tryMS) {
 6             try {
 7                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 8             } catch (otherMS) {
 9                 try {
10                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
11                 } catch (failed) {
12                     xmlHttp = null;
13                     // 这里可以报一个错误，无法获得 XMLHttpRequest对象    
14                 }
15             }
16         }
17         return xmlHttp;
18     }
19     window.onload = function() {
20         document.getElementById("bt1").onclick = function() {
21             var xmlHttp = createXMLHttpRequest();
22             xmlHttp.onreadystatechange = function() {
23                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
24                     document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
25                 }
26             }
27 
28             xmlHttp.open("GET",
29                     "${pageContext.request.contextPath}/test/test.txt?t="
30                             + Math.random(), true);
31 
32             xmlHttp.setRequestHeader("CONTENT-TYPE",
33                     "application/x-www-form-urlencoded");
34             xmlHttp.send();
35         }
36     }
37 </script>
38 
39 
40 </head>
41 
42 <body>
43 
44     <div id="myDiv">
45         <h2>通过 AJAX 改变文本</h2>
46     </div>
47     <button id="bt1">改变内容</button>
48 
49 </body>