XMLHttpRequest實現ajax
阿新 • • 發佈：2020-10-08
ajax技術：可以不重新整理頁面來更改頁面內容；
XMLHttpRequest：可以實現瀏覽器和頁面的資料互動；
XMLHttpRequest物件的屬性和方法：https://www.w3school.com.cn/xml/xml_http.asp
demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="/assets/js/jquery.min.js"></script> 7 </head> 8 <body> 9 <a href="helloajax.text" >hello ajax get </a> 10 <br/> 11 <a href="helloajax.text" >hello ajax post </a> 12 <script> 13 $(function(){ 14 $("a:first").click(function(){ 15 //ajax原生 16 var request =new XMLHttpRequest(); 17 var method = "GET"; 18 var url = "helloajax.text"; 19 request.open(method,url); 20 request.send(null); 21 request.onreadystatechange = function(){ 22 if(request.readyState == 1){ 23 console.log("openging");24 }if(request.readyState == 2){ 25 console.log("sending"); 26 }if(request.readyState == 3){ 27 console.log("recived"); 28 }if(request.readyState == 4){ 29 console.log("loaded"); 30 if(request.status == 200){ 31 console.log(request.responseText); 32 } 33 } 34 35 } 36 return false; 37 }) 38 $("a:last").click(function(){ 39 //ajax原生 40 var request = new XMLHttpRequest(); 41 var method = "post"; 42 var url = "helloajax.text"; 43 request.open(method,url); 44 request.send("name='a'");//post傳參 45 request.onreadystatechange = function(){ 46 if(request.readyState == 1){ 47 console.log("openging"); 48 }if(request.readyState == 2){ 49 console.log("sending"); 50 }if(request.readyState == 3){ 51 console.log("recived"); 52 }if(request.readyState == 4){ 53 console.log("loaded"); 54 if(request.status == 200){ 55 console.log(request.responseText); 56 } 57 } 58 59 } 60 return false; 61 }) 62 }) 63 64 </script> 65 </body> 66 </html>
詳情：