0
点赞
收藏
分享

微信扫一扫

前端核心四：AJAX

流计算Alink 2022-07-12 阅读 71
前端ajaxjavascript

🍿*★如果文章对你有帮助【关注👍点赞❤️收藏⭐】一起努力！★* 🍿

👩🏻AJAX简介

1️⃣AJAX简介

2️⃣AJAX特点

👨🏻HTTP协议

1️⃣请求报文

在这里插入图片描述

在这里插入图片描述

2️⃣响应报文

在这里插入图片描述

在这里插入图片描述

3️⃣状态码

4️⃣响应状态码

🧑🏻开发准备

1️⃣使用Express

# 初始化
npm init --yes
# 安装express框架
npm i express

// 1、引入express
// const express = require('express');
import express from 'express';

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

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

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

2️⃣简单案例

<!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>
</head>
<body>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>

    <button>点击发送</button>
    <div id="result"></div>
</body>
</html>

3️⃣发送 GET 请求

// 1、引入express
// const express = require('express');
import express from 'express';

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

// 3、创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.get('/server', (request, response) => {
      // 设置响应头，设置允许跨域
      response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('Hello AJAX');
});

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

const xhr = new XMLHttpRequest();

xhr.open('GET', 'http://127.0.0.1:8000/server');

xhr.send();

xhr.onreadystatechange = function () {...}

<!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>AJAX发送Get请求</title>
</head>
<body>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
    <button>点击发送</button>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        const button = document.getElementsByTagName("button")[0];
        button.onclick = function () {
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 3、发送
            xhr.send();
            // 4、事件绑定，处理服务器端返回的结果
            xhr.onreadystatechange = function () {
                // 服务端返回所有结果
                if (this.readyState === 4) {
                    // 2xx 成功
                    if (this.status >= 200 && this.status < 300) {
                        // 状态码、状态字符串
                        console.log("status：" + this.status); // 200
                        console.log("statusText：" + this.statusText); // OK
                        // 响应头
                        console.log("Headers：" + this.getAllResponseHeaders()); // content-length: 13  content-type: text/html; charset=utf-8
                        // 响应体
                        console.log("response：" + this.response); // Hello Express
                        // 将响应体内容设置为文本
                        result.innerHTML = this.response;
                    }
                }
            }
        };
    </script>
</body>
</html>

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

4️⃣发送 POST 请求

// 1、引入express
// const express = require('express');
import express from 'express';

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

// 3、创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.post('/server', (request, response) => {
      // 设置响应头，设置允许跨域
      response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('Hello AJAX');
});

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

    <script>
        const result = document.getElementById('result');
        result.addEventListener('mouseover', function () {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status >= 200 && this.status < 300) {
                    result.innerHTML = this.response;
                }
            };
        });
    </script>

xhr.send('a=100&b=200&c=300');

5️⃣设置请求头信息

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

xhr.setRequestHeader('name', 'atguigu');

app.all('/server', (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应头，允许任意类型的头信息
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('Hello Express');
});

6️⃣响应 JSON 数据

const data = {
    name:'Hello Ajax'
}
let str = JSON.stringify(data);
response.send(str);

let response = this.response;
console.log(typeof response); // string
data = JSON.parse(response);
result.innerHTML = data.name;

👧🏻自动重启工具

👦🏻请求超时

1️⃣请求超时

# js文件
setTimeout(() =>{
    response.send('Hello Ajax');
}, 2000);

# html文件
// 设置超时时间
xhr.timeout = 1000;
// 设置超时回调
xhr.ontimeout = () => {
    alert('请求超时！');
};

2️⃣网络异常

# html 文件
// 设置网络异常回调
xhr.onerror = () => {
    alert("网络异常");
};

👶🏻手动取消请求

const btns = document.getElementsByTagName('button');
const btn1 = btns[0];
const btn2 = btns[1];

let xhr = null;
btn1.addEventListener('click', () => {
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8000/server-timeout');
    xhr.send();
});
btn2.addEventListener('click', () => {
    xhr.abort();
});

👴🏻请求重复发送

const btns = document.getElementsByTagName('button');
let xhr = null;
// 标识是否正在发送 AJAX 请求
let isSending = false;
btns[0].addEventListener('click', () => {
    // 若上一个请求尚未完成，则手动取消请求
    if (isSending) {
        xhr.abort();
    }
    xhr = new XMLHttpRequest();
    isSending = true;
    xhr.open('GET', 'http://127.0.0.1:8000/servertimeout');
    xhr.send();
    xhr.onreadystatechange = () => {
        // 请求响应完毕后，修改变量标识
        if (xhr.readyState === 4) {
            isSending = false;
        }
    };
});

🧓🏻JQuery发送AJAX请求

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">

1️⃣GET 请求

$.get(url,[data],[callback],[type])

btns.eq(0).click(() => {
    $.get('http://127.0.0.1:8000/server-jquery', { a: 100, b: 200 }, (data) => {
        console.log(typeof data, data); // object {name: "Hello jquery"}
    }, 'json');
});

2️⃣POST请求

$.post(url,[data],[callback],[type])

btns.eq(1).click(() => {
    $.post('http://127.0.0.1:8000/server-jquery', { a: 100, b: 200 }, (data) => {
        console.log(typeof data, data); // string {name: "Hello jquery"}
    },"json");
});

3️⃣通用方法

$.ajax({
    // 请求地址
    url: 'http://127.0.0.1:8000/server-jquery',
    // 请求参数
    data: { a: 100, b: 200 },
    // 请求类型
    type: 'GET',
    // 响应体类型
    dataType: 'json',
    // 成功回调
    success: data => {
        console.log(typeof data, data); // string {name: "Hello jquery"}  开启dataType后：object {name: "Hello jquery"}
    },
    // 超时时间
    timeout: 1000,
    // 失败的回调
    error: () => {
        alert('出错了');
    },
    // 头信息
    headers: {
        c: 300,
        d: 400
    }
});

👩🏻‍🦰Axios发送AJAX请求

1️⃣GET 请求

 axios#get(url[,config])
  • 函数返回结果是一个promise对象，用then回调处理
axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.get('server-axios', {
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    headers: {
        c: 300,
        d: 400
    }
}).then(value => {
    console.log(value);
});

2️⃣POST 请求

axios#post(url[,data[,config]])

axios.post('server-axios', {
    // 请求体
		e: 500,
  		f: 600  
}, {
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    headers: {
        c: 300,
        d: 400
    }
}).then(value => {
    console.log(value);
});

3️⃣通用方法

axios(url[, config])

axios({
    method: 'POST',
    url: 'server-axios',
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    headers: {
        c: 300,
        d: 400
    },
    // 请求体
    data: {
        e: 500,
        f: 600
    },
    // 响应体类型
    dataType: 'json'
}).then(response => {
    console.log(response.status); // 200
    console.log(response.statusText); // OK
    console.log(response.headers); // {content-length: "22", content-type: "text/html; charset=utf-8"}
    console.log(typeof response.data, response.data); // object {name: "Hello axios"}
});

👨🏻‍🦰Fetch函数发送AJAX请求

fetch('http://127.0.0.1:8000/server-fetch?a=100&b=100', {
    // 请求方法
    method: 'POST',
    // 请求头
    headers: {
        c: 300,
        d: 400
    },
    // 请求体
    body: 'e=500&f=600'
}).then(response => {
    console.log(response);
});
  • 如果我们只想要响应体内容，可以修改then回调
...
.then(response => {
    return response.text();
}).then(response => {
    console.log(typeof response, response); // string {"name":"Hello fetch"}
});
  • 如果明确响应体内容为 json 字符串，可以按如下修改，将会返回一个 object 对象
...
.then(response => {
    return response.json();
}).then(response => {
    console.log(typeof response, response); // object {"name":"Hello fetch"}
});

🧑🏻‍🦰跨域问题

1️⃣同源策略

  • 同源：协议、域名、端口号必须完全相同，违背同源策略就是跨域

2️⃣JSONP的使用

<!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>
</head>

<body>
    <style>
       
    </style>
    <button>点击发送</button>
    <div id="result"></div>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        //声明handle函数
        function handle(data) {
            var input = document.querySelector('input');
            input.style.border = "solid 1px #f00";
            //修改p标签的提示文本
            var p = document.querySelector('p');
            p.innerHTML = data.msg;
        }
    </script>
    <script>
        const input = document.querySelector('input');
        input.onblur = () => {
            let username = this.username;
            // 1、创建一个 script 标签
            var script = document.createElement('script');
            // 2、设置 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            // 3、将 script 插入文档中
            document.body.appendChild(script);
        };
    </script>
</body>

</html>

// 1、引入express
// const express = require('express');
import express from 'express';

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

// 3、创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.all('/check-username', (request, response) => {
  const data = {
      exist: 1,
      msg:'用户名已存在'
  };
  let str = JSON.stringify(data);
  response.end(`handle(${str})`); 
});

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

3️⃣JQuery发送JSONP请求

$.getJSON(url,[data],[fn])

<button>点击发送请求</button><br><br>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $('button').eq(0).click(() => {
        $.getJSON('http://127.0.0.1:8000/server-jsonp-jquery?callback=?', data => {
            $('#result').html(data.msg);
        });
    });
</script>

app.all('/server-jsonp-jquery', (request, response) => {
    const data = {
        exist: 1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data);
    response.end(`(${str})`);
});
  • 此时并没有任何输出，但是请求参数中自动生成了一个callback的参数
    在这里插入图片描述
// 接收callback参数
var cb = request.query.callback;
response.end(`${cb}(${str})`);

4️⃣跨域资源共享

  • 我们要想进行跨域请求，必须在服务端返回结果时设置允许跨域的响应头
// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

4️⃣响应首部字段

  • 一般使用，允许跨域、带有自定义头部信息、任意方法
response.setHeader("Access-Control-Allow-Origin", "*"); 
response.setHeader("Access-Control-Allow-Headers", "*"); 
response.setHeader("Access-Control-A1low-Method", "*");

🍿*★如果文章对你有帮助【关注👍点赞❤️收藏⭐】一起努力！★* 🍿

在这里插入图片描述
在这里插入图片描述

举报

相关推荐

AJAX学习（四）-（axios核心的原理）

ioshtml封装Vue.js前端开发

前端学习Ajax

前端ajax

前端开发--ajax

ajax简单使用ajax入门html服务端数据Linux系统/运维

【前端】AJAX解析

ajax

前端（三）：Ajax

macos蓝桥杯职场和发展c++

【前端系列】AJAX请求

前端ajaxjavascriptDataJSONJavaScript前端开发

JavaWeb（四：Ajax与Json）

linux

【汇智学堂】-AJAX+JAVA之四（修改数据前端界面）

AJAX+JAVAxmljqueryhtmlJavaScript前端开发

前端学习笔记-Ajax篇

javatypescript开发语言

前端 | Ajax&Axios模块

机器学习人工智能
0 条评论