AJAX基础与进阶

news2024/12/28 4:23:56

一、express基本使用

1. 在最外层启动终端，添加文件

2. 创建 express 框架

// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/' , (express,request)=>{
  // 设置响应
  response.send('HELLO EXPRESS');
});

// 4. 监听端口启动服务
app.listen(8000, ()=>{
  console.log("服务已启动，8000 端口监听中....");
});

3. 右击这里点开在终端打开

4. 输入node express基本使用·js

5. 打开浏览器搜索网址127.0.0.1:8000

注意：这三个文件都要有，一个没有都不可以

二、原生AJAX

1. 前端准备

2.服务端准备（express框架）

tip ：8000端口已经被占用

在node中按Ctrl C 关闭八千端

回到原来终端，在用node 文件名，实现运行

tip ：看到 xhr 一般要想到ajax

3. get

响应头只要是2开头的都表示成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变
            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }


        }
    </script>
</body>
</html>

4.get请求中设置参数

在 url 后面缀参数，用问号分隔，多个参数之间用 & 分隔

5.post

js代码修改之后，需要重新调用后台，Ctrl C关闭之前端口，重新启用新端口

6. post请求中设置参数

7. 设置请求头

8.JSON

注意：send（）只能接受字符串类型，想要传递对象等其他类型，则必须进行转换

1. 黄框中的响应头，可以设置任意的响应头，自定义的也可以

2. 红框中，将对象转变成字符串，使得send可以传递对象

获取复杂的字符串数据

9. IE缓存

针对 IE 缓存的 JS 代码

HTML代码

10. 请求超时和网络异常处理

timeout 超时取消（超时的话，取消该操作）

11. 取消请求

用 abort

12. 重复发送请求

一旦结果是false，就不会发送新的请求

三、jQuery 中的AJAX

1. get 与 post

加 json 会变为对象，不加的话处理完会变成字符串

        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });

2. 通用方法

将响应体从字符串变为对象

   <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });

        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });

    </script>

四、axios

1. 发送AJAX请求

① get

② post

1. 先url 2. 再请求体 3. 再其他配置

③ 通用方式

 btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }