1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Ajax</title> 6 7 <script language="javascript"> 8 //<script language="javascript" type="application/javascript"> // 如果上方的代码不能够完整实现就使用这个 9 10 //IE浏览器实例化方式 11 //var h = new ActiveXObject("Msxml2.XMLHTTP"); 12 13 //var p = new ActiveXObject("Microsoft.XMLHTTP"); 14 15 16 //非IE浏览器 17 //var f = new XMLHttpRequest(); 18 19 //alert(p.getAllResponseHeaders()); 20 21 var hx = false; 22 //定义函数 23 function test() 24 { 25 //所有浏览器通用实例化代码 26 if(window.XMLHttpRequest) //非IE IE7版本及以上 都支持非ie形式 27 { 28 hx = new XMLHttpRequest(); //如果是非IE浏览器 那么就会实例化 29 alert("qqq"); //如果是实例化成功上方的，那么就会输出这句话 30 } 31 else if(window.ActiveXObject) //IE 32 { 33 try{ 34 hx = new ActiveXObject("Msxml2.XMLHTTP"); //实例化 35 alert("qqq2"); //如果实例化成功上方的 那么就会输出这句话 36 } 37 catch(e) 38 { 39 alert(e); 40 try 41 { 42 hx = new ActiveXObject("Microsoft.XMLHTTP"); //实例化 43 alert("qqq3"); //如果实例化成功上方的 那么就会输出这句话 44 } 45 catch(e) 46 { 47 alert(e); 48 } 49 } 50 } 51 52 //测试创建XMLHttpRequest是否成功 53 if(!hx) 54 { 55 alert("创建XMLHttpRequest失败"); 56 } 57 else 58 { 59 alert("创建XMLHttpRequest成功"); 60 } 61 62 63 /* 64 //异步请求的请求类型有两种方式 一种是 get 另一种是 post 两种方法都有各自的方式 65 66 67 //get方式 68 69 // 1 设置异步请求的url等信息 70 hx.open("GET","ajaxtest?userid=abc",true); //（"请求类型 GET/POST",URL,是否异步 true/false） 71 // 2 设置回调函数 事件处理器 72 hx.onreadystatechange = getResult; //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange 73 //调用请求的发送 74 hx.send(null); //在需要请求传送参数时设置异步请求时用 post 方式 75 76 } 77 78 //回调函数 79 function getResult() 80 { 81 // 82 //alert("readyState = "+hx.readyState); 83 if(hx.readyState == 4) 84 { 85 if(hx.status == 200) 86 { 87 alert("回调信息 = " + hx.responseText); //返回的值 88 } 89 else 90 { 91 alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText); 92 } 93 } 94 } 95 96 97 98 */ 99 100 101 102 //post方式 103 104 // 1 设置异步请求的url等信息 105 hx.open("POST","ajaxtest",true); //（"请求类型 GET/POST",URL,是否异步 true/false） 106 // 2 设置回调函数 事件处理器 107 hx.onreadystatechange = getResult; //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange 108 109 //调用请求的发送 110 //在需要请求传送参数时设置异步请求时用 post 方式 111 hx.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 112 hx.send("userid=abc"); 113 114 } 115 //回调函数 116 function getResult() 117 { 118 // 119 //alert("readyState = "+hx.readyState); 120 if(hx.readyState == 4) 121 { 122 if(hx.status == 200) 123 { 124 alert("回调信息 = " + hx.responseText); //返回的值 125 } 126 else 127 { 128 alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText); 129 } 130 } 131 } 132 133 //alert("Server = " + hx.getAllResponseHeaders("Server")); 134 135 </script> 136 137 </head> 138 139 <body> 140 141 <input type="text" width="30" onchange="test()" /> 142 143 </body> 144 </html>
