Ajax基础（一）--创建请求
浏览器创建ajax请求：
1、如果是Firefox、Opera、Safari等高级浏览器，可使用XMLHttpRequest()方式创建一个新的ajax请求对象。
如果是IE浏览器，则使用ActiveXObject('Microsoft.XMLHTTP')方式创建，具体代码如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax练习</title> 6 </head> 7 <body> 8 <script> 9 function doAjax (the_request) { 10 var request = null; 11 // 判断浏览器支持的请求方式 12 alert("点击"); 13 if(window.XMLHttpRequest){ 14 request = new XMLHttpRequest(); 15 if(request){ 16 request.open('GET',the_request,true); 17 request.onreadystatechange = function(){ 18 if(request.readyState==4){ 19 if(request.status==200){ 20 alert(request.responseText); 21 document.getElementById("view").innerHTML = request.responseText; 22 } 23 } 24 } 25 request.send(null); 26 }else{ 27 alert("error"); 28 } 29 30 }else if(window.ActiveXObject){ 31 request = new ActiveXObject('Microsoft.XMLHTTP'); 32 request = new XMLHttpRequest(); 33 if(request){ 34 request.open('GET',the_request,true); 35 request.onreadystatechange = function(){ 36 if(request.readyState==4){ 37 if(request.status==200){ 38 alert(request.responseText); 39 document.getElementById("view").innerHTML = request.responseText; 40 } 41 } 42 } 43 request.send(null); 44 }else{ 45 alert("error"); 46 } 47 }else{ 48 alert("你的浏览器不支持ajax！"); 49 } 50 } 51 </script> 52 <button onclick="javascript: doAjax('aa.txt')">请求</button> 53 <div id="view"> 54 doAjax 55 </div> 56 </body> 57 </html>
另一种写法;
1 <html> 2 <head> 3 <title>Ajax初步入门视频课程</title> 4 </head> 5 6 <body> 7 8 <script type="text/javascript"> 9 10 var xmlHttp = null; 11 12 function readyStateChangeHandle() 13 { 14 if (xmlHttp.readyState ==4 ) { 15 if (xmlHttp.status == 200 ) { 16 document.getElementById('vv').innerHTML = xmlHttp.responseText; 17 } 18 } 19 } 20 21 function ajaxFunction(the_request_url) 22 { 23 try { 24 xmlHttp = new XMLHttpRequest() ; 25 } 26 catch(e) { 27 try { 28 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 29 } 30 catch(e) { 31 try { 32 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 33 } 34 catch(e) { 35 alert("您的浏览器不支持ajax") ; 36 return false; 37 } 38 } 39 } 40 41 if (xmlHttp) { 42 xmlHttp.open('GET', the_request_url, true); 43 xmlHttp.onreadystatechange = readyStateChangeHandle; 44 xmlHttp.send(null); 45 } else { 46 alert('error'); 47 } 48 } 49 50 51 </script> 52 <input type="button" id="test" value="test" onclick="javascript:ajaxFunction('ajax-04.txt')" /> 53 <br/><br/> 54 <div style="border:1px solid black;width:300px;height:250px;" id="vv">test ajax</div> 55 56 </body> 57 58 </html>
