前端day10--＞Ajax

最新推荐文章于 2023-07-08 17:03:55 发布

bzy1998

最新推荐文章于 2023-07-08 17:03:55 发布

阅读量79

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/czlj1998/article/details/130346382

版权

总的来说，通过前端的Ajax发送请求可以实现在不刷新页面的情况下与后端进行数据交互，客户端可以在不打断用户操作的情况下，向服务器端发送请求获取数据，更新页面，提高用户体验，降低服务器压力。

01- Ajax使用步骤

// 使用步骤：

1、创建server文件夹，在server内进行npm初始化-->npm init

2、安装express框架 npm i express

3、创建server.js文件书写代码

4、nodemon server.js

5、浏览器输入自己定义的127.0.0.1:3000

02- Ajax-get请求

First-首先！在server的同级目录下创建Ajax-get.html（前端）

一、要先创建xhr对象启用XMLHttpRequest()服务===>var xhr = new XMLHttpRequest();

二、设置请求方式以及地址===>xhr.open("get","http://127.0.0.1:3000?age=12")

age="12"为get写在地址栏中欲发送的请求

三、发送请求===>xhr.send();

四、接收响应

===>当状态改变就会触发这个事件-->xhr.onreadystatechange = function(){}

xhr.onreadystatechange = function(){

console.log("状态在改变");

// 判断是否成功

// 请求的状态，4是成功

if(xhr.readyState === 4){

if(xhr.status >=200 &&xhr.status<300){

console.log(xhr.responseText);

div.innerHTML = xhr.responseText

}

}

需要注意的是：绿色高亮部分为请求成功的固定写法，红色部分为成功时执行的操作（把xhr的响应信息传入到div中）

// 判断是否成功

// 请求的状态，4是成功

if(xhr.readyState === 4){

if(xhr.status >=200 &&xhr.status<300){

console.log(xhr.responseText);

div.innerHTML = xhr.responseText

}

<script>
        var btn = document.querySelector("button");
        var div = document.querySelector("div")
        btn.onclick = function(){
            // 1、创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2、初始化，设置请求方式以及地址
            xhr.open("get","http://127.0.0.1:3000?age=12")
            // 3、发送请求
            xhr.send();
            // 4、接受响应
            // 当状态改变就会触发这个事件
            xhr.onreadystatechange = function(){
                console.log("状态在改变");
                // 判断是否成功
                // 请求的状态，4是成功
                if(xhr.readyState === 4){
                    if(xhr.status >=200 &&xhr.status<300){
                        console.log(xhr.responseText);
                        div.innerHTML = xhr.responseText
                    }
                }
            }
        }
        // 使用步骤：1、创建server文件夹
        //          2、安装express框架 npm i express
        //          3、创建server.js文件书写代码
        //          4、nodemon server.js
        //          5、浏览器输入自己定义的127.0.0.1:3000
    </script>

其次！在server目录中写sever.js（后端）

var express = require('express');

var app = express();

// req是请求，res是响应
app.all('/', function (req, res) {
  //解决跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 响应头
  // 任何类型的请求头都接收
  res.setHeader('Access-Control-Allow-Headers', '*');
  // req.query获取get请求发送的数据
  console.log(req.query);
  // send是响应结束，给到前台的信息
  res.send('是我')
})
app.all('/json-server', function (req, res) {
  //解决跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*');
  var person = {
    "name":"毕振宇",
    "age":18
  }
  res.send(person);
  console.log(person.name);
})
// 监听端口并启动服务
app.listen(3000, function () {
  console.log('服务开启...')
})

一、引入包===>var express = require('express');

二、创建服务===>var app = express();

三、中间件

//解决跨域

res.setHeader('Access-Control-Allow-Origin', '*');

// 响应头

// 任何类型的请求头都接收

res.setHeader('Access-Control-Allow-Headers', '*');

// req是请求，res是响应
app.all('/', function (req, res) {
  //解决跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 响应头
  // 任何类型的请求头都接收
  res.setHeader('Access-Control-Allow-Headers', '*');
  // req.query获取get请求发送的数据
  console.log(req.query);
  // send是响应结束，给到前台的信息
  res.send('是我')
})

req.query能拿到get请求中的信息并转换为对象的形式log会在后端打印

res.send('是我')把js后端给前端的响应值返回给前端界面

03- Ajax-post请求

<!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>
        div{
            width: 200px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <button>post</button>
    <div></div>
    <script>
        var btn = document.querySelector("button");
        var div = document.querySelector("div")
        btn.onclick = function(){
            // 1、创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2、初始化，设置请求方式以及地址
            xhr.open("post","http://127.0.0.1:3000/json-server")
            // 设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            // 该格式创建的自定义请求头
            xhr.setRequestHeader("name","bzy")
            // 3、发送请求
            xhr.send("name=123&age=12");
            // 4、接受相应
            xhr.onreadystatechange = function(){
                console.log("状态在改变");
                // 判断是否成功
                if(xhr.readyState === 4){
                    if(xhr.status >=200 &&xhr.status<400){
                        console.log(xhr.responseText);
                        div.innerHTML = xhr.responseText
                    }
                }
            }
        }
    </script>
</body>
</html>

xhr.setRequestHeader("name","bzy")--->自定义请求头

xhr.send("name=123&age=12");--->前端发送的请求

在前端Ajax中，XHR对象通过send方法将请求发送到后端服务器，而请求的数据则会被包含在payload中。payload即请求负载，表示请求中所包含的数据。比如，在请求类型为POST时，请求数据可以通过payload的方式发送到后端服务器。发送的payload数据通常是一个字符串，可以是JSON、XML格式等数据格式。在发送GET请求时，payload通常是一个空字符串。payload的作用
在前端发送Ajax请求时，是将请求中的数据传输到后端服务器，后端服务器可以根据这些参数来处理请求，返回相应的结果给前端。通过合理的使用payload，可以使得前端与后端之间的数据交互更加高效、准确。同时，在某些需要传输大量数据的情况下，优化payload的传输方式可以提高性能和效率。

div.innerHTML = xhr.responseText===>后端给前端的反馈

后端针对post请求要有res.send()反馈前端才能针对xhr的response进行处理，也就是接收到了后端的send反馈信息

04- json

// json把后端send反馈的信息转换成了对象的形式

// json不用设置请求头

// 设置响应类型后，JSON.parse的功能就不用再写了

btn.onclick = function(){
            // 1、创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2、初始化，设置请求方式以及地址
            xhr.open("get","http://127.0.0.1:3000/json-server")
            // json不用设置请求头
            // 设置响应类型后，JSON.parse的功能就不用再写了
            xhr.responseType="json";
            // 3、发送请求
            xhr.send();
            // 4、接受相应
            xhr.onreadystatechange = function(){
                console.log("状态在改变");
                // 判断是否成功
                if(xhr.readyState === 4){
                    if(xhr.status >=200 &&xhr.status<300){
                        console.log(xhr.response.name);
                        div.innerHTML = xhr.response.name;
                    }
                }
            }