• Ajax学习：Ajax请求基本操作

    点击按钮，发送请求（前端页面和服务端页面信息交流 但是不刷新页面）

    注意使用谷歌浏览器

    服务器端打开：使用nodemon

    1.  
    2. //1、导入express
    3. const express=require('express')
    4. //2、创建应用对象  创建web服务器
    5. const app=express()
    6. //3、创建路由规则
    7. //监听客户端的GET请求和POST请求，并向客户端响应具体内容
    8. //requset是对请求报文的封装
    9. //response是对响应报文的封装
    10. app.get('/server',function(requset,response){
    11.     //设置响应头 名称 值----设置允许跨域
    12.     response.setHeader('Access-Control-Allow-Origin','*');
    13.     //设置响应体
    14.     response.send('hello AJAX');
    15. })
    16.  
    17. //4、监听端口 启动服务
    18. //启动服务器.lisen(端口号，（启动成功职之后的回调函数）) 端口号是80可以省略
    19. app.listen(8000,()=>{
    20.     console.log('8000启动成功')
    21. })

    服务器端对http://127.0.0.1:8000/server的GET请求设置了

    响应头 Access-Control-Allow-Origin:*  

    和

    响应体hello AJAX

    这时候客户端即浏览器发送请求，并接收读取服务端的响应

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Ajax GET 请求title>
    9.     <style>
    10.         #result {
    11.             width: 200px;
    12.             height: 100px;
    13.             border: solid 1px #90b;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <button>点击发送请求button>
    20.     <div id="result">div>
    21.     <script>
    22.         //获取bTn元素
    23.         const btn = document.getElementsByTagName('button')[0];
    24.         const result=document.getElementById('result');
    25.         //绑定事件
    26.         btn.onclick = function () {
    27.             //Ajax操作--分为4个步骤
    28.             //1、创建对象
    29.             const xhr = new XMLHttpRequest();//xhr简写 然后是在网络控制台上也有xhr 对ajax请求的筛选
    30.             //2、初始化 设置请求方法和url 这里不可以省略
    31.             xhr.open('GET', 'http://127.0.0.1:8000/server');
    32.             //3、发送
    33.             xhr.send();
    34.             //4、事件绑定  处理服务端返回的结果
    35.             //onreadystatechange代表：当 xhr对象中的属性readystate 改变的时候触发
    36.             //xhr对象中的属性 readystate标识状态 
    37.             //有5个值 0：标识为初始化 1 标识open方法调用完毕 2 send方法调用完毕 3：服务端返回的部分结果 4 服务端返回的所有结果
    38.             //改变一次触发一次 总共有4次
    39.             xhr.onreadystatechange = function () {
    40.                 //判断服务端是否返回了所有结果
    41.                 if (xhr.readyState === 4) {
    42.                     //判断服务端返回的响应状态码 200 404 403 401 500
    43.                     //2xx是成功
    44.                     if(xhr.status<300&&xhr.status>=200){
    45.                         //处理结束 行 头 空行 体
    46.                         //1、响应行
    47.                         console.log('响应状态码',xhr.status,'响应字符串',xhr.statusText);//响应状态码+响应状态字符串
    48.                         console.log('所有的响应头',xhr.getAllResponseHeaders());
    49.                         console.log('响应体',xhr.response);
    50.                         //在div中呈现
    51.                         result.innerHTML=xhr.response;
    52.  
    53.                     }else{
    54.  
    55.                     }
    56.  
    57.  
    58.                 }
    59.  
    60.             }
    61.  
    62.  
    63.  
    64.  
    65.  
    66.         }
    67.  
    68.     script>
    69. body>
    70.  
    71. html>

    使用jscript；一共分为4步骤

      //1、创建对象

        const xhr = new XMLHttpRequest();//xhr简写 然后是在网络控制台上也有xhr 对ajax请求的筛选

    //2、初始化对象 参数为设置请求方法和url 地址这里不可以省略

      xhr.open('GET', 'http://127.0.0.1:8000/server');

     //3、发送对象

       xhr.send();

     //4、事件绑定  处理服务端返回的结果 //onreadystatechange代表：当 xhr对象中的属性readystate 改变的时候触发

    //xhr对象中的属性 readystate标识状态有5个值 0：标识为初始化 1 标识open方法调用完毕 2 send方法调用完毕 3：服务端返回的部分结果 4 服务端返回的所有结果//改变一次触发一次 总共有4次

     响应状态码',xhr.status

    响应字符串',xhr.statusText

    所有的响应头',xhr.getAllResponseHeaders()

    响应体',xhr.response

    1.   xhr.onreadystatechange = function () {
    2.                 //判断服务端是否返回了所有结果
    3.                 if (xhr.readyState === 4) {
    4.                     //判断服务端返回的响应状态码 200 404 403 401 500
    5.                     //2xx是成功
    6.                     if(xhr.status<300&&xhr.status>=200){
    7.                         //处理结束 行 头 空行 体
    8.                         //1、响应行
    9.                         console.log('响应状态码',xhr.status,'响应字符串',xhr.statusText);//响应状态码+响应状态字符串
    10.                         console.log('所有的响应头',xhr.getAllResponseHeaders());
    11.                         console.log('响应体',xhr.response);
    12.                         //在div中呈现
    13.                         result.innerHTML=xhr.response;
    14.  
    15.                     }else{
    16.  
    17.                     }
    18.  
    19.  
    20.                 }

    响应头部分  

    响应体部分 

     

     

  • 相关阅读:
    ipsec vxn详解
    电脑Win11安装Autocad出现错误要如何处理
    [论文阅读]NeurIPS 2021论文预讲会总结
    golang学习笔记——类型转换
    Linux 驱动扫描所有线程调用栈
    GB28181视频监控国标平台EasyGBS如何更流畅进行接口调用？操作指南来了
    SQL语法之JOIN
    【机械】二维钢桁架分析与设计附matlab代码
    MySQL事务、索引、数据恢复和备份
    【语言模型】深入探索语言模型中的神经网络算法：原理、特点与应用
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/128084715