AJAX请求的基本操作

 1 const { request, response } = require('express');
 2 //引入express
 3 const express = require('express');
 4 //创建对象
 5 const app=express();
 6 //创建路由规则
 7 app.get('/server',(request,response)=>{
 8     //设置响应头   设置允许跨域
 9     response.setHeader('Access-Control-Allow-Origin','*');
10     //设置响应体
11     response.send('send rexpress');
12 });
13 //监听端口启动服务
14 app.listen(8000,()=>{
15     console.log("服务已经启动,8000端口监听中....");
16 })

 1 <html>
 2     <head>
 3         <meta charset="utf-8"/>
 4         <title>ajax初学基础案例</title>
 5         <style type="text/css">
 6             #result{
 7                 width: 200px;
 8                 height: 200px;
 9                 border: 1px solid red;
10             }
11         </style>
12     </head>
13     <body>
14         <button>点击发送请求</button>
15         <div id="result"></div>
16
17         <script>
18             //dom获取元素
19             const btn=document.getElementsByTagName("button")[0];
20             const result=document.getElementById("result");
21
22             //绑定单击事件
23             btn.onclick=function(){
24                 //创建对象
25                 const xhr=new XMLHttpRequest();
26                 //初始化请求方法和url  http://不要省略
27                 xhr.open('GET','http://127.0.0.1:8000/server');
28                 //发送
29                 xhr.send();
30                 //事件绑定 处理返回的结果
31                 xhr.onreadystatechange=function(){
32
33                     if(xhr.readyState===4){
34                         //判断响应状态码
35                         if(xhr.status>=200 && xhr.status<300){
36
37                             //设置result的文本
38                             result.innerHTML=xhr.response;
39                         }else{
40
41                         }
42                     }
43                 }
44             }
45         </script>
46     </body>
47
48 </html>

 

成功运行，过程中有几处疏漏拼错.但奇怪的是js部分第一次并没有写入 const result=document.getElementById("result");

但还是成功将result.innerHTML=xhr.response执行了。不知道是什么原因。

 

post请求: 需要在js中加上

1 app.post('/server',(request,response)=>{
2     //设置响应头   设置允许跨域
3     response.setHeader('Access-Control-Allow-Origin','*');
4     //设置响应体
5     response.send('send post rexpress');
6 });

然后：

<script>
            //dom获取元素

            const result=document.getElementById("result");

            //绑定事件
            result.addEventListener("mouseover",function(){
                //定义对象
                const xhr=new XMLHttpRequest();
                //初始化 设置类型与URL
                xhr.open('POST','http://127.0.0.1:8000/server');
                //发送
                xhr.send();
                //事件绑定
                xhr.onreadystatechange=function(){
                    //判断
                    if(xhr.readyState===4){
                        if(xhr.status>=200&&xhr.status<300){
                            result.innerHTML=xhr.response;
                        }else{

                        }
                    }
                }
            });

        </script>

大致了解，需要多使用