• Ajax访问本地服务器案例

    1.首先我们需要两个文件夹

    2.我们先从服务器开始，此处我们搭建一个express服务器

    用vscode打开express文件夹，打开终端

    先执行 npm init 初始化项目（此处可以一直回车，直到出现新的可操作终端为止）

    3.终端中输入 npm install express ，此时你的目录结构应该会是这样

     4.创建一个app.js文件，输入如下代码

    1. const express=require("express")
    2. const app = express();
    3. //1.对应get请求
    4.  app.get("/",(req,res)=>{
    5.     //设置响应头
    6.     res.setHeader("Access-Control-Allow-Origin","*")
    7.     //设置响应体
    8.     res.send(
    9.          {name:"我是服务器的对象",key:6}  
    10.     )
    11.  })
    12. // 启动的端口号
    13. app.listen(3000,()=>{
    14.     console.log("服务启动");
    15. })

     5.然后终端输入node app.js运行

     6.此时我们可以看到，服务器已经启动，此时我们可以再浏览器中，使用http://localhost:3000/

    访问我们创建的服务器

     7.此时服务器已经没问题了，开始再另一个文件夹中，创建html文件，输入如下代码

     代码如下

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>请求案例title>
    8. head>
    9. <body>
    10.     <button class="btn">发送请求button>
    11.     <div id="result">div>
    12.     <script>
    13.         var btn=document.querySelector(".btn")
    14.         const result=document.getElementById("result")
    15.         // 监听
    16.         btn.addEventListener("click",function(){
    17.             //1.创建对象
    18.             const xhr=new XMLHttpRequest()
    19.             //2.初始化 设置请求方法和url
    20.             xhr.open("GET","http://127.0.0.1:3000");//请求接口
    21.             //3.发送请求
    22.             xhr.send()
    23.             //4.事件绑定 处理服务端返回的结果 
    24.             xhr.onreadystatechange=function(){
    25.                 if(xhr.readyState===4){
    26.                     //判断响应状态码
    27.                     if(xhr.status>=200 && xhr.status<=300){                     
    28.                         console.log(xhr.response);//这样我们只能拿到整个响应体，而我们需要是对象，用JSON.parse转换一下
    29.                         console.log(JSON.parse(xhr.response));
    30.                         // 这样我们就可以拿到单独的属性
    31.                         result.innerHTML=JSON.parse(xhr.response).name
    32.                     }
    33.                 }
    34.             }
    35.             
    36.         })
    37.     script>
    38. body>
    39. html>

    8.最后让我们运行一下，见证奇迹！

     成功拿到对象！

  • 相关阅读:
    Origin：科研绘图与学术图表绘制从入门到精通
    3、线性代数
    涉及法律诉讼和负债670万美元的【工务园】申请纳斯达克IPO上市
    Android基础第二天 ｜ 字节跳动第四届青训营笔记
    nrf52840 DK接口
    JAVA：异步任务处理类CompletableFuture让性能提升一倍
    数据结构 C语言 2.1 线性表抽象数据类型 2.2 小议顺序表
    web测试点
    录屏工具下载哪个好？分享：超简单的录屏工具及实用方法
    标号变迁系统（Labelled Transition System）
  • 原文地址：https://blog.csdn.net/qq_50951790/article/details/128138570