【ajax】概述、发送请求 ( GET / POST )、解决跨域问题 ( JSONP / CORS )

一、概述

1、AJAX 简介

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

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

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

2、XML 和 JOSN 格式数据

2.1 XML

概念：XML是可扩展标记语言，被设计用来传输和存储数据。

XML 与 HTML：HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。

<student> 
    <name>孙悟空</name> 
    <age>18</age> 
    <gender>男</gender> 
</student>

2.2 JOSN

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

3、AJAX 的特点

3.1 AJAX 的优点

        （1）可以无需刷新页面而与服务器端进行通信。

        （2）允许你根据用户事件来更新部分页面内容。

3.2 AJAX 的缺点

        （1）没有浏览历史，不能回退.

        （2）存在跨域问题 ( 同源 ) 。

        （3）SEO 不友好（爬虫）。

4、AJAX 的使用

4.1 核心对象

        XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

4.2 使用步骤

使用步骤：

        （1）创建 XMLHttpRequest 对象。

        （2）设置请求信息（可以设置请求头，看具体需要）。

        （3）发送请求。

        （4）接收响应。

示例：

    <script>
        const btn = document.querySelector('button');
        const content = document.querySelector('.content');

        // 4. 接收响应
        btn.addEventListener('click', () => {

            // 1. 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.addEventListener('readystatechange', () => {
                if (xhr.readyState === 4) {
                    content.innerHTML = xhr.response;
                }
            })

            // 2. 设置请求信息
            xhr.open('POST', 'http://127.0.0.1:8080/test_post');  // POST 请求也可以使用query 和 params 参数
            // ps: 设置请求头，主要适用于当数据类型是 urlencoded 或者 json 时。 
            xhr.setRequestHeader('Content-type', 'application/json')
            
            // 3. 发送请求
            xhr.send();
        })
    </script>

二、AJAX 案例（ GET / POST ）

1、搭建测试 ajax 请求服务器（server.js）

// 1. 导入 express 模块
const express = require('express');

// 2. 创建 web 服务器
const app = express();

// 暴露静态资源
app.use(express.static(__dirname + '/src'))

// 3. 调用 app.listen(端口号，启动成功后的回调函数) 启动服务器
app.listen(8080, (err) => {
    if (!err) {
        console.log(`http://127.0.0.1:8080/01_4种状态.html`);
    }
})

2、使用 ajax 创建简单的 html 页面（xxx.html）

    <script>
        const btn = document.querySelector('button');
        const content = document.querySelector('.content');
        // 给按钮绑定监听
        btn.addEventListener('click', () => {
            // 1. 创建 XMLHttpRequest 实例对象
            const xhr = new XMLHttpRequest();

            // 2. 指定发送请求的：method (GET / POST / ...) 、URL
            xhr.open('POST', 'http://127.0.0.1:8080/test_post');  // POST 请求也可以使用query 和 params 参数

            // 3. 发送请求
            xhr.send();
        })
    </script>

xhr 的 4 种状态：

        0：实例出来的那一刻状态就是0，初始状态。

        1：open 已经调用了࿰