26_ajax

东东__net2025-03-30 13:20

目录

了解

接口

前后端交互

[一、安装服务器环境 nodejs](#一、安装服务器环境 nodejs)

ajax发起请求

渲染响应结果

get方式传递参数

post方式传递参数

封装ajax_上

封装ajax下

了解

清楚前后端交互就可以写一些后端代码了。小项目

现在写项目开发的时候都是前后端分离

之前都没有前端这个东西，2014年后有了框架，划分越来越明显。

什么叫前后端分离？

我写前面的一个网页项目叫桂花香，如果我不把桂花香这个项目代码发给你，那么你就看不到我的页面。因为没有后端服务器。

把前端代码放后端京东.com服务器上，这样大家都能请求访问。

那后端就充当服务器一个角色？后端能做的事很多，主要对数据库增删改查

这些数据都是后端返回的，不是你硬写 写死上去的。（比如我刷新抖音对应热搜就变了，刷新的时候后端再查 返回过来，前端再渲染）

推荐的东西/页面会变，这些数据都是后端去查询数据库返回到前端，前端拿到数据渲染

咋渲染到页面上？后面讲

现在的项目都是前后端分离

Fetch/XHR代表接口

接口

如果能够对接口发起请求呢？如何拿到这些数据。就是用到前后端交互

前后端交互

后端可以返回前端所需要的数据

需求：是咱们前端如何获取到这些数据 并渲染到页面上

解决：前后端交互的重点 ajax

本章讲ajax如何发起请求，获取后端数据，做前后端交互

一、安装服务器环境 nodejs

要交互就要安装服务器环境。

前端要调后端的接口。发起ajax，但是要请求服务器得去先安装服务器的环境。

nodejs 是运行服务器程序的基础，推荐16比较稳定

  • 环境安装

    1、安装包 下载地址：Index of /download/release/latest-v16.x/

    • 双击安装即可

    • 正常下一步，可以选择你想要安装的盘符目录，如果你电脑上安全软件，推荐安装到C盘

      直接一直下一步 不需要修改盘符。。。自动的配置环境变量

  • 测试是否安装成功

html 复制代码 
win + R 打开 dos命令窗口  输入命令

node -v
或者
node --version

如果出现版本号 就代表安装成功
如果出现"node  不是内部外部命令，，，" 没安装成功   卸载重装//或者添加环境变量看看

二、ajax前后端交互

前后端是分离的！！！

交互通过谁：ajax

前端：前端完成自己的静态页面，，页面中有很多数据，数据是后端返回的，咱们需要做的事情就是请求到后端返回的数据，，如何请求后端数据，，用到ajax

ajax

ajax全名是 async(异步) javascript and xml

ajax是前后端交互的能力

也就是我们客户端给服务器发送数据的工具，也可以接收响应的数据

这是一个默认 异步的执行机制 （ajax发起网络请求 请求是需要时间 异步的）

01-异步说明

快速判断：需要时间去等就是异步的

javascript 复制代码 
    <script>
        // 同步：排队执行  从前到后执行(比如先打哈哈哈等1s之后再打印嘿嘿嘿)
        // 异步：同步的先执行，异步的后执行

        setTimeout(()=>{//定时器就是一个异步操作
            console.log("哈哈哈");
        },1)

        console.log("嘿嘿嘿");//同步的先打印
    </script>

ajax 优势

1、不需要第三方库 原生js直接使用

2、用户体验好（异步） 不需要刷新页面就可以更新数据，局部刷新(比如就刷新热搜排名那一块)

3、减轻服务器负担

缺点：

1、搜索引擎支排名持度不够（seo） 因为数据都不在页面上，数据都是从服务器上来的 搜索引擎搜索不到(底下来的)。

ajax发起请求

接口地址。用到服务器。

启动服务器

ajax发起请求

javascript 复制代码 
    <script>
        let btn = document.querySelector("button");
        btn.onclick=function(){
          let xhr = new XMLHttpRequest();//请求对象
          xhr.open("get","http://localhost:8888/test/first"); //请求地址(接口）
          xhr.send();   

        }
    </script>
html 复制代码 
<body>
    <button>发起请求</button>
    <script>
        let btn = document.querySelector("button");//找到网页按钮
        btn.onclick=function(){
            // 第一步- 创建一个xml对象
            //XMLHttpRequest()是一个构造函数需要new对象
          let xhr = new XMLHttpRequest();
            // 第二步- 配置xhr对象
            //-请求方式get/post  //-请求地址
          xhr.open("get","http://localhost:8888/test/first"); //http://localhost:8888/test/first 接口
            // 第三步- 发起网络请求
          xhr.send();   

        }
    </script>
</body>

浏览器查看发起的请求

html 复制代码 
通过浏览器调试查看我们发起的请求
打开控制台 -->网络（network）--> fetch/xhr

改代码post/放弃请求，不成功? 因为接口文档用的get

不改代码/模拟一下

javascript 复制代码 
如何知道请求的地址  和 请求的方式呢？？
查看接口文档 （接口文档都是后端提供的）

渲染响应结果

处理返回的数据渲染到页面上

javascript 复制代码 
    <script>
        let btn = document.querySelector("button");//获取按钮
        let h1 = document.querySelector("h1");//渲染到h1
        btn.onclick = function () {
            let xhr = new XMLHttpRequest();//接口请求对象
            xhr.open("get", "http://localhost:8888/test/first"); //接口地址
            xhr.send();

            xhr.onload = function () {
                h1.innerHTML = xhr.responseText;//获取响应文本
            }
        }
    </script>
</body>
html 复制代码 
<body>
    <button>发起请求</button>
    <h1></h1>
    <script>
        let btn = document.querySelector("button");
        let h1 = document.querySelector("h1");
        btn.onclick = function () {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "http://localhost:8888/test/first"); 
            xhr.send();
            // 4-处理响应数据(渲染到页面上)
            //   响应数据两种情况：纯字符串/json字符串
            xhr.onload = function () {
                h1.innerHTML = xhr.responseText;
                //console.log(xhr.responseText);//打印到控制台上看获取到没有
            }
        }
    </script>
</body>

json

打印到控制台的是一堆json格式字符串，不是一个正常对象。

想把message渲染，得把json格式的字符串处理成对象。

html 复制代码 
<head>

</head>
<body>
    <button>发起请求</button>
    <h1></h1>

    <script>
         let btn = document.querySelector("button");
        let h1 = document.querySelector("h1");
        btn.onclick =function(){
            let xhr = new XMLHttpRequest();
            xhr.open("get","http://localhost:8888/test/second");
            xhr.send();
            xhr.onload = function(){
                console.log(xhr.responseText);
                // 我们在进行前后端交互时 响应的数据发部分都是json格式的字符串
                // 获取到之后需要通过JSON.parse()方法  把json字符串转化为一个真正的对象
               h1.innerHTML = JSON.parse(xhr.responseText).message  //把message渲染到页面中
            }
        }
    </script>
</body>

接口文档说

get方式传递参数

？是拼接参数，提交给后端查询参数。

get方式都是以？这种形式去拼接的。

html 复制代码 
<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <button>发起请求</button>
    <h1></h1>
    <script>
        //js获取标签
        let btn = document.querySelector("button");
        let h1 = document.querySelector("h1");
        let ipts = document.querySelectorAll("input");//伪数组
        btn.onclick = function () {
            // 1-创建xml对象
            let xhr = new XMLHttpRequest()
            // 2-设置xml对象
            //  get请求方式携带数据  数据是放到路径上的
            //  格式：url?key1=value&key2=value&key3=value 
                // (eg:http:http://localhost:8888/test/third?name='xx'&age='xx')
                // key 参数名（字段名）
                // value 参数值 （字段值）
            xhr.open("get",`http://localhost:8888/test/thirdname=${ipts[0].value}&age=${ipts[1].value}`);
            // 3-发起请求
            xhr.send();
            // 4- 处理响应结果
            xhr.onload = function(){
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

payload里边就是你传的参数，写啥传啥。

post方式传递参数

工作的时候铺完页面调静态接口

后面学了框架之后用别的去调接口。

参数都是用的魔发字符串动态${}

html 复制代码 
post请求接口时，必须设置请求头，添加一条请求头信息，这条信息是发送的数据的格式
比如：application/x-www-form-urlencoded
怎样添加  给xhr 对象添加请求头
语法：xhr.setRequestHeader("请求字段名","请求的值")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

        // 注意:post 方式
        // 1-必须设置请求头(发送前设置请求头)
        // 2-携带的数据不能在url地址里 而是通过send（）携带数据
html 复制代码 
<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <h1></h1>
    <button>发起请求</button>

    <script>

        let btn = document.querySelector("button");//获取
        let ipts = document.querySelectorAll("input");//获取
        let h1 = document.querySelector("h1");//获取
        btn.onclick=function(){
            // 1.xhr请求对象
            let xhr = new XMLHttpRequest()
            // 2-设
            xhr.open("post","http://localhost:8888/test/fourth")
            // 3-发
            let data = `name=${ipts[0].value}&age=${ipts[1].value}`;//参数
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post设置请求头
            xhr.send(data); // post通过send传参给服务器!!!
            // 4.渲
            xhr.onload = function(){
              let data = JSON.parse(xhr.responseText);
              console.log(data);
              h1.innerHTML = `我的名字是${data.info.name}我的年龄是${data.info.age}`
            }
        }
    </script>
</body>

封装ajax_上

写项目就不用一直写发送请求。一个项目接口上百个。怎么办？

在开发过程中在多次使用的东西都封装成一个函数。多次去使用调用。

调用xml.send()就行了

html 复制代码 
<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <button>发起请求</button>
    <script>
        let btn = document.querySelector("button");
        let ipts = document.querySelectorAll("input");
        //post
        btn.onclick = function () {
            let option = {//可变对象
                method:"post",
                url:"fourth",
                data:{
                    name:"jack",
                    age:18
                },
                header:"Content-type,application/x-www-form-urlencoded"
            }
            xhr(option);//调用
        }



        // 封装的网络请求函数
        // 可变:方式  地址  参数  请求头
        // 可变的  调用函数的时候传参！！！ 传谁我就用谁！！

        function xhr(options){//option对象传过来
            let method = options.method || "get";//传过来的url 没传默认get
            let url = options.url;
           
            
            // get
            let data = formatData(options.data || {}); 
            if(method.toUpperCase()=="GET"&&data){
                url = url+data
            }

            // 1-创
            let xhr = new XMLHttpRequest();
            // 2-设
            xhr.open(method,`http://localhost:8888/test/${url}`)//方式可变 //地址可变
            // 3-发
            xhr.send();
            // 4-处理渲染
            xhr.onload = function(){

            }
        }

        // get希望传的是 ?name=jack&age=18  所以传来的参数进一步处理
        // 格式化data的函数
        function formatData(obj){
            let data = "";  // 保存保存处理好之后的数据
            for(let key in obj){
                data += `&${key}=${obj[key]}`
            }
            data = data.slice(1);//从下标为1开始截取到最后
           return data;
        }
    </script>
</body>
javascript 复制代码 
   // 封装的网络请求函数

        // 哪些是可变的  请求方式  请求地址  请求参数  请求头
        // 可变的  调用函数的时候传参！！！ 传谁我就用谁！！
        function ajax(options){
            let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是get
            let url = options.url;
            let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}
            let type = options.dataType || "json"
           
            // ajax希望传的是 ?name=jack&age=18  所以传来的参数进一步处理
            let data = formatData(options.data || {}); 
            // data参数  get和post请求方式不一样  分情况讨论
            // get 方式在地址后边拼接  post方式是通过send（data） 发送的
            if(method.toUpperCase()=="GET"&&data){
                // foruth?name=jack&age=18
                url = url+"?"+data
            }

            // 1-创建xhr对象
            let xhr = new XMLHttpRequest();
            // 2-设置xhr对象
            xhr.open(method,`http://localhost:8888${url}`)
            for(let key in header){
                xhr.setRequestHeader(key,header[key]);
            }
            // 3- 发起请求
            // 分成两种情况   post请求的话 参数是通过send取发送的
            if(method.toUpperCase()=="POST" && data){
                xhr.send(data);
            }else{
                xhr.send();
            }
           
            // 4- 处理响应结果
            xhr.onload = function(){
                // 有可能是纯字符串  有可能是json字符串 (最常用的json串)
                let result;
                if(type=='json'){
                   result = JSON.parse(xhr.responseText)
                }else{
                   result = xhr.responseText
                }

                options.success(result)
            }
        }

        // 格式化data的函数
        function formatData(obj){
            let data = "";  // 保存保存处理好之后的数据
            for(let key in obj){
                data += `&${key}=${obj[key]}`
            }
            data = data.slice(1);//从下标为1开始截取到最后
           return data;
        }

封装ajax下

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.js"></script>
</head>

<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <button>get发起请求first</button>
    <button>get发起请求second</button>
    <button>post发起请求third</button>
    <script>
        let btn = document.querySelectorAll("button");
        let ipts = document.querySelectorAll("input");
        // 在哪调用  希望在哪拿到返回值的
        btn[0].onclick = function () {
            let option = {
                url:"first",
                dataType:"text",
                // 传一个回调函数
                success:(res)=>{
                    console.log(res);
                }
            }
            ajax(option);
        }

        btn[1].onclick=function(){
            let option = {
                url:"third",
                dataType:"json",
                data:{
                    name:"jack",
                    age:18
                },
                // 回调函数 
                // 就是把函数A(success)当作参数传递到函数B中
                // 在函数B中以形参的方式去调用
                success:(res)=>{
                    console.log(res);
                }
            }
            ajax(option)
        }
        btn[2].onclick=function(){
            let option = {
                url:"fourth",
                method:"post",
                data:{
                    name:"jack",
                    age:18
                },
                success:(res)=>{
                    console.log(res);
                }
            }
            ajax(option)
        }


     
    </script>
</body>

</html>

访问后端接口

ajax在实际项目中应用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 1000px;
            border: 2px solid red;
            margin: 0 auto;
            background-color: #ccc;
            overflow: hidden;
        }
        li{
            float: left;
            width: 18%;
            margin-right: 2%;
            height: 300px;
            background-color: #fff;
            margin-bottom: 20px;
            border: 2px solid red;
            box-sizing: border-box;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <ul>
        
    </ul>
    <script src="./axios.js"></script>

    <script>
        let ul = document.querySelector("ul");
        let option = {
            url:"/goods/list",
            success:(res)=>{
                console.log(res.list);//数组
                // 数组里有多少对象  就希望有多少个li
                let data="";
                res.list.forEach(item => {
                    // console.log(item);
                   data+= `
                     <li>
                        <a href="#">
                            <img src="${item.img_big_logo}">
                            <h4>${item.title}</h4>
                            <p>${item.price}</p>
                        </a>
                    </li>
                    `                    
                });
                ul.innerHTML = data;
            }
        }
        ajax(option)
    </script>
</body>
</html>
相关推荐
还是鼠鼠4 分钟前
Node.js Express 处理静态资源
前端·javascript·vscode·node.js·json·express
开水好喝8 分钟前
项目如何安装本地tgz包并配置局部registry
javascript
智能编织者15 分钟前
用 Pinia 点燃 Vue 3 应用：状态管理革新之旅
前端·javascript·vue.js
微臣愚钝21 分钟前
【12】Ajax的原理和解析
前端·javascript·ajax
徐小夕@趣谈前端42 分钟前
从零到一开发电子病历编辑器（源码+教程）
前端·javascript·vue.js·编辑器·ecmascript
货拉拉技术1 小时前
LLM 驱动前端创新：AI 赋能营销合规实践
前端·程序员·llm
MariaH1 小时前
深入了解vertical-align
前端
草巾冒小子1 小时前
element-ui图片查看器
前端·vue.js·ui
光影少年2 小时前
vue3为什么不需要时间切片
前端·vue.js
Json_2 小时前
Vue 初识Hello word
前端·vue.js·深度学习
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04HTML项目一键打包工具：HTML2EXE 最新版05RAG 实践- Ollama+RagFlow 部署本地知识库06如何在WPS和Word/Excel中直接使用DeepSeek功能07【笔记】MJ Prompt08苍穹外卖面试总结09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10uniApp使用XR-Frame创建3D场景(3)光源投影的运用。