FrontEnd笔记 -- Ajax

2024-04-07 09:13:50

文章目录

一、概述
二、环境准备
三、原生 Ajax
四、封装 Ajax
五、跨域问题

一、概述

简介

全称为 Asynchronous Javascript And XML，就是异步的 JS 和 XML；
通过 Ajax 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据；
Ajax 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

优点

可以无需刷新页面而与服务端进行通信；
允许根据用户事件来更新部分页面内容。

缺点

没有浏览历史，不能回退；
存在跨域问题；
SEO 不友好（异步请求内容不存在于原生页面中）。

二、环境准备

Node.js

为了演示 Ajax 异步请求效果，必须可提供请求响应的服务端。

Express 框架

Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

初始化项目及安装 express

PS E:\BUFFER\VScodeProjects\ajax_study> npm init --yes
PS E:\BUFFER\VScodeProjects\ajax_study> npm i express

编写服务代码

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

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

//3. 创建路由规则
app.get('/', (request,response)=>{
    //即：请求根时返回字符串
    response.send('Hello, Express !')
})

//4. 指定端口并启动服务
app.listen(8000, ()=>console.log('service started, listen on port 8000 ..'))

启动服务

PS E:\BUFFER\VScodeProjects\ajax_study\code\1.express> node .\basic_use.js
service started, listen on port 8000 ..

前端验证

三、原生 Ajax

3.1 GET

基本请求流程

需求：点击按钮，不刷新页面的情况下发送请求且将响应写入页面中。

页面

<!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 #00dc00;
        }
    </style>
</head>
<body>
    <button>click to send request</button>
    <div id="result"></div>
</body>
<script>
    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')
        //3. 发送
        xhr.send()
        //4. 事件绑定：处理服务端返回的结果
        xhr.onreadystatechange = function() {
        	//readystate
       	 	//  0 - 未初始化
        	//  1 - open 方法已调用完毕
        	//  2 - send 方法已调用完毕
        	//  3 - 服务端返回部分结果
        	//  4 - 服务端返回所有结果
            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)//响应体

                    //渲染请求结果
                    result.innerHTML = xhr.response
                }
            }
        }
    }
</script>
</html>

服务端

const express = require('express')
const app = express()

app.get('/server', (request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')

    response.send('Hello, Ajax !')
})

app.listen(8000, ()=>console.log('service started, listen on port 8000 ..'))

前端验证

3.2 POST

基本请求流程

需求：鼠标移入框中，不刷新页面的情况下发送请求且将响应写入页面中。

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #00dc00;
        }
    </style>
</head>
<body>
    <div id="result"></div>
</body>
<script>
    const result = document.getElementById('result')
    result.addEventListener('mousemove', function() {
        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)
                    result.innerHTML = xhr.response
        }
    })
</script>
</html>

服务端

const express = require('express')
const app = express()

app.post('/server', (request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('Hello, Ajax Post !')
})

app.listen(8000, ()=>console.log('service started, listen on port 8000 ..'))

验证

3.3 参数设置

query 参数设置

xhr.open('GET', 'http://127.0.0.1:8000/server?a=xxx&b=xxx')

body 参数设置

xhr.send('anything-you-want-as-long-as-server-end-can-recognize-and-handle-it')

header 参数设置

xhr.open('xxx')

//设置请求体内容的类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.send('xxx)

express.get('/server-json', (request,response)=>{
	//设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置允许用户自定义 Header 参数
    response.setHeader('Access-Control-Allow-Headers','*')
})

3.4 JSON 数据处理

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX JSON</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #00dc00;
        }
    </style>
</head>
<body>
    <div id="result"></div>
</body>
<script>
    const result = document.getElementById('result')
    window.onkeydown = function() {
        const xhr = new XMLHttpRequest()
        //2.1 自动转换：设置响应类型
        xhr.responseType = 'json'
        xhr.open('GET', 'http://127.0.0.1:8000/server-json')
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send()
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4)
                if(xhr.status >= 200 && xhr.status <= 300) {
                    //1.手工方式
                    // let data = JSON.parse(xhr.response)
                    // result.innerHTML = data.name

                    //2.2 自动转换
                    result.innerHTML = xhr.response.name
                }
        }
    }
</script>
</html>

服务端

const express = require('express')
const app = express()

app.get('/server-json', (request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')

    const data = {
        name: 'rayslee',
        age: 18
    }
    response.send(JSON.stringify(data))
})

app.listen(8000, ()=>console.log('service started, listen on port 8000 ..'))

验证

3.4 nodemon 插件

官网：https://www.npmjs.com/package/nodemon

功用：服务端代码发生变动时，自动重启。

npm install -g nodemon
PS E:\BUFFER\VScodeProjects\ajax_study\code\2.raw_ajax> nodemon .\server.js

3.5 IE缓存问题

IE 浏览器默认会在本地缓存 Ajax 请求的结果，当服务端数据更新而 IE 缓存还未失效时，用户就看到最新的结果了。

在请求时添加 Query 参数，浏览器将判定每次都是不同的请求，本次缓存失效。

xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now())

3.6 请求超时与网络异常

// 设置请求超时时间为2秒钟
xhr.timeout = 2000
// 超时后触发的回调函数
xhr.ontimeout = function() {...}
// 网络异常触发的回调函数
xhr.onerror = function() {...}

3.7 取消 Ajax 请求

<button>SEND</button>
<button>CANCEL</button>
<script>
const btns = document.querySelectorAll('button')
let x = null

// 发送请求
btns[0].onclick = function() {
  x = new XMLHttpRequest()
  x.open('GET', 'http://xxx.x.x.xx/xxx')
  x.send()
}

// 取消请求
btns[1].onclick = function() {
  x.abort()
}
</script>

四、封装 Ajax

4.1 jQuery 中的 Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <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>
</body>
</html>

const express = require('express')
const app = express()

//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

app.listen(8000, ()=>console.log('service started, listen on port 8000 ..'))

4.2 axios 中的 Ajax

GitHub 主页：https://github.com/axios/axios

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }
    
        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);
            })
        }
    </script>
</body>
</html>

//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

4.3 Fetch 函数发送 Ajax

方法详解：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

五、跨域问题

同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

5.1 JSONP

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持get 请求。

在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP 就是利用script 标签的跨域能力来发送请求的。

JSONP 的使用

动态的创建一个script 标签

var script = document.createElement("script")

设置script 的src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name)
}

将script 添加到body 中

document.body.appendChild(script)

服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
	console.log("收到请求")
	var callback = req.query.callback
	var obj = {
		name:"孙悟空",
		age:18
	}
	res.send(callback+"("+JSON.stringify(obj)+")")
})

5.2 jQuery 发送 JSONP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result{
            width:300px;
            height:100px;
            border:solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
        	//callback=?  固定写法
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

app.all('/jquery-jsonp-server',(request, response) => {
    const data = {
        name:'尚硅谷',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});

5.3 CORS

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享；
CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和post 请求；
跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源；
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS 的使用

router.get("/testAJAX" , function (req , res) {
	//通过res 来设置响应头，来允许跨域请求
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
	res.set("Access-Control-Allow-Origin","*");
	res.send("testAJAX 返回的响应");
});

码农公寓

文章目录

一、概述

二、环境准备

三、原生 Ajax

3.1 GET

3.2 POST

3.3 参数设置

3.4 JSON 数据处理

3.4 nodemon 插件

3.5 IE缓存问题

3.6 请求超时与网络异常

3.7 取消 Ajax 请求

四、封装 Ajax

4.1 jQuery 中的 Ajax

4.2 axios 中的 Ajax

4.3 Fetch 函数发送 Ajax

五、跨域问题

5.1 JSONP

5.2 jQuery 发送 JSONP

5.3 CORS

相关文章