XMLHttpRequest实现ajax

原创

啄木鸟伍迪_ 2022-09-29 14:36:36 ©著作权

文章标签 js ajax xml html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者啄木鸟伍迪_的原创作品，请联系作者获取转载授权，否则将追究法律责任

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>