Ajax 笔记 配合- express框架 & NodeJS & axios个人笔记

lys
843 阅读10分钟

@TOC Ajax的特点：局部 异步 刷新

Ajax简介

  • 即“Asynchronous JavaScript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
  • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  • Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发6. 送到服务器，然后服务器会返回一个搜索建议的列表。
  • 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
  • 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
  • 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

HTTP : 请求头 响应头 请求体 响应体 优点：

  1. 无需刷新页面就与服务端通信
  2. 允许根据用户事件来更新部分页面内容

缺点：

  1. 没有浏览历史
  2. 存在跨域问题（同源）
  3. SEO 不友好 （爬虫爬取不到） 在这里插入图片描述

HTTP协议

HTTP协议 --- 》 约定 规制

请求报文

重点是格式与参数

行   GET/POST  /url (md/?articleId)   HTTP/1.1      
头	Host: Host: atguigu. com
	Cookie: name=guigu
	Content-type: application/X-www-form-urlencoded  或  application/json   // 数据内容的两种类型
	User-Agent: chrome 83
空行
体 	GET 空 POST 可不为空，两种数据内容类型格式: username=admin&password=admin 或 {username:"admin","pwd":"123"}
	get的话请求的参数在url中，尔post请求的数据在请求体中

响应报文

行  HTTP/1.1  协议版本   200 响应状态码   OK  响应状态字符串{}
头	Content- Type: text/ html ; charset=utf-8  类型
	Content- length: 2048   长度
	Content-encoding: gzip	压缩模式
空行
体	<html lang="en">  //  HTML内容放到响应的报文中 
	<head>
	</head>
	<body>
	    <div>1 <? php echo "Hello World!" ?> </div>
	</body>
	</html>

服务成生成cookie数据返回给浏览器，再由请求头cookie拿到数据 POST 请求体参数格式

  1. Content Type: application/x-www-form-urlencoded;charset=utf-8 用于键值对参数，参数的键值用=连接,参数之间用&连接 例如: name=%E5%B0%8F%E6%98%8E&age= 12
  2. Content-Type: application/json;charset=utf-8 用于json字符串参数 例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
  3. Content-Type: multipart/form-data 用于文本上传的请求
  • 响应状态字符串： 200 OK - 请求成功。一-般用于GET与POST请求 201 Created - 已创建.成功请求并创建了新的资源 401 Unauthorized - 未授权/请求要求用户的身份认证 404 Not Found - 服务器无法根据客户端的请求找到资源 500 Internal Server Error - 服务器内部错误，无法完成请求
  • 不同类型的请求方式： 1.GET:从服务器端读取数据 2.POST:向服务器端添加新数据 3.PUT:更新服务器端已经数据 4.DELETE:删除服务器端数据
  • API的分类
  1. REST API: restful (1)发送请求进行CRUD哪个操作由请求方式来决定 (2)同一个请求路径可以进行多个操作 (3)请求方式会用到GET/POST/PUT/DELETE
  2. 非REST API: restless (1)请求方式不决定请求的CRUD操作 (2)一个请求路径只对应-一个操作. (3) 一般只有GET/POST response 响应头 request 请求头 请求行 请求体 Query String Parameters 对url的解析的结果

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

  • 跨域 ： 违背同源策略

Node

npm 管理包工具 nodemon 服务重启插件:

  1. 修改代码后自动重启服务不必每次手动重启：终端下输入 npm install -g nodemon
  2. 启动：在终端文件路径下输入：nodemon 文件名( nodemon server.js )
  3. 无法加载文件或报错 需要以管理员身份启动终端输入 Set-ExecutionPolicy RemoteSigned
  4. 然后再次输入要运行的文件：nodemon server.js 下载Express 框架 --- npm i express

关键字

  1. xhr = new XMLHttpRequest(); 创建一个Ajax对象
    1. status 返回的状态码 404 200 500
    2. . xhr.readyState 返回状态码 ：0(未初始化) 1(open调用) 2(send调用) 3(服务端返回部分结果) 4(服务端返回全部结果)
  2. xhr.setRequestHeader() 设置请求头
  3. response.setHeader() 设置响应头 express
  4. response.setHeader('Access-Control-Allow-Origin' , '*'); 设置允许跨域 express
  5. xhr.timeout 延时设置
  6. xhr.ontimeout = function() {} 超时回调
  7. xhr.onerror = () => {} 网络异常
  8. xhr.onreadystatechange = function() {} 事件绑定
  9. . xhr.readyState 返回状态码 ：0(未初始化) 1(open调用) 2(send调用) 3(服务端返回部分结果) 4(服务端返回全部结果) 10.statusText 返回一个字符串
  10. xhr.abort(); 取消请求
  11. status 返回的状态码 404 200 500

abort(); 取消发送请求

jquery Ajax

jQuery.ajax(...) 部分参数： url：请求地址 type：请求方式，GET、POST（1.9.0之后用method） headers：请求头 data：要发送的数据 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async：是否异步 timeout：设置请求超时时间（毫秒） beforeSend：发送请求前执行的函数(全局) complete：完成之后执行的回调函数(全局) success：成功之后执行的回调函数(全局) error：失败之后执行的回调函数(全局) accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型 dataType：将服务器端返回的数据转换成指定类型 "xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 "json": 将服务器端返回的内容转换成相应的JavaScript对象 "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

伪造类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>
    <div>
        <p>请输入要加载的地址：<span id="currentTime"></span></p>
        <p>
            <input type="text" id="url" value="https://baidu.com/">
            <input type="button" value="提交" onclick="loadpage()" id="submit">
        </p>
    </div>
    <h3>加载页面的位置：</h3>
    <iframe src="" frameborder="0" style="width: 100%; height: 
    700px; border: 1px solid black;" id="iframePosition"></iframe>

    <script type="text/javascript">
        window.onload = function() {
            let myDate = new Date();
            document.getElementById("currentTime").innerHTML = myDate.getTime();

        };
        
            function loadpage() {
                let targetURL = document.getElementById('url').value;
                console.log(targetURL);
                document.getElementById('iframePosition').src = targetURL;
            }
    </script>
</body>
</html>

Ajax发送案例

Node Ajax express 搭建服务初体验

  1. 创建JS文件利用node 搭配 Express 架起的服务开启 HTTP: 8000 端口
  2. 在文件的路径下运行指令终端输入 : node 加文件名字（node express的基本使用.js）
  3. 在浏览器输入本机的IP和开启的对应端口 127.0.0.1:8000
  4. 进入到你创建的JS文件服务网页 在启动node服务的终端下按：CTRL + c 会停止服务
// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对 请求报文的封装
// response 是对 响应报文的封装
app.get('/',(request, response) => {
	 // 设置响应
    response.send("Hello ExPress");
});
// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已启动， 8000 端口 监听中！');
});

Node Ajax express 跨域设置

// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对 请求报文的封装
// response 是对 响应报文的封装
app.get('/server',(request, response) => {
    // http://127.0.0.1:8000/server   /server 请求行的第二段内容
    // 设置响应头  设置允许跨域
    response.setHeader('Accss-Control-Allow-Origin', '*');
    // 设置响应体
    response.send("Hello Ajax");

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

GET发送请求案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax GET request</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
<script>
   const  btn = document.querySelector("button");
   const result = document.getElementById("result");
   // 事件注册
   btn.onclick = function() {
       // console.log('Test');
       // 创建对象
       const xhr  = new XMLHttpRequest();
       // 初始化 ， 设置请求方法 和 URL
       xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
       // 发送
       xhr.send();
       // 事件绑定 处理服务端返回的结果
       // on  when 当.... 时候
    /* redaystate 是 xhr(XMLHttpRequest) 对象中的属性有4个状态：
       0(未初始化) 1(open调用) 2(send调用) 3(服务端返回部分结果) 4(服务端返回全部结果)*/
       // change 改变
       xhr.onreadystatechange = function() {
           // 判断（服务端返回全部结果）
           if(xhr.readyState === 4) {
           // 判断响应状态码 400 404 200 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>

POST发送请求案例

<!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>
        div {
            width: 299px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div>    </div>
	<script>
	  const div = document.querySelector("div");
	
	  div.addEventListener("mouseover",() => {
	      // 创建对象
	      const xhr = new XMLHttpRequest();
	      // 初始化 和 设置url
	      xhr.open('POST','http:127.0.0.1:8000/server');
	      // 设置请求头
	      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	      xhr.setRequestHeader('name','gwetgfew-dsf');
	      // 发送
	      xhr.send('a=100&n=2321&d=21312'); // POST 请求体的设置
	      // xhr.send('a:100&n:2321&d:21312'); // 请求体的设置
	      // xhr.send('123213214'); // 请求体的设置
	      // 事件绑定
	      xhr.onreadystatechange = function() {
	          if(xhr.readyState === 4) {
	              if(xhr.status >= 200 && xhr.status < 300) {
	                  div.innerHTML = xhr.response;
	              }
	          }
	      }
	  });
	</script>
</body>
</html>

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>
        div {
            width: 520px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const div = document.querySelector("div");
        // 事件的绑定
        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);
                        // div.innerHTML = xhr.response;
                        // 手动转换数据
                        // let data = JSON.parse(xhr.response);
                        // console.log(data instanceof Object);
                        // div.innerHTML = data.name;
                        // 自动转换数据
                        console.log(xhr.response instanceof Object);
                        div.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

IE缓存 问题

打开IE，Ajax的数据会缓存到浏览器，下次再向Ajax请求时会先访问本地的缓存这样会导致不能正常接收新的数据，解决它可以在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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div>1</div>
    <script>
        const div = document.getElementsByTagName("div")[0];
        const btn = document.getElementsByTagName("button")[0];
        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) {
                        div.innerHTML = xhr.response;
                    }
                }
            };
        });

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

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>点击发送</button>
    <button>点击取消</button>
    <script>
        const btn = document.getElementsByTagName("button");
        let x = null;
        btn[0].onclick = function() {
            x = new XMLHttpRequest();
            x.open("GET","http://127.0.0.1:8000/delete");
            x.send();
            x.onreadystatechange = function() {

            };
        }
        // abort 
        btn[1].onclick = () => {
            x.abort();
        }
    </script>
</body>
</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>
    <button>点击发送</button>
    <script>
        const btn = document.getElementsByTagName("button");
        let x = null;
        // 表示变量
        let flag = false;  // 是否正在发送AJAX请求
        btn[0].onclick = function() {
            if(flag) {x.abort();}
            x = new XMLHttpRequest();
            flag = true;
            x.open("GET","http://127.0.0.1:8000/delete");
            x.send();
            x.onreadystatechange = function() {
               if(x.readyState === 4) {
                    // 修改标识变量
                    flag = false;
               }
            };
        }
        // abort 
        btn[1].onclick = () => {
            x.abort();
        }
    </script>
</body>
</html>

jquery -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>jquery  发送 Ajax 请求</title>
    <link rel="stylesheet" href="bootstrap-3.3.2-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.2-dist/js/jquery-3.5.1.min.js"></script>
    <script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
         <h2 >jQuery发送Ajax请求</h2>
        <button type="button"  class="btn btn-danger">GET</button>
        <button type="button" class="btn btn-primary">POST</button>
        <button type="button" class="btn btn-success">通用型方法Ajax</button>
    </div>
<script>
   $('button').eq(0).click(function() {
       $.get('http://127.0.0.1:8000/jquery-server',{a:100,n:123}, function(data) {
           console.log(data);
       },'json');
   });
   $('button').eq(1).click(function() {
       $.post('http://127.0.0.1:8000/jquery-server',{a:123,n:100}, 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: {
               a: 120,
               b:230
           }
       });
   });
</script>
</body>
</html>

axios-ajax 发送请求

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</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>Ajax</button>
    <script>
        const btns = document.querySelectorAll('button');
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

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

        btns[1].onclick = function() {
            axios.post('/axios-server', {
                    username: 'admin',
                    password: 'admin'
            },{
                // url参数
                params: {
                    id: 147,
                    vip: 258
                },
                // 请求头
                headers:{
                    height: 180,
                    weight: 180
                }
            });
        }

        btns[2].onclick = function() {
            axios({
                // 请求方法
                method: 'POST',
                // url
                url: '/axios-server',
                // url参数
                params: {
                    id: 1012,
                    leave: 9120
                },
                // 头信息
                headers: {
                    a: 100,
                    b: 200
                },
                // 请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }

            }).then(response => {
                console.log(response);
                // 响应状态码
                console.log(response.status);
                // 响应状态字符串
                console.log(response.statusText);
                // 响应头信息
                console.log(response.headers);
                // 响应体信息
                console.log(response.data);

            });
        };
    </script>
</body>
</html>

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 = () => {
            fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
                // 请求方法
                method: 'POST',
                // 请求头
                headers: {
                    name: 'admin',
                    passwd: 'admin'
                },
                // 请求体
                body: 'a:100&b:1000'
            }).then(response => {
                // console.log(value);
                // return response.text();
                return response.json();
            }).then(response => {
                console.log(response);
            });
        };
    </script>
</body>
</html>

以上所有的案例JS文件

// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对 请求报文的封装
// response 是对 响应报文的封装

app.get('/',(request, response) => {
    response.send("Hello ExPress");
});

// get JS代码
app.get('/server',(request, response) => {
    // http://127.0.0.1:8000/server   /server 第二段内容 触发
    // 设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin' , '*');
    // 设置响应头
     response.send("Hello ExPress GET ");
});

// post    JS代码
app.all('/server',(request, response) => {
    // http://127.0.0.1:8000/server   /server 第二段内容 触发

    // 设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin' , '*');
    // 响应头 接收自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应头
     response.send("Hello ExPress POST ");
});

// all JSON  JS代码  因为设置了自定义请求头name所以设置 all 可以接受所有的HTTP请求 
app.all('/json-server',(request, response) => {
    // 设置响应头 允许跨域 
    response.setHeader('Access-Control-Allow-Origin' , '*');
    // 响应头 接收自定义请求头  
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应一个数据  
    const data = {
        name: 'atguigu',
    };
    // JSON.stringify(data)
    // 把对象的内容利用JSON.stringify(element)分解成字符串
    let str = JSON.stringify(data);
    // 设置响应头
     response.send(str);
});

// ie 缓存问题 JS代码
app.get('/ie',(request, response) => {
    // 设置响应头 允许跨域 
    response.setHeader("Access-Control-Allow-Origin","*");
    response.send("Hello IE - 2 ");
});

// 延迟响应  JS代码
app.all('/delete',(request, response) => {
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    setTimeout(function() {
        response.send("Hello 延时响应 ");
    },1000);

});

// 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 : '尚硅谷'};
    // let str = JSON.stringify(data);
    response.send(JSON.stringify(data));
});
// 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 : '尚硅谷'};
    // let str = JSON.stringify(data);
    response.send(JSON.stringify(data));
});
// 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 : '尚硅谷'};
    // let str = JSON.stringify(data);
    response.send(JSON.stringify(data));
});
// 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>首页</title>
</head>
<body>
    <h1>尚硅谷</h1>
    <button>点击发送用户数据</button>
    <script>
        const btn = document.querySelector("button");

        btn.onclick = function() {
            // 创建对象
            const x = new XMLHttpRequest();
            /* 初始化  因为这里满足同源策略都是运行在，所以url  http://127.0.0.1:7000/data 
            前面的相同地址可以简写 只需加上后面的链接到那就可以了 */
            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>

js文件

const { request, response } = require('express');
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(7000, () => {
    console.log(' 7000 端口服务已经启动！~');
});

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

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

    </script>
    <!-- 跨域请求 利用script标签跨域 -->
    <!-- <script src="http://127.0.0.1:5500/%E8%B7%A8%E5%9F%9F/JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

js文件

const { request, response } = require('express');
const express = require('express');

const app = express(); 
// jsonp 服务
app.all('/jsonp-server',(request, response) => {
    // response.send('Hello Jsonp-server');
    // response.send('console.log("Hello Jsonp-server")');
    const data = {
      name : '尚硅谷athuiug'
    };
    // 将数据转为字符串
    let str = JSON.stringify(data);
    // 返回结果 end 不会加特殊响应头 使用模板字符串来解析变量不需要使用引引加加
    response.end(`fn(${str})`);
});


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

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>
</head>
<body>
    <input type="text" id="username"> <p></p>
    <script>
        const input = document.querySelector("#username");
        const p = document.querySelector("p");

        // 声明 fn函数
        function fn(data) {

            input.style.border = "1px solid #f00";
            // 修改p标签的文本信息
            p.innerHTML = data.msg;
        };

        input.onblur = function() {
            // 获取用户输入的值
            let username = this.value;
            // 向服务器发送请求 检测用户名是否存在 创建script标签
            const script = document.createElement("script");
            // 设置标签的src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            // 3. 将script标签添加到文档中
            document.body.appendChild(script);
        };
        // script  标签发送请求  服务端返回一个fn()函数调用 浏览器解析可以执行 把发送来的代码解析执行
    </script>
</body>
</html>

js文件

	// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对 请求报文的封装
// response 是对 响应报文的封装


// 用户名检测是否存在 服务
app.all('/check-username',(request, response) => {
    // response.send('console.log("Hello Jsonp-server")');
    const data = {
        exist: 1,
        msg: '用户已经存在'
    };
    // 将数据转为字符串
    let str = JSON.stringify(data);
    // 返回结果 end 不会加特殊响应头 使用模板字符串来解析变量不需要使用引引加加
    response.end(`fn(${str})`);
});

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

jQuery-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>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送json请求</button>
    <div>

    </div>

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

js文件

// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对 请求报文的封装
// response 是对 响应报文的封装


app.all('/jquery-jsonp-server',(request, response) => {
    // response.send('console.log("Hello Jsonp-server")');
    const data = {
       name: '尚硅谷',
       city: ['上海','北京','深圳'],
    };
    // 将数据转为字符串
    let str = JSON.stringify(data);
    // 接收 callback 参数 拼接字符串成函数执行
    let cb = request.query.callback;
    // 返回结果 end 不会加特殊响应头 使用模板字符串来解析变量不需要使用引引加加
    response.end(`${cb}(${str})`);
});


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

cors

<!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: 1000px;
            height: 100px;
            border:  1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击发送json请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        // 创建对象
        const x = new XMLHttpRequest();
        x.open("GEt",'http://127.0.0.1:8000/cors-server');
        x.send();
        x.onreadystatechange = () => {
            if(x.readyState === 4) {
                if(x.status >= 200 && x.status < 300) {
                    console.log(x.response);
                }
            }
        }
    </script>
</body>
</html>


// 1. 引入express
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// 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-Mothod' , "*");
    // response.setHeader('Access-Control-Allow-Origin' , "http://127.0.0.1:5500"); 只允许5500访问
    response.send("Hello Cors");
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已启动， 8000 端口 监听中！');
});
avatar
文章
阅读
粉丝