尚硅谷AJAX

最新推荐文章于 2023-07-28 18:27:55 发布
最新推荐文章于 2023-07-28 18:27:55 发布
阅读量256 收藏 3
点赞数 1
分类专栏： 前端学习笔记 文章标签： ajax javascript ajax跨域问题 jsonp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenshikada/article/details/119516838
版权

1.AJAX简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势: 无刷新获取数据。

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

2.XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML 和 HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据:
	name = "孙悟空",age = 18; gender = "男";

用XML表示:
	<student>
		<name>孙悟空</name>
        <age>18</age>
        <gender>男</gender>
	</student>

现在已经被JSON取代了。

用JSON表示:
	{"name":"孙悟空","age":18,"gender":"男"}

3.AJAX的特点

3.1 AJAX的优点

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

3.2 AJAX的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO不友好，(SEO意思: 是搜索引擎优化)

4. HTTP协议请求与响应的结构

HTTP协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

4.1 请求报文

HTTP请求格式

image-20210802161043826

URL包含: 路径和参数

请求报文的构成

image-20210802161206085

如果是GET请求，请求体为空，如果是POST请求，请求体可以不为空。

image-20210802161238950

4.2 相应报文

HTTP响应格式

image-20210802161256980

响应报文的构成

image-20210802161317390

image-20210802161329055

详细请看: https://blog.csdn.net/a19881029/article/details/14002273

5. Node.js安装

https://blog.csdn.net/qq_45632660/article/details/107918281

6.express框架

# npm init --yes 初始化
# npm i express 安装express npm如何安装在5博客里面有写。

# 1.引入express
	const express = require('express');
# 2.创建应用对象
	const app = express();

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

# 4.监听端口启动服务
	app.listen(8080,()=>{
	console.log("服务已经启动，8080端口监听中.....");
	})
	
#  node 文件名.js 启动测试 访问127.0.0.1:8080

6.1 案例准备

GET.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>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>
</html>

Server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Controll-Allow-Origin','*');

    //设置响应体
    response.send('HELLO AJAX');
});

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

6.2 GET请求(原生)

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

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button 元素
        const btn = document.querySelector('button')
        const result = document.querySelector("#result")
        //绑定事件
        btn.onclick = function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置请求方法 和 url
            xhr.open('GET','http://127.0.0.1:8000/server')
            // 传递参数 
            //xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')
            // 3. 发送
            xhr.send();
            // on when 当...时候
            // readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4
               /*
                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) {
                        // 处理结果  行 头 空行 体
                        // 1. 响应行
                        console.log(xhr.status); // 状态码
                        console.log(xhr.statusText); // 状态字符串
                        console.log(xhr.getAllResponseHeaders()); // 所有响应头
                        console.log(xhr.response); // 响应体

                        // 设置result 的文本
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

</html>

server.js

// 1. 引入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')
})

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

6.3 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>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 获取元素
        const result = document.getElementById('result');
        // 绑定事件
        result.addEventListener('mouseover', function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置类型 与 url
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            // 3.发送
            //    xhr.send()
            // 设置请求体 格式是灵活的 ，但是服务端要有对应的解析格式
            xhr.send('123')
            //    xhr.send('a=100&b=200&c=300')
            //    xhr.send('a:100&b:200&c:300')
            // 4. 事件绑定
            xhr.onreadystatechange = function () {
                // 判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>

</html>

server.js

// 1. 引入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.post('/server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('hello AJAX POST')
})

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

设置请求头

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

<body>
    <div id="result"></div>
    <script>
        // 获取元素
        const result = document.getElementById('result');
        // 绑定事件
        result.addEventListener('mouseover', function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置类型 与 url
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            // 设置请求头   预定义的请求头
            xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded')
            // 自定义的请求头
            xhr.setRequestHeader('name', 'atguigu')
            // 3. 发送
            // xhr.send()
            // 设置请求体 格式是灵活的 ，但是服务端要有对应的解析格式
            xhr.send('123')
            //  xhr.send('a=100&b=200&c=300')
            //  xhr.send('a:100&b:200&c:300')
            // 4. 事件绑定
            xhr.onreadystatechange = function () {
                // 判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>

</html>

// 1. 引入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.all('/server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('hello AJAX POST')
})

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

6.4 服务器相应JSON数据(原生)

JSON.html

JSON: 后端把JSON对象转换为字符串传递给前端，前端通过JSON把传递过来的字符串转换为对象并输出。

<!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>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div id="result">

    </div>
    <script>
        const result = document.getElementById('result');
        // 绑定键盘按下事件
        window.onkeydown = function() {
            // 发送请求
            const xhr = new XMLHttpRequest();
            // 设置响应体数据的类型（自动转换）
            xhr.responseType = 'json'
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            // 发送
            xhr.send();
            // 绑定事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回结果
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // console.log(typeof xhr.response);
                        //  1.手动对数据转换
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // console.log(typeof data);
                        //  2.自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name
                    }
                }
            }
        }
    </script>
</body>
</html>

server.js

// 1.引入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.post('/server',(request,response)=>{
//     //设置响应头
//     response.setHeader('Access-Control-Allow-Origin','*');

//     //设置响应体
//     response.send('HELLO AJAX');
// });
app.get('/json-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //响应一个数据
    const data = {
        name: 'atguigu'
    }
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(data);
});

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

6.4.1 nodemon包的安装

作用：每次修改完server.js不用重新运行，它会自动重新启动

image-20210803000424775

使用方法:终端输入：nodemon [对应文件名]

6.5 IE缓存问题(原生)

什么是IE缓存问题？

当IE浏览器第一次发送过请求后，浏览器会缓存本次请求的结果，下次再发出相同的请求时就直接返回上次的结果，对失效性要求较高的前后端交互不友好。

解决方式query加时间戳，确保每次请求的url都不一样

<!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>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div id="result">
    </div>
    <button>点击发送请求</button>
    <script>
           const result = document.getElementById('result');
           const btn = document.getElementsByTagName('button')[0];
            btn.onclick = function () {
               const xhr = new XMLHttpRequest();
               // 解决IE的缓存问题
               xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
               xhr.send();
               xhr.onreadystatechange = function() {
                   if (xhr.readyState === 4) {
                       if (xhr.status >= 200 && xhr.status < 300 ) {
                           result.innerHTML = xhr.response
                       }
                   }
               }
            }
    </script>
</body>
</html>

// 1. 引入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')
})
// 针对IE 缓存
app.get('/ie',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('hello IE')
})
// 可以接受所有类型的请求
// app.all('/server',(request,response)=>{
app.all('/json-server',(request,response)=>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*')
    // 响应一个数据
    const data = {
        name:'KAN'
    }
    // 对对象进行字符串转换
    let str = JSON.stringify(data)
    // 设置响应体
    response.send(str)
})

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

6.6 请求异常与网络超时(原生)

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>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div id="result">
    </div>
    <button>点击发送请求</button>
    <script>
           const result = document.getElementById('result');
           const btn = document.getElementsByTagName('button')[0];
            btn.onclick = function () {
               const xhr = new XMLHttpRequest();
               // 超时设置 2s
               xhr.timeout = 2000;
               // 超时回调
               xhr.ontimeout = function () {
                   alert('网络异常，请稍后重试')
               }
               // 网络异常回调
               xhr.onerror = function() {
                   alert('网络不通啊啊啊')
               }
               xhr.open('GET','http://127.0.0.1:8000/delay');
               xhr.send();
               xhr.onreadystatechange = function() {
                   if (xhr.readyState === 4) {
                       if (xhr.status >= 200 && xhr.status < 300 ) {
                           result.innerHTML = xhr.response
                       }
                   }
               }
            }
    </script>
</body>
</html>

server.js

// 1. 引入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");
});
// 针对IE 缓存
app.get("/ie", (request, response) => {
  // 设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  // 设置响应体
  response.send("hello IE");
});
// 延迟响应
app.get("/delay", (request, response) => {
  // 设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  setTimeout(function () {
    // 设置响应体
    response.send("延迟响应");
  }, 3000);
});
// 可以接受所有类型的请求
// app.all('/server',(request,response)=>{
app.all("/json-server", (request, response) => {
  // 设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  // 响应一个数据
  const data = {
    name: "KAN",
  };
  // 对对象进行字符串转换
  let str = JSON.stringify(data);
  // 设置响应体
  response.send(str);
});

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

image-20210803004048645

image-20210803004234887

image-20210803004303405

6.7 取消发送(原生)

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>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        // 获取元素
        const btns = document.querySelectorAll('button');
        let xhr = null;
        btns[0].onclick = function () {
            xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/delay');
            xhr.send();
        }
        // abort 取消请求
        btns[1].onclick = function() {
            xhr.abort()
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //定时器
    setTimeout(()=>{
        //设置响应体
    response.send('延时响应');
    },3000)
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

6.8 请求重复发送(原生)

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>重复请求问题</title>
</head>

<body>
    <button>点击发送</button>

    <script>
        // 获取元素
        const btns = document.querySelectorAll('button');
        let xhr = null;
        // 标识变量  
        let isSending = false //是否正在发送AJAX请求
        // btns[0].onclick = function () {
        //     if (!isSending) {  // 节流阀
        //         xhr = new XMLHttpRequest();
        //         // 修改 标识变量的值
        //         isSending = true
        //         xhr.open('GET', 'http://127.0.0.1:8000/delay');
        //         xhr.send();
        //         xhr.onreadystatechange = function () {
        //             if (xhr.readyState === 4) {
        //                 isSending = false
        //             }
        //         }
        //     } else return
        // }

        // 老书的写法 另一种方案 （看需求）
        btns[0].onclick = function () {
            // 判断标识变量
            if (isSending) xhr.abort();  //如果上次请求还没完成就取消掉上次的请求，重新开启一个请求
            xhr = new XMLHttpRequest();
            // 修改 标识变量的值
            isSending = true
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 修改标识变量
                    isSending = false
                }
            }

        }
    </script>
</body>

</html>

//同上

7.JQuery

html

<!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>
        // 使用jQuery发送get请求
        $('button').eq(0).click(function () {
            $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            }, 'json')
        })
        // 使用jQuery发送post请求
        $('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>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

8.axios

axios地址：https://github.com/axios/axios

<!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>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>
        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: 'KAN',
                    age: 18
                }
            }).then(value => {
                console.log(value);
            })
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                name: 'KAN',
                password: 123456
            }, {
                // url 
                params: {
                    id: 100,
                    vip: 10
                },
                // 请求头参数
                headers: {
                    height: 100,
                    weight: 200
                },
            })
        }
        btns[2].onclick = function () {
            axios({
                //请求方法
                method: 'POST',
                // url
                url: 'axios-server',
                // url参数
                params: {
                    vip: 10,
                    level: 30
                },
                // 头信息
                headers: {
                    a: 100,
                    b: 200
                },
                // 请求体参数
                data: {
                    username: 'KAN',
                    password: 123456
                }
            }).then(response => {
                console.log(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", "*");
  const data = {name:'KAN'}
  // response.send("Hello JQuery AJAX");
  response.send(JSON.stringify(data))
});

9.Fetch

image-20210803101929224

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

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>fetch 发送 AJAX请求</title>
</head>

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

</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{

});
//axios
app.all('/axios',(request,response)=>{
 
});
//fetch
app.all('/fetch',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

10. 跨域

同源策略是早由Netscape公司提出，是浏览器的一种安全策略。

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

违背同源策略就是跨域。

index.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>Document</title>
</head>

<body>
    <h1>啊KNA学跨域</h1>
    <button>点击获取数据</button>
    <script>
        const btn = document.querySelector('button')

        btn.onclick = function () {
            const x = new XMLHttpRequest();
            // 这里是满足同源策略的，所以url 可以简写
            x.open("GET", "/data");
            x.send();
            // 绑定事件
            x.onreadystatechange = function (
            ) {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        console.log(x.response);
                    }
                }
            }

        }
    </script>
</body>

</html>

server.js

const express = require("express");

const app = express();

app.get("/home", (request, response) => {
  // 响应一个页面
  response.sendFile(__dirname + "/index.html");
});

app.get("/data", (request, response) => {
  response.send("用户数据");
});

app.listen(9000, () => {
  console.log("服务已经启动...");
});

10.1 同源策略

10.2 如何解决跨域

10.2.1 JSONP

1.JSONP是什么

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

2.JSONP怎么工作?

在网页有一些标签天生具有跨域能力，比如: img link iframe script

JSONP就是利用script标签的跨域能力来发送请求的。

3.JSONP的使用

https://blog.csdn.net/inite/article/details/80333130

原理

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理演示</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取 result 元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

</html>

server.js

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装


//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});



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

实践

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>案例</title>
</head>

<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        // 获取 input 元素
        const input = document.getElementById('username')
        const p = document.querySelector('p')

        // 声明 handle 函数
        function handle(data) {
            input.style.border = '1px solid pink',
                p.innerHTML = data.msg
        }
        // 绑定事件
        input.onblur = function () {
            // 获取用户的输入值
            let username = this.value;
            // 向服务器端发送请求 检测用户名是否存在
            // 1. 先创建一个 script 标签
            const 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>

server.js

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});




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

使用jquery完成跨域

html

<!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 () {
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
                // console.log(data);
                $('#result').html(`
                    名称：${data.name}<br>
                    兴趣：${data.hoby}
                    `)
            })
        })
    </script>
</body>

</html>

server.js

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
       name:"快乐小码农",
       hoby:['篮球','游泳','吹水']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

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




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

10.2.2 CORS

1.CORS是什么?

CORS,跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

MDN说明：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

2.CORS怎么工作?

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应执行。

3.CORS的使用

https://blog.csdn.net/qq22692150/article/details/99011726?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

未设置跨域前

image-20210803161304547

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>Document</title>
    <style>
        #rusult {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function () {
            // 1.创建对象
            const x = new XMLHttpRequest();
            // 2. 初始化设置
            x.open('GET', 'http://127.0.0.1:8000/cors-server');
            // 3. 发送
            x.send();
            // 4. 绑定事件
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        // 输出响应体
                        console.log(x.response);
                    }
                }
            }
        }

    </script>
</body>

</html>

server.js

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
});
app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});


//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
云诗卡达
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷_教学课件_Ajax
05-11
尚硅谷_教学课件_Ajax
Ajax学习笔记
weixin_44364028的博客
08-25 101
#目录 一、Ajax简介 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1、XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是
AJAX学习笔记
丑小鸭变黑天鹅的博客
03-05 304
AJAX学习笔记一、AJAX 简介二、XML 简介三、AJAX 的特点1、 AJAX 的优点2、AJAX 的缺点四、HTTP协议请求报文与响应文本结构HTTP请求报文响应报文HTTP状态码五、Chrome网络控制台查看通信报文六、Node.js安装七、Express简单使用八、AJAX请求的基本操作1、AJAX发送GET请求2、AJAX发送POST请求3、服务端响应JSON数据4、AJAX-IE缓存问题解决5、AJAX请求超时与网络异常处理6、AJAX取消请求7、AJAX请求重复发送问题8、jQuery发送
Ajax 学习笔记
vengu733的博客
07-19 289
AsynchronousJavascriptAndXML异步的JavaScript和xml。AJAX是一种从网页访问Web服务器的异步无刷新技术。为了解决传统的web应用当中"请求"-"等待"-"响应"的整个过程的弊端而出现的一种创新的技术。异步同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。无刷新按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面）......
尚硅谷Ajax课件.pdf
07-31
尚硅谷ajax课件讲义
尚硅谷Ajax笔记（word）
01-10
尚硅谷ajax视频课程同步笔记绝对是可以使用的哦，这个是自己总结的笔记
尚硅谷ajax视频源码
08-17
尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码...
尚硅谷Ajax
04-19
本视频教程涵盖 Ajax 的实现原理、XMLHttpRequest 实现 Ajax、Ajax 传输的数据格式(HTML、XML、JSON)、jQuery 实现 Ajax、使用 Jackson、jQuery BlockUI 插件、经典案例等内容。 本视频教程经典案例包括：验证用户名...
尚硅谷Ajax视频教程 百度云
05-27
尚硅谷Ajax视频教程 百度云链接和密码，老师讲的非常好，现分享出来供大家下载
ajax学习笔记
淡忘~浅思
04-15 1824
一、js原生发送Ajax请求 关于Ajax的简单介绍，可以戳此：DOM笔记（五）：JavaScript的常见事件和Ajax小结 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo</title> </head> <body> <button id="btn">ajax加载</button>
Ajax的学习笔记
weixin_46030955的博客
04-13 139
Ajax简介 首先Ajax是什么？ Ajax的本质是异步的js和xML XML是什么？ 1、可扩展标记语言 2、被设计用来传输和存储数据 3、和HTML相似，但HTML是预定义标签，而XML是自定义标签，用来表示一些数据 下面是一个XML自定义标签，xml不可以做任何事 Ajax的作用：可以在浏览器中向服务端发送异步请求 Ajax的优点：1、无需刷新页面而与服务器进行通信 ...
AJAX 学习笔记
最新发布
sin_0119的博客
07-28 160
ajax学习笔记，包含了jquery实现ajax的原理，了解之后能更好的进行js逆向的学习
ajax嵌套ajax
07-28
在前端开发中，可以使用Ajax嵌套Ajax来实现多个异步请求的依次执行。具体步骤如下： 1. 在第一个Ajax请求的回调函数中，发送第二个Ajax请求。可以使用`$.ajax()`方法或者其他类似的方法发送异步请求。 2. 在第二个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值