尚硅谷ajax学习记录

最新推荐文章于 2024-05-06 17:34:57 发布

言之。

最新推荐文章于 2024-05-06 17:34:57 发布

阅读量1.1w

点赞数 2

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/qq_44810930/article/details/117621990

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AJAX

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML)

环境搭建

安装node.js
```
C:\Users\xlgui>node -v
v14.16.1
```

新建一个文件夹例如ajaxDemo, 进入

npm init --yes
# 安装express 
npm i express

第一个案例

在这里插入图片描述

使用Ajax发送GET

前端get.html

<body>
    <button>点击发送请求</button> 
    <div id="result"></div>
</body>
<script>
    // 获取按钮
    const btn = document.getElementsByTagName("button")[0];
    const div = document.getElementById("result");
    // 绑定点击事件
    btn.onclick = function() {
        // 发送ajax请求的四个步骤
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化: 打开链接, 包括请求的方法和url
        xhr.open("GET", "http://127.0.0.1:8000/server");  // 前面的IP也要写
        // 3. 发送
        xhr.send();
        // 4. 事件绑定 处理服务端返回的结果 on realystate change  当就绪状态发生改变
        //      有5中状态: 0, 1, 2, 3, 4
        //          0 表示XMLHttpRequest对象刚初始化, 1表示open()完成, 2表示发生send()完成, 
        //                  3表示返回部分数据, 4表示返回全部数据
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                // 再判断响应码
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.status);
                    console.log(xhr.statusText);
                    console.log(xhr.getAllResponseHeaders());
                    console.log(xhr.response);
                    div.innerHTML = xhr.response;
                }
            }
        }
    }
</script>

服务器端sever.js

// 1. 引入express
const { request, response } = require('express');
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
//      参数request是对请求报文的封装, response是对响应报文的封装
app.get("/server", (request, response)=>{
    // 设置相应头-->允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    // 设置相应
    response.send("hello, ajax");
});

app.listen(8000, ()=>{
    console.log("服务器已启动,端口8000")
})

启动服务端

node "e:\download\bilibi\ajax尚硅谷\ajaxDemo\课堂\代码\原生ajax\server.js"
服务器已启动,端口8000

双击打开get.html

在这里插入图片描述

Ajax发送Post

前端post.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>post请求</title>
    <style>
        #result {
            width: 100px;
            height: 100px;
            border: springgreen solid 2px;
        }
    </style>
</head>
<body>
    <div id="result"> </div>
    <script>
        const ret = document.getElementById("result");
        // 绑定事件
        ret.addEventListener("mouseover", function() {
            // console.log("result");
            const xhr = new XMLHttpRequest();
            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) {
                        ret.innerHTML = xhr.response;
                    }
                }
            }

        });
    </script>
</body>
</html>

后端 server.js

// 1. 引入express
const { request, response } = require('express');
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
//      参数request是对请求报文的封装, response是对响应报文的封装
app.get("/server", (request, response)=>{
    // 设置相应头-->允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    // 设置相应
    response.send("hello, ajax");
});

// 添加一个post相应
app.post("/server", (request, response)=>{
    // 设置相应头-->允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    // 设置相应
    response.send("ajax, post");
});

app.listen(8000, ()=>{
    console.log("服务器已启动,端口8000")
})

使用post请求传递参数

在xhr.send()方法中进行设置

            xhr.send("a=1&b=2");

在这里插入图片描述

在send()中可以传任意的字符串, 常见是上面这种用&连接的键值对和json, 只要你能在服务端正确地解析即可

设置请求头

在这里插入图片描述

言之。

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
尚硅谷ajax学习记录

AJAXAjax即Asynchronous Javascript And XML（异步JavaScript和XML)环境搭建安装node.jsC:\Users\xlgui>node -vv14.16.1新建一个文件夹例如ajaxDemo, 进入npm init --yes# 安装express npm i express第一个案例使用Ajax发送GET前端get.html<body> <button>点击发送请求</b
复制链接

扫一扫