1. Ajax概述

1.1 AJAX 简介

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

1.2 XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：
name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML 表示：

  1. <student>
  2.     <name>孙悟空<name>
  3.     <age>18<age>
  4.     <gender>男<gender>
  5. <student>

现在已经被JSON 取代了。

  1. {"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX 的特点

1.3.1 AJAX 的优点

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

1.3.2 AJAX 的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

2. HTTP相关问题

2.1 MDN 文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

2.2 HTTP 请求交互的基本过程

006.ajax - 图1

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

  1. 行      POST  /s?ie=utf-8  HTTP/1.1 
  2. 头      Host: atguigu.com
  3.         Cookie: name=guigu
  4.         Content-type: application/x-www-form-urlencoded
  5.         User-Agent: chrome 83
  6. 空行      （固定的 必须有）
  7. 体      username=admin&password=admin(如果是get请求此处为空)

1. 请求行

method url
GET /product_detail?id=2
POST /login

2. 多个请求头

Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded &#x6216;&#x8005;application/json

3. 请求体

username=tom&pwd=123
{"username": "tom", "pwd": 123}

2.4 HTTP 响应报文

  1. 行      HTTP/1.1（协议版本）  200（响应代码）  OK（响应状态字符串）
  2. 头（对响应体做出描述 类型 长度 压缩方式）
  3.         Content-Type: text/html;charset=utf-8
  4.         Content-length: 2048
  5.         Content-encoding: gzip
  6. 空行    （固定的 必须有）
  7. 体      <html>
  8.             <head>
  9.             </head>
  10.             <body>
  11.                 <h1>尚硅谷</h1>
  12.             </body>
  13.         </html>
  1. 响应状态行: status statusText
  2. 多个响应头
    Content-Type: text/html;charset=utf-8
    Set-Cookie: BD_CK_SAM=1;path=/
  3. 响应体
    html &#x6587;&#x672C;/json &#x6587;&#x672C;/js/css/&#x56FE;&#x7247;...

2.5 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
    用于文件上传请求

2.6 常见的响应状态码

  • ```css
  • 200 OK 请求成功。一般用于GET 与POST 请求
  • 201 Created 已创建。成功请求并创建了新的资源
  • 401 Unauthorized 未授权/请求要求用户的身份认证
  • 404 Not Found 服务器无法根据客户端的请求找到资源
  • 500 Internal Server Error 服务器内部错误，无法完成请求 ```

2.6+网站测试实例

01.查看请求行与请求头 （get请求）

01.请求行

006.ajax - 图2

02.请求头

006.ajax - 图3

03.请求头参数解析

006.ajax - 图4

02.查看响应行与响应头 （get请求）

01.响应头

006.ajax - 图5

02.响应行

006.ajax - 图6

03.响应体

006.ajax - 图7

03.查看请求行与请求头（post请求）

01.请求头与请求行

006.ajax - 图8

02.请求体

006.ajax - 图9

04.preview解析

006.ajax - 图10

04.总结

006.ajax - 图11

2.7 不同类型的请求及其作用

  1. GET: 从服务器端 读取数据（查）
  2. POST: 向服务器端 添加新数据 （增）
  3. PUT: 更新服务器端已经数据 （改）
  4. DELETE: 删除服务器端数据 （删）

2.8 API 的分类

  1. REST API: restful （Representational State Transfer (资源)表现层状态转化）
    (1) 发送请求进行CRUD 哪个操作由请求方式来决定
    (2) 同一个请求路径可以进行多个操作
    (3) 请求方式会用到GET/POST/PUT/DELETE
  2. 非REST API: restless
    (1) 请求方式不决定请求的CRUD 操作
    (2) 一个请求路径只对应一个操作
    (3) 一般只有GET/POST

2.9 区别 一般http请求 与 ajax请求

  1. ajax请求 是一种特别的 http请求
  2. 对服务器端来说, 没有任何区别, 区别在 浏览器端
  3. 浏览器端发请求: 只有 XHR 或 fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求
  4. 浏览器端接收到响应
    (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    (2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是 调用监视的回调函数并 传入响应相关数据

3. 原生AJAX 的基本使用 XHR

3.0 准备工作

3.0.1 安装node.js

http://nodejs.cn/

3.0.2 安装express（服务端框架）

https://www.expressjs.com.cn/006.ajax - 图12

  1. 初始化环境
  1. npm init --yes
  1. 下载express包
  1. npm install express --save
  1. 编写js代码
  1. //1. 引入express
  2. const express = require('express');
  4. //2. 创建应用对象
  5. const app = express();
  7. //3. 创建路由规则
  8. // request 是对请求报文的封装
  9. // response 是对响应报文的封装
  10. app.get('/', (request, response)=>{
  11.     //设置响应
  12.     response.send('HELLO EXPRESS');
  13. });
  15. //4. 监听端口启动服务
  16. app.listen(8000, ()=>{
  17.     console.log("服务已经启动, 8000 端口监听中....");
  18. });
  1. 运行js程序
  1. node express基本使用.js

006.ajax - 图13

  1. 打开网页显示页面
    006.ajax - 图14
  2. 调试程序可以查看请求和响应
    006.ajax - 图15
    006.ajax - 图16

3.0.3 安装nodemon自动重启工具

文件内容有修改自动重新启动服务
https://www.npmjs.com/package/nodemon
006.ajax - 图17
安装

  1. npm install -g nodemon

启动服务

  1. ndoemon server.js

3.1 理解

  1. 使用 XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求
  2. 前端可以获取到数据，而无需让整个的页面刷新。
  3. 这使得Web 页面可以只更新页面的局部，而不影响用户的操作。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

3.2 核心对象使用步骤

3.2.1 创建XMLHttpRequest 对象

  1. var xhr = new XMLHttpRequest();

3.2.2 设置请求信息（请求方法和url）

  1. // 请求方式
  2. xhr.open(method, url);
  3. //可以设置请求头，一般不设置
  4. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.2.3 发送请求

  1. xhr.send(body) //get请求不传 body 参数，只有post请求使用

3.2.4 接收响应（事件绑定，处理服务端返回的结果）

  1. //xhr.responseXML 接收 xml格式 的响应数据
  2. //xhr.responseText 接收 文本格式 的响应数据
  3. xhr.onreadystatechange = function (){
  4.     // readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4
  5.     if(xhr.readyState == 4 && xhr.status == 200){
  6.         var text = xhr.responseText;
  7.         console.log(text);
  8.     }
  9. }

3.3 使用案例

3.3.1 GET 请求

点击返回响应信息
006.ajax - 图18
创建两个文件，浏览器端使用的html文件和服务器端使用的js文件
006.ajax - 图19
服务器端 server.js

  1. //1. 引入express
  2. const express = require('express');
  4. //2. 创建应用对象
  5. const app = express();
  7. //3. 创建路由规则
  8. // request 是对请求报文的封装
  9. // response 是对响应报文的封装
  10. app.get('/server', (request, response) => {
  11.     //设置响应头  设置允许跨域
  12.     response.setHeader('Access-Control-Allow-Origin', '*');
  13.     //设置响应体
  14.     response.send('HELLO AJAX ');
  15. });
  16. //4. 监听端口启动服务
  17. app.listen(8000, () => {
  18.   console.log("服务已经启动, 8000 端口监听中...");
  19.  })

启动服务

  1. node server.js

006.ajax - 图20
前端页面 html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>AJAX GET 请求</title>
  7.     <style>
  8.         #result{
  9.             width:200px;
  10.             height:100px;
  11.             border:solid 1px #90b;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button>点击发送请求</button>
  17.     <div id="result"></div>
  19.     <script>
  20.         //获取button元素
  21.         const btn = document.getElementsByTagName('button')[0];
  22.         const result = document.getElementById("result");
  23.         //绑定事件
  24.         btn.onclick = function(){
  25.             //1. 创建对象
  26.             const xhr = new XMLHttpRequest();
  27.             //2. 初始化 设置请求方法和 url
  28.             xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
  29.             //3. 发送
  30.             xhr.send();
  31.             //4. 事件绑定 处理服务端返回的结果
  32.             // on  when 当....时候
  33.             // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
  34.             // change  改变
  35.             xhr.onreadystatechange = function(){
  36.                 //判断 (服务端返回了所有的结果)
  37.                 if(xhr.readyState === 4){
  38.                     //判断响应状态码 200  404  403 401 500
  39.                     // 2xx 成功
  40.                     if(xhr.status >= 200 && xhr.status < 300){
  41.                         //处理结果  行 头 空行 体
  42.                         //响应 
  43.                         // console.log(xhr.status);//状态码
  44.                         // console.log(xhr.statusText);//状态字符串
  45.                         // console.log(xhr.getAllResponseHeaders());//所有响应头
  46.                         // console.log(xhr.response);//响应体
  47.                         //设置 result 的文本
  48.                         result.innerHTML = xhr.response;
  49.                     }else{
  51.                     }
  52.                 }
  53.             }
  56.         }
  57.     </script>
  58. </body>
  59. </html>

006.ajax - 图21

# GET 请求设置请求参数

设置url参数 ?a=100&b=200&c=300

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

006.ajax - 图22
006.ajax - 图23

3.3.2 POST请求

鼠标放到div中，发post请求，将响应体放在div中呈现

server.js添加post

  1. app.post('/server', (request, response) => {
  3.   response.setHeader('Access-Control-Allow-Origin', '*');
  5.   response.send("Hello Ajax POST");
  6. });

post.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>AJAX POST 请求</title>
  7.     <style>
  8.         #result{
  9.             width:200px;
  10.             height:100px;
  11.             border:solid 1px #903;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="result"></div>
  17.     <script>
  18.         //获取元素对象
  19.         const result = document.getElementById("result");
  20.         //绑定事件
  21.         result.addEventListener("mouseover", function(){
  22.             //1. 创建对象
  23.             const xhr = new XMLHttpRequest();
  24.             //2. 初始化 设置类型与 URL
  25.             xhr.open('POST', 'http://127.0.0.1:8000/server');
  26.             //设置请求头
  27.             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  28.             xhr.setRequestHeader('name','atguigu');
  29.             //3. 发送
  30.             xhr.send('a=100&b=200&c=300');
  31.             // xhr.send('a:100&b:200&c:300');
  32.             // xhr.send('1233211234567');
  34.             //4. 事件绑定
  35.             xhr.onreadystatechange = function(){
  36.                 //判断
  37.                 if(xhr.readyState === 4){
  38.                     if(xhr.status >= 200 && xhr.status < 300){
  39.                         //处理服务端返回的结果
  40.                         result.innerHTML = xhr.response;
  41.                     }
  42.                 }
  43.             }
  44.         });
  45.     </script>
  46. </body>
  47. </html>

006.ajax - 图24

# 设置请求体信息

006.ajax - 图25

  1. //3．发送
  2. // xhr.send( 'a=100&b=200&c=300 ');
  3. // xhr.send( 'a:10&b:20&c:300');
  4. xhr.send( '1233211234567'); I

# 设置请求头信息

  1. //设置请求头
  2. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求体内容的类型  后面的是固定写法
  3. xhr.setRequestHeader('name','atguigu');//自定义的请求头  后端需要调整

server.js中设置响应头允许自定义请求头 post改成all

  1. response.setHeader('Access-Control-Allow-Header','*');

3.4 json数据请求

  1. //JSON 响应
  2. app.all('/json-server', (request, response) => {
  3.     //设置响应头  设置允许跨域
  4.     response.setHeader('Access-Control-Allow-Origin', '*');
  5.     //响应头
  6.     response.setHeader('Access-Control-Allow-Headers', '*');
  7.     //响应一个数据
  8.     const data = {
  9.         name: 'atguigu'
  10.     };
  11.     //对对象进行字符串转换
  12.     let str = JSON.stringify(data);
  13.     //设置响应体
  14.     response.send(str);
  15. });
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JSON响应</title>
  7.     <style>
  8.         #result{
  9.             width:200px;
  10.             height:100px;
  11.             border:solid 1px #89b;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="result"></div>
  17.     <script>
  18.         const result = document.getElementById('result');
  19.         //绑定键盘按下事件
  20.         window.onkeydown = function(){
  21.             //发送请求
  22.             const xhr = new XMLHttpRequest();
  23.             //设置响应体数据的类型
  24.             xhr.responseType = 'json';
  25.             //初始化
  26.             xhr.open('GET','http://127.0.0.1:8000/json-server');
  27.             //发送
  28.             xhr.send();
  29.             //事件绑定
  30.             xhr.onreadystatechange = function(){
  31.                 if(xhr.readyState === 4){
  32.                     if(xhr.status >= 200 && xhr.status < 300){
  33.                         //
  34.                         // console.log(xhr.response);
  35.                         // result.innerHTML = xhr.response;
  36.                         // 1. 手动对数据转化
  37.                         // let data = JSON.parse(xhr.response);
  38.                         // console.log(data);
  39.                         // result.innerHTML = data.name;
  40.                         // 2. 自动转换
  41.                         console.log(xhr.response);
  42.                         result.innerHTML = xhr.response.name;
  43.                     }
  44.                 }
  45.             }
  46.         }
  47.     </script>
  48. </body>
  49. </html>

006.ajax - 图26

3.5 请求超时与网络异常

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>请求超时与网络异常</title>
  7.     <style>
  8.         #result{
  9.             width:200px;
  10.             height:100px;
  11.             border:solid 1px #90b;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button>点击发送请求</button>
  17.     <div id="result"></div>
  18.     <script>
  19.         const btn = document.getElementsByTagName('button')[0];
  20.         const result = document.querySelector('#result');
  22.         btn.addEventListener('click', function(){
  23.             const xhr = new XMLHttpRequest();
  24.             //超时设置 2s 设置
  25.             xhr.timeout = 2000;
  26.             //超时回调
  27.             xhr.ontimeout = function(){
  28.                 alert("网络异常, 请稍后重试!!");
  29.             }
  30.             //网络异常回调
  31.             xhr.onerror = function(){
  32.                 alert("你的网络似乎出了一些问题!");
  33.             }
  35.             xhr.open("GET",'http://127.0.0.1:8000/delay');
  36.             xhr.send();
  37.             xhr.onreadystatechange = function(){
  38.                 if(xhr.readyState === 4){
  39.                     if(xhr.status >= 200 && xhr.status< 300){
  40.                         result.innerHTML = xhr.response;
  41.                     }
  42.                 }
  43.             }
  44.         })
  45.     </script>
  46. </body>
  47. </html>
  1. //延时响应
  2. app.all('/delay', (request, response) => {
  3.     //设置响应头  设置允许跨域
  4.     response.setHeader('Access-Control-Allow-Origin', '*');
  5.     response.setHeader('Access-Control-Allow-Headers', '*');
  6.     setTimeout(() => {
  7.         //设置响应体
  8.         response.send('延时响应');
  9.     }, 1000)
  10. });

3.6 取消请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>取消请求</title>
  7. </head>
  8. <body>
  9.     <button>点击发送</button>
  10.     <button>点击取消</button>
  11.     <script>
  12.         //获取元素对象
  13.         const btns = document.querySelectorAll('button');
  14.         let x = null;
  16.         btns[0].onclick = function(){
  17.             x = new XMLHttpRequest();
  18.             x.open("GET",'http://127.0.0.1:8000/delay');
  19.             x.send();
  20.         }
  22.         // abort
  23.         btns[1].onclick = function(){
  24.             x.abort();
  25.         }
  26.     </script>
  27. </body>
  28. </html>

3.7 请求重复发送问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>重复请求问题</title>
  7. </head>
  8. <body>
  9.     <button>点击发送</button>
  10.     <script>
  11.         //获取元素对象
  12.         const btns = document.querySelectorAll('button');
  13.         let x = null;
  14.         //标识变量
  15.         let isSending = false; // 是否正在发送AJAX请求
  17.         btns[0].onclick = function(){
  18.             //判断标识变量
  19.             if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
  20.             x = new XMLHttpRequest();
  21.             //修改 标识变量的值
  22.             isSending = true;
  23.             x.open("GET",'http://127.0.0.1:8000/delay');
  24.             x.send();
  25.             x.onreadystatechange = function(){
  26.                 if(x.readyState === 4){
  27.                     //修改标识变量
  28.                     isSending = false;
  29.                 }
  30.             }
  31.         }
  33.         // abort
  34.         btns[1].onclick = function(){
  35.             x.abort();
  36.         }
  37.     </script>
  38. </body>
  39. </html>

3.8 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

  1. xhr.open("get","/testAJAX?t="+Date.now());

3.9 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
006.ajax - 图27

  • 0: 表示XMLHttpRequest 实例已经生成，但是open()方法还没有被调用
  • 1: 表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息
  • 2: 表示send()方法已经执行，并且头信息和状态码已经收到
  • 3: 表示正在接收服务器传来的body 部分的数据
  • 4: 表示服务器数据已经完全接收，或者本次接收已经失败了

3.10 API总结

  • ```css
  • XMLHttpRequest()：创建 XHR 对象的构造函数
  • status：响应状态码值，如 200、404
  • statusText：响应状态文本，如 ‘ok’、’not found’
  • readyState：标识请求状态的只读属性 0-1-2-3-4
  • onreadystatechange：绑定 readyState 改变的监听
  • responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
  • response：响应体数据，类型取决于 responseType 的指定
  • timeout：指定请求超时时间，默认为 0 代表没有限制
  • ontimeout：绑定超时的监听
  • onerror：绑定请求网络错误的监听
  • open()：初始化一个请求，参数为： (method, url[, async])
  • send(data)：发送请求
  • abort()：中断请求 （发出到返回之间）
  • getResponseHeader(name)：获取指定名称的响应头值
  • getAllResponseHeaders()：获取所有响应头组成的字符串
  • setRequestHeader(name, value)：设置请求头 ```

4. jQuery 中的AJAX

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>jQuery 发送 AJAX 请求</title>
  7.     <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8.     <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <h2 class="page-header">jQuery发送AJAX请求 </h2>
  13.         <button class="btn btn-primary">GET</button>
  14.         <button class="btn btn-danger">POST</button>
  15.         <button class="btn btn-info">通用型方法ajax</button>
  16.     </div>
  17.     <script>
  18.         $('button').eq(0).click(function(){
  19.             $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
  20.                 console.log(data);
  21.             },'json');
  22.         });
  24.         $('button').eq(1).click(function(){
  25.             $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
  26.                 console.log(data);
  27.             });
  28.         });
  30.         $('button').eq(2).click(function(){
  31.             $.ajax({
  32.                 //url
  33.                 url: 'http://127.0.0.1:8000/jquery-server',
  34.                 //参数
  35.                 data: {a:100, b:200},
  36.                 //请求类型
  37.                 type: 'GET',
  38.                 //响应体结果
  39.                 dataType: 'json',
  40.                 //成功的回调
  41.                 success: function(data){
  42.                     console.log(data);
  43.                 },
  44.                 //超时时间
  45.                 timeout: 2000,
  46.                 //失败的回调
  47.                 error: function(){
  48.                     console.log('出错啦!!');
  49.                 },
  50.                 //头信息
  51.                 headers: {
  52.                     c:300,
  53.                     d:400
  54.                 }
  55.             });
  56.         });
  58.     </script>
  59. </body>
  60. </html>

4.1 get 请求

  1. $.get(url, [data], [callback], [type])
  • url:请求的URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text, _default

4.2 post 请求

  1. $.post(url, [data], [callback], [type])
  • url:请求的URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text, _default

4.3 通用方法

  1. $.ajax({
  2.     //url
  3.     url: 'http://127.0.0.1:8000/jquery-server',
  4.     //参数
  5.     data: {a:100, b:200},
  6.     //请求类型
  7.     type: 'GET',
  8.     //响应体结果
  9.     dataType: 'json',
  10.     //成功的回调
  11.     success: function(data){
  12.         console.log(data);
  13.     },
  14.     //超时时间
  15.     timeout: 2000,
  16.     //失败的回调
  17.     error: function(){
  18.         console.log('出错啦!!');
  19.     },
  20.     //头信息
  21.     headers: {
  22.         c:300,
  23.         d:400
  24.     }
  25. });

5. axios中的AJAX

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>axios 发送 AJAX请求</title>
  8.     <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
  9. </head>
  11. <body>
  12.     <button>GET</button>
  13.     <button>POST</button>
  14.     <button>AJAX</button>
  16.     <script>
  17.         // https://github.com/axios/axios
  18.         const btns = document.querySelectorAll('button');
  20.         //配置 baseURL
  21.         axios.defaults.baseURL = 'http://127.0.0.1:8000';
  23.         btns[0].onclick = function () {
  24.             //GET 请求
  25.             axios.get('/axios-server', {
  26.                 //url 参数
  27.                 params: {
  28.                     id: 100,
  29.                     vip: 7
  30.                 },
  31.                 //请求头信息
  32.                 headers: {
  33.                     name: 'atguigu',
  34.                     age: 20
  35.                 }
  36.             }).then(value => {
  37.                 console.log(value);
  38.             });
  39.         }
  41.         btns[1].onclick = function () {
  42.             axios.post('/axios-server', {
  43.                 username: 'admin',
  44.                 password: 'admin'
  45.             }, {
  46.                 //url 
  47.                 params: {
  48.                     id: 200,
  49.                     vip: 9
  50.                 },
  51.                 //请求头参数
  52.                 headers: {
  53.                     height: 180,
  54.                     weight: 180,
  55.                 }
  56.             });
  57.         }
  59.         btns[2].onclick = function(){
  60.             axios({
  61.                 //请求方法
  62.                 method : 'POST',
  63.                 //url
  64.                 url: '/axios-server',
  65.                 //url参数
  66.                 params: {
  67.                     vip:10,
  68.                     level:30
  69.                 },
  70.                 //头信息
  71.                 headers: {
  72.                     a:100,
  73.                     b:200
  74.                 },
  75.                 //请求体参数
  76.                 data: {
  77.                     username: 'admin',
  78.                     password: 'admin'
  79.                 }
  80.             }).then(response=>{
  81.                 //响应状态码
  82.                 console.log(response.status);
  83.                 //响应状态字符串
  84.                 console.log(response.statusText);
  85.                 //响应头信息
  86.                 console.log(response.headers);
  87.                 //响应体
  88.                 console.log(response.data);
  89.             })
  90.         }
  91.     </script>
  92. </body>
  94. </html>

5.1 get 请求

  1. const btns = document.querySelectorAll('button');
  2. //配置 baseURL
  3. axios.defaults.baseURL = 'http://127.0.0.1:8000';
  4. btns[0].onclick = function () {
  5.     //GET 请求
  6.     axios.get('/axios-server', {
  7.         //url 参数
  8.         params: {
  9.             id: 100,
  10.             vip: 7
  11.         },
  12.         //请求头信息
  13.         headers: {
  14.             name: 'atguigu',
  15.             age: 20
  16.         }
  17.     }).then(value => {
  18.         console.log(value);
  19.     });
  20. }

5.2 post 请求

006.ajax - 图28

  1. btns[1].onclick = function () {  //第一个是url 第二个是请求体 第三个参数是其他配置
  2.     axios.post('/axios-server', {
  3.         username: 'admin',
  4.         password: 'admin'
  5.     }, {
  6.         //url 
  7.         params: {
  8.             id: 200,
  9.             vip: 9
  10.         },
  11.         //请求头参数
  12.         headers: {
  13.             height: 180,
  14.             weight: 180,
  15.         }
  16.     });
  17. }

5.3通用方式发送 请求

  1. btns[2].onclick = function(){
  2.     axios({
  3.         //请求方法
  4.         method : 'POST',
  5.         //url
  6.         url: '/axios-server',
  7.         //url参数
  8.         params: {
  9.             vip:10,
  10.             level:30
  11.         },
  12.         //头信息
  13.         headers: {
  14.             a:100,
  15.             b:200
  16.         },
  17.         //请求体参数
  18.         data: {
  19.             username: 'admin',
  20.             password: 'admin'
  21.         }
  22.     }).then(response=>{
  23.         //响应状态码
  24.         console.log(response.status);
  25.         //响应状态字符串
  26.         console.log(response.statusText);
  27.         //响应头信息
  28.         console.log(response.headers);
  29.         //响应体
  30.         console.log(response.data);
  31.     })
  32. }

6.fetch发送ajax请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>fetch 发送 AJAX请求</title>
  7. </head>
  8. <body>
  9.     <button>AJAX请求</button>
  10.     <script>
  11.         //文档地址
  12.         //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
  14.         const btn = document.querySelector('button');
  16.         btn.onclick = function(){
  17.             fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
  18.                 //请求方法
  19.                 method: 'POST',
  20.                 //请求头
  21.                 headers: {
  22.                     name:'atguigu'
  23.                 },
  24.                 //请求体
  25.                 body: 'username=admin&password=admin'
  26.             }).then(response => {
  27.                 // return response.text();
  28.                 return response.json();
  29.             }).then(response=>{
  30.                 console.log(response);
  31.             });
  32.         }
  33.     </script>
  34. </body>
  35. </html>

5. 跨域

5.1 同源策略

  • 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
  • 同源： 协议、域名、端口号必须完全相同 (网页和服务端)
  • 跨域： 违背同源策略就是 *跨域 （向两个服务器发送请求）

5.2 如何解决跨域

5.2.1 JSONP

1) JSONP 是什么

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

2) JSONP 怎么工作的？

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

3) JSONP 的使用

原生

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>案例</title>
  7. </head>
  8. <body>
  9.     用户名: <input type="text" id="username">
  10.     <p></p>
  11.     <script>
  12.         //获取 input 元素
  13.         const input = document.querySelector('input');
  14.         const p = document.querySelector('p');
  16.         //声明 handle 函数
  17.         function handle(data){
  18.             input.style.border = "solid 1px #f00";
  19.             //修改 p 标签的提示文本
  20.             p.innerHTML = data.msg;
  21.         }
  23.         //绑定事件
  24.         input.onblur = function(){
  25.             //获取用户的输入值
  26.             let username = this.value;
  27.             //向服务器端发送请求 检测用户名是否存在
  28.             //1. 创建 script 标签
  29.             const script = document.createElement('script');
  30.             //2. 设置标签的 src 属性
  31.             script.src = 'http://127.0.0.1:8000/check-username';
  32.             //3. 将 script 插入到文档中
  33.             document.body.appendChild(script);
  34.         }
  35.     </script>
  36. </body>
  37. </html>

1.动态的创建一个script 标签
  1. var script = document.createElement("script");

2.设置script 的src，设置回调函数
  1. script.src = "http://localhost:3000/testAJAX?callback=abc";
  2. function abc(data) {
  3.     alert(data.name);
  4. };

3.将script 添加到body 中
  1. document.body.appendChild(script);

4.服务器中路由的处理
  1. router.get("/testAJAX" , function (req , res) {
  2.     console.log("收到请求");
  3.     var callback = req.query.callback;
  4.     var obj = {
  5.         name:"孙悟空",
  6.         age:18
  7.     }
  8.     res.send(callback+"("+JSON.stringify(obj)+")");
  9. });

4) jQuery 中的JSONP

  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Titletitle>
  6.     head>
  7.     <body>
  8.         <button id="btn">按钮button>
  9.         <ul id="list">ul>
  10.         <script type="text/javascript" src="./jquery-1.12.3.js">script>
  11.         <script type="text/javascript">
  12.             window.onload = function () {
  13.                 var btn = document.getElementById('btn')
  14.                 btn.onclick = function () {
  15.                     $.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function(data) {
  16.                         console.log(data);
  18.                         var subjects = data.subjects;
  20.                         for(var i=0 ; i<subjects.length ; i++){
  21.                             $("#list").append(""+
  22.                             subjects[i].title+""+
  23.                             "+subjects[i].images.large+"\" >"+
  24.                             "");
  25.                         }
  26.                     });
  27.                 }
  28.             }
  29.         script>
  30. body>
  31. html>

5.2.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

1) CORS 是什么？

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

2) CORS 怎么工作的？

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

3) CORS 的使用

主要是服务器端的设置：

  1. router.get("/testAJAX" , function (req , res) {
  2.     //设置响应头  设置允许跨域
  3.     res.set("Access-Control-Allow-Origin","*");
  4.     res.send("testAJAX 返回的响应");
  5. });