AJAX的学习笔记(Node.js环境)

AJAX学习的笔记，主要环境为Node.js

课程地址： https://www.bilibili.com/video/BV1WC4y1b78y

第一章 Ajax概述

1.1 Ajax简介

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

1.2 XML简介

  • XML：可扩展标记语言
  • XML：被设计用来传输和存储数据
  • XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据
  • 现在已被JSON取代

1.3 AJAX 的特点

1.3.1 AJAX的优点

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

1.3.2 AJAX 的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题（同源）
  3. SEO不友好（爬虫获取不到信息）

第二章 原生AJAX

2.1 HTTP

约定, 规则
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

2.1.1 请求报文

1
2
3
4
5
6
7
行      POST  /s?ie=utf-8  HTTP/1.1 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

2.1.2 响应报文

1
2
3
4
5
6
7
8
9
10
11
12
行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

2.2 express框架的基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//1. 引入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 端口监听中....");
});

2.3 Ajax GET请求

  • 前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on  when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 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){
            //处理结果  行 头 空行 体
            //响应 
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//响应体
            //设置 result 的文本
            result.innerHTML = xhr.response;
        }else{

        }
    }
}
  • 服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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 - 2');
});

2.4 Ajax POST 请求

  • 前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//1. 创建对象
 const xhr = new XMLHttpRequest();
 //2. 初始化 设置类型与 URL
 xhr.open('POST', 'http://127.0.0.1:8000/server');
 //设置请求头  Content-Type 设置请求体（参数查询字符串）的类型
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 xhr.setRequestHeader('name','atguigu');
 //3. 发送 携带参数 请求体
 xhr.send('a=100&b=200&c=300');
 // xhr.send('a:100&b:200&c:300');
 // xhr.send('1233211234567');

 //4. 事件绑定
 xhr.onreadystatechange = function(){
     //判断
     if(xhr.readyState === 4){
         if(xhr.status >= 200 && xhr.status < 300){
             //处理服务端返回的结果
             result.innerHTML = xhr.response;
         }
     }
 }
  • 服务器
1
2
3
4
5
6
7
8
9
//可以接收任意类型的请求 
app.all('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

2.5 JSON 响应

  • 前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//发送请求
 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;
             // 1. 手动对数据转化
             // let data = JSON.parse(xhr.response);
             // console.log(data);
             // result.innerHTML = data.name;
             // 2. 自动转换
             console.log(xhr.response);
             result.innerHTML = xhr.response.name;
         }
     }
 }
  • 服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

2.6 IE缓存问题

  • 前端
1
2
3
4
5
6
7
8
9
10
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;
        }
    }
}
  • 服务器
1
2
3
4
5
6
7
//针对 IE 缓存
app.get('/ie', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO IE - 5');
});

2.7 超时与网络异常

  • 前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
        }
    }
}
  • 服务器
1
2
3
4
5
6
7
8
9
10
//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 1000)
});

2.8 取消请求

1
2
x = new XMLHttpRequest();
x.abort();

2.9 重复请求问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求

btns[0].onclick = function(){
    //判断标识变量
    if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
    x = new XMLHttpRequest();
    //修改 标识变量的值
    isSending = true;
    x.open("GET",'http://127.0.0.1:8000/delay');
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState === 4){
            //修改标识变量
            isSending = false;
        }
    }
}

第三章 jQuery中的AJAX

3.1 get请求

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

3.2 post请求

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

3.3 通用型方法ajax

  • 前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('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
    }
});
  • 服务器
1
2
3
4
5
6
7
8
9
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

第四章 axios

4.1 GET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//GET 请求
axios.get('/axios-server', {
     //url 参数
     params: {
         id: 100,
         vip: 7
     },
     //请求头信息
     headers: {
         name: 'atguigu',
         age: 20
     }
 }).then(value => {
     console.log(value);
 });

4.2 POST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios.post('/axios-server', {
    username: 'admin',
    password: 'admin'
}, {
    //url 
    params: {
        id: 200,
        vip: 9
    },
    //请求头参数
    headers: {
        height: 180,
        weight: 180,
    }
});

4.3 通用型

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

4.4 服务器端

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

第五章 fetch

  • 前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
    //请求方法
    method: 'POST',
    //请求头
    headers: {
        name:'atguigu'
    },
    //请求体
    body: 'username=admin&password=admin'
}).then(response => {
    // return response.text();
    return response.json();
}).then(response=>{
    console.log(response);
});
  • 服务器端
1
2
3
4
5
6
7
8
9
//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

第六章： 跨域

6.1 同源策略

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是浏览器的一种安全策略。

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

违背同源策略就是跨域

6.2 如何解决跨域

6.2.1 JSONP

  1. JSONP是什么

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

  2. JSONP 怎么工作的？

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

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

    1. JSONP的使用
    • 动态的创建一个script标签
1
var script = document.createElement("script");
  • 设置script的src，设置回调函数
1
script.src = "http://locallhost:3000/textAJAX?callback=abc"

6.2.2 CORS

推荐阅读：

  1. CORS是什么？

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

  2. CORS怎么工作的？

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

  3. CORS 的使用

    主要是服务端的设置：

    1
    2
    3
    rounter.get("/testAJAX",function(req, res){

    })