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.htm40 ????????????????????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>