Ajax零基础入门（尚硅谷）

我年薪百万

已于 2024-02-20 20:36:22 修改

阅读量150

点赞数

文章标签： ajax javascript 前端

于 2023-03-22 16:59:39 首次发布

本文链接：https://blog.csdn.net/qq_60893085/article/details/129506299

版权

文章目录

客户端与服务器
客户端与服务器的通信过程
- 基于浏览器的开发者工具分析通信过程
服务器对外提供了哪些资源
- 列举网页中常见的资源
- 资源的请求方式
了解Ajax
- Ajax的典型应用场景
jQuery中的Ajax
接口
express的基本使用以及AJAX代码
Axios发送AJAX请求
- Axios函数发送Ajax请求
- 使用fetch函数发送AJAX请求
跨域

客户端与服务器

服务器：上网过程中，负责存放和对外提供资源的电脑叫做服务器。 服务器的本质就是一台电脑，只不过它的性能要比个人电脑高很多。
在这里插入图片描述
客户端
上网过程中负责获取和消费资源的电脑，叫做客户端

URL地址概念：
URL全程是（UniformResourceLocator）中文叫同意资源定位符用于标志互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源存放位置，从而真正访问到对应资源。
URL地址的组成部分
URL地址一般由三部分组成：
①客户端与服务器之间的通信协议
②存有该资源的服务器名称
③资源在服务器上具体的存放位置
在这里插入图片描述

客户端与服务器的通信过程

在这里插入图片描述
注意：
①客户端与服务器之间的通信过程，分为 请求-处理-响应三个步骤。
②网页中的每一个资源，都是通过请求-处理-响应的方式从服务器获取过来的。

基于浏览器的开发者工具分析通信过程

在这里插入图片描述
1.打开Chrome浏览器
2.Ctrl+Shift+I打开Chrome的开发者工具
3.切换到Network面板
4.选中Doc页签
5.刷新页面，分析客户端与服务器的通信过程

服务器对外提供了哪些资源

列举网页中常见的资源

在这里插入图片描述
数据也是资源
网页中的数据，也是服务器对外提供的一种资源。例如：股票数据、各行各业排行榜等。
数据也是服务器对外提供的一种资源。只要是资源，必然要通过请求-处理-响应的方式进行获取。
在这里插入图片描述
如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象。
XMLHttpRequest(简称xhr)是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。
最简单的用法var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get 和post请求。

get请求通常用于h获取服务端资源（向服务器要资源）
- 例如：根据URL地址，从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等。
post请求通常用于向服务器提交数据（往服务器发送资源）
- 例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据操作。

了解Ajax

全程：Asynchronous Javascript And XML(异步JS和XML)
通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax
之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是Ajax能让我们轻松实现网页与服务器之间的数据交互。

Ajax的典型应用场景

用户名检测：注册用户时，通过ajax的形式，动态监测用户名是否被占用
在这里插入图片描述
搜索提示：当输入搜素关键字时，通过Ajax，动态加载搜索提示列表

数据分页显示：当点击页码值得时候，通过Ajax的形式，根据页码值动态刷新表格的数据

数据的增删改查：数据的添加、删除、修改、查询操作都需要通过Ajax的形式，来实现数据的交互。
在这里插入图片描述

jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下：

`$.get()`

jQuery中$.get()函数的功能单一，专门用来发起get请求，专门用来发起get请求，从而将服务器上的资源请求到客户端来使用。

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

注意：中括号不是代表数组，而是代表可选参数。
在这里插入图片描述

$.get()发起不带参数的请求

使用$.get()函数发起不带参数的请求时，直接提供请求的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>
    <script src="./lib/jquery.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->


</head>

<body>
    <button id="btnGET">发起不带参数的GET请求</button>
    <script>
        $(function() {
            $('#btnGET').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    console.log(res);

                })
            })
        })
    </script>
</body>

</html>

$.get()发起带参数的请求

在这里插入图片描述

`$.post()`

jQuery中$.post()函数的功能单一，专门用来发起post请求，从而向服务器提交数据。
$.post()函数语法如下：

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

在这里插入图片描述

$.post()向服务器提交数据

使用$post()向服务器提交数据的示例代码如下：
在这里插入图片描述

`$.ajax()`

**语法：**相比于 $. g e t () 和$ .post()函数，jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
基本语法：

$.ajax({
	type:'',//请求的方式，例如GET或POST
	url:'',//请求的URL地址
	data:{},//这次要携带的数据
	success：function(res){}//请求成功之后的回调函数
})

使用$.ajax()发起GET请求

使用$.ajax()发起GET请求时，只需要将type属性的值设置为‘GET即可’
在这里插入图片描述

使用$.ajax()发起POST请求时，只需要将type属性设置为POST即可。

在这里插入图片描述

接口

使用Ajax请求数据时，被请求的URL地址，就叫做
数据接口（简称接口）。同时，每个接口必须有请求方式。
在这里插入图片描述

分析接口的请求过程

通过GET方式请求接口的过程

在这里插入图片描述

通过POST方式请求接口的过程

在这里插入图片描述

接口测试工具

什么是接口测试工具：为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
**好处：**接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试
在这里插入图片描述
一篇使用连接

在这里插入图片描述

接口文档

什么是接口文档？
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下六项内容，从而为接口的调用提供依据：

接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
接口URL：接口的调用地址。
调用方式：接口的调用方式：如GET或POST
参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这四项内容。
响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明
3项内容。
返回示例（可选）：通过对象的形式，例举服务器返回数据结构

在这里插入图片描述

express的基本使用以及AJAX代码

1.安装node.js
2.vscode 在最外层文件打开终端

npm init --yes

PS D:\VScode练手\ajax> npm init --yes
Wrote to D:\VScode练手\ajax\package.json:

{
  "name": "ajax",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm i express

在这里插入图片描述
注意：在此之前要删除C:\Users{账户}\下的.npmrc文件…

//1. 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response
app.get('/', (request, response) => {
	//设置响应
	response.send('HELLO EXPRESS');
});
//4.监听端口服务
app.listen(8000, () => {
	console.log('服务已经启动,8000端口监听中...');
});

接下来启动node命令对脚本执行
注意这里是node+要执行的脚本名字。

node express基本使用.js

在这里插入图片描述
网址127.0.0.1：8000

拓展：127.0.0.1：8000
回送地址
“127.0.0.1是回送地址，指本地机，一般用来测试使用。回送地址（127.x.x.x）是本机回送地址（Loopback Address），即主机IP堆栈内部的IP地址，主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用回送地址发送数据，协议软件立即返回，不进行任何网络传输。
然后打开控制台

AJAX 案例准备

//1. 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response
app.get('/', (request, response) => {
	//设置响应
	response.send('HELLO EXPRESS');
});
//4.监听端口服务
app.listen(8000, () => {
	console.log('服务已经启动,8000端口监听中...');
});

服务端server.js内容：

//记得写完服务端的代码要在所在文件夹中打开终端，然后node serve.js运行，如果8080端口被占用找到占用的那个端口 ctrl+c停止占用
//浏览器127.0.0.1:8000/server  打开
//注意控制台记得关闭第三方请求
//f服务端请求
//1. 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response
app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS');
});
//4.监听端口服务
app.listen(8000, () => {
    console.log('服务已经启动,8000端口监听中...');
});

在这里插入图片描述

AJAX请求的基本操作


<!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: solid 1px blue
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //绑定事件
        btn.onclick = function() {
            // console.log('test');
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求的方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server')
                //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            //readystate是xhr对象中的属性，表示状态，有0（表示一开始的属性值） 1（表示open方法调用完毕） 2（表示send方法调用完毕） 3（表示服务端返回了部分的结果） 4 （表示服务端返回的所有结果）
            //change：改变的时候触发
            xhr.onreadystatechange = function() {
                //判断（服务端返回了所有的结果）
                if (xhr.readyState === 4) {
                    //判断响应状态码200 204 403 401 500
                    //只要是2开头的就算成功
                    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>

</body>

</html>

在这里插入图片描述

AJAX设置url参数


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

在这里插入图片描述

AJAX发送POST请求

注意 server.js文件中也要重新写post的配置，并且终端8080端口要关闭并且再重新打开运行。然后记得一定要在server.js所在文件目录下重新运行端口，在单文件下运行会报错说找不着。

 <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px rgb(61, 49, 193);
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        result.addEventListener("mouseover", function() {
            console.log("test");
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置类型与URL
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange = function() {
                //判断
                if (xhr.readyState === 4) { //记得这个State要大写 都找不着哪里出的问题 离谱
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }



        })
    </script>

//记得写完服务端的代码要在所在文件夹中打开终端，然后node serve.js运行，如果8080端口被占用找到占用的那个端口 ctrl+c停止占用
//浏览器127.0.0.1:8000/server  打开
//注意控制台记得关闭第三方请求
//f服务端请求
//1. 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response
app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS');
});
app.post('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS POST');
});

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

在这里插入图片描述

POST请求设置请求体

在这里插入图片描述

AJAX设置请求头信息

设置请求头只需要在open（）方法后面添加一行代码，接收的两个参数第一个是头的名字，第二个是头的值。

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

🐷Content-Type:用来设置请求体内容类型的。
后面的参数是固定写法。
在这里插入图片描述
自定义请求头：

 xhr.setRequestHeader('name', 'hanzhu')

在这里插入图片描述
注意：会报错！因为是自定义的请求头不是预定义的头，浏览器会有安全机制
不能发，如果实在想发可以去server.js里面配置

在这里插入图片描述
** ✳表示所有头信息都能接收**

AJAX服务端响应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>JSON响应</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #897
        }
    </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) {
                    //判断响应状态码200 204 403 401 500
                    //只要是2开头的就算成功
                    if (xhr.status >= 200 && xhr.status < 300) {

                        //result.innerHTML = xhr.response;
                        //手动对数据进行转换 xhr。response是个对象 要转成对象
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        console.log(xhr.response);
                        //自动对数据进行转换
                        // result.innerHTML = data.name;
                        result.innerHTML = xhr.response.name


                    }

                }

            }

        }
    </script>

</body>

</html>

//记得写完服务端的代码要在所在文件夹中打开终端，然后node serve.js运行，如果8080端口被占用找到占用的那个端口 ctrl+c停止占用
//浏览器127.0.0.1:8000/server  打开
//注意控制台记得关闭第三方请求
//f服务端请求
//1. 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response
app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS');
});
app.all('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS POST');
});
app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应一个数据
    const data = {
        name: 'hanzhu',
    };
    //对字符串进行一个转换
    let str = JSON.stringify(data);
    //设置响应体 send 只接受字符串和buffer
    response.send(str);
});

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

nodemon工具

先停掉所有服务
安装

npm install -g nodemon

注意 npm是基于node.js环境安装的，所有首先要安装node.js

在这里插入图片描述
3. 在终端重新启动一下服务这里server.js是我js文件的名字

nodemon server.js

注意这个方法如果失败的话换这个命令

npx nodemon .\server.js

在这里插入图片描述

AJAX IE缓存问题解决

因为IE浏览器对AJAX结果做一个缓存，那么下一次再发送请求的时候得到的是本地的缓存而并不是服务器返回的最新数据，这样对于时效性比较强的一些场景，会影响我们的结果。
解决办法：在网址后面加个参数这样每次请求都是不一样的。


<body>
    <button>点击发送请求</button></button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click', function() {
            const xhr = new XMLHttpRequest();
            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>

AJAX请求超时与网络异常处理

   <button>点击发送请求</button></button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click', function() {
            const xhr = new XMLHttpRequest();

            //超时设置2s设置，超过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>

//延时响应
app.get('/delay', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        response.send('延时响应');
    }, 3000);
    //设置响应体
});

AJAX的取消请求

<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');
            console.log(xhr);
            xhr.send();
        }
        btns[1].onclick = function() {
            xhr.abort();
        }
    </script>
</body>

</html>

请求重复发送问题

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        const btns = document.querySelectorAll('button');
        let xhr = null;
        //是否正在发送AJAX请求，名字随便起的
        let isSending = false;
        btns[0].onclick = function() {
            //如果正在发送，则取消该请求，创建一个新的请求。
            if (isSending) {
                xhr.abort();
            }
            xhr = new XMLHttpRequest();
            isSending = true;
            xhr.open("GET", 'http://127.0.0.1:8000/delay');
            console.log(xhr);

            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    isSending = false;
                }
            }
        }
        btns[1].onclick = function() {
            xhr.abort();
        }
    </script>
</body>

在这里插入图片描述

Axios发送AJAX请求


<!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/1.3.4/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
</body>
<script>
    const btns = document.querySelectorAll('button');
    //配置默认url
    // axios.defaults.baseURL='http://127.0.0.1:8000';
    btns[0].onclick = function() {
        //GET请求
        axios.get('http://127.0.0.1:8000/axios-server', {
            // url参数
            params: {
                id: 100,
                vip: 7
            },
            //请求头信息
            //注意：这里以前h是小写，但是现在变成了大写。
            Headers: {
                name: 'xuzihan',
                age: 23
            }

        }).then(value => {
            console.log(value);
        })
    }
    btns[1].onclick = function() {
        axios.post('http://127.0.0.1:8000/axios-server', {
                //请求体
                username: 'xzh',
                password: 'xzh'
            },
            //url
            {
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                Headers: {
                    height: 180,
                    weight: 100,
                },
                //请求体
                data: {
                  username:'xzh',
                  password:'xzh'

                }
            }

        );
    }
</script>

</html>


//axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头，允许自定义
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'hanzhu',
    };

Axios函数发送Ajax请求

<!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/1.3.4/axios.js"></script>
</head>

<body>
  <button>GET</button>
  <button>POST</button>
  <button>AJAX</button>
</body>
<script>
  const btns = document.querySelectorAll('button');
  //配置默认url
  // axios.defaults.baseURL='http://127.0.0.1:8000';
  btns[0].onclick = function ()
  {
    //GET请求
    axios.get('http://127.0.0.1:8000/axios-server', {
      // url参数
      params: {
        id: 100,
        vip: 7
      },
      //请求头信息
      //注意：这里以前h是小写，但是现在变成了大写。
      Headers: {
        name: 'xuzihan',
        age: 23
      }

    }).then(value =>
    {
      console.log(value);
    })
  }
  btns[1].onclick = function ()
  {
    axios.post('http://127.0.0.1:8000/axios-server', {
      //请求体
      username: 'xzhzzzzzzzzzzzz',
      password: 'xzhzzzzzzzzz'
    },
      //url
      {
        params: {
          id: 200,
          vip: 9
        },
        //请求头参数
        Headers: {
          height: 180,
          weight: 100,
        }

      }

    );
  },
    btns[2].onclick = function ()
    {
      axios({
        //请求方法
        method: 'POST',
        //url
        url: 'http://127.0.0.1:8000/axios-server',
        //url参数
        params: {
          vip: 190,
          level: 430

        },
        //头信息
        Headers: {
          a: 100,
          b: 200

        },
        data: {
          username: 'aaa',
          password: 'aaa'
        }
      })

    }
</script>

</html>

//axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头，允许自定义
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'hanzhu',
    };
    //对字符串进行一个转换

    //设置响应体 send 只接受字符串和buffer
    response.send(JSON.stringify(data));
});

使用fetch函数发送AJAX请求

在这里插入图片描述

<!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>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function() {
            fetch('http://127.0.0.1:8000/fetch-server', {
                //请求方法
                metnod: 'POST',
                // metnod: 'GET',
                //请求头
                headers: {
                    name: 'zmyndxtyll'
                },
                //请求体
                // body: 'username=admin&&password=aaaa'
            }).then(response => {
                console.log(response);
                return response.text();

            })
        }
    </script>
</body>

</html>

//记得写完服务端的代码要在所在文件夹中打开终端，然后node serve.js运行，如果8080端口被占用找到占用的那个端口 ctrl+c停止占用
//浏览器127.0.0.1:8000/server  打开
//注意控制台记得关闭第三方请求
//f服务端请求
//1. 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response
app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS-zhu');
});
app.all('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO EXPRESS POST');
});
app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应一个数据
    const data = {
        name: 'hanzhu',
    };
    //对字符串进行一个转换
    let str = JSON.stringify(data);
    //设置响应体 send 只接受字符串和buffer
    response.send(str);
});
//针对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(() => {
        response.send('这里进得去');
    }, 3000);
});
//axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头，允许自定义
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'hanzhu',
    };
    //对字符串进行一个转换

    //设置响应体 send 只接受字符串和buffer
    response.send(JSON.stringify(data));
});
//fetch服务
app.all('/fetch-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头，允许自定义
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'hanzhuagain',
    };
    //对字符串进行一个转换

    //设置响应体 send 只接受字符串和buffer
    response.send(JSON.stringify(data));
});

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

跨域

同源策略

同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。
**同源：**协议、域名、端口号必须完全相同。（简单理解：同一个来源）
违背同源策略的就是跨域。

如何解决跨域

在这里插入图片描述

<!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>
    <h1>尚硅谷</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>

const express = require('express');
const app = express();
app.get('/home', (request, response) => {
    //响应一个页面
    //__dirname node.js里面获取绝对路径
//这里的/index.html是我html文件名字
    response.sendFile(__dirname + '/index.html');
});
app.get('/data', (request, response) => {
    response.send('只是用户数据');
});
//8000端口启动过了还没关，所以这时候要用9000端口
app.listen(9000, () => {
    console.log('服务已经启动....');
});

注意：网页需要从JS文件里面打开而不是HTML文件里面打开。比如我的就是127.0.0.1：9000/home

JSONP

JSONP(JSON with Padding),是一个非官方的跨域解决方案纯粹凭借程序员的聪明才智开发出来的，只支持get请求。
怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script.
JSONP就是利用script标签的跨域能力来发请求的。
JSONP的使用
1.动态的创建一个script标签

var script = document.creatElement(“script”);

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

script.src=“http://localhost:3000/testAJAX?callback=abc”;

   <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #5655;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        function handle(data) {
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>

    <script src="http://127.0.0.1:8000/json-server">
    </script>
</body>

//json服务
app.all('/json-server', (request, response) => {
    const data = {
        name: 'lllllll',
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //没有特殊的响应头可以用endnode
    response.end(`handle(${str})`);
});