一、原生 AJAX

1.AJAX 简介

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

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

## 请求报文
重点是格式与参数
```
行      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
```

## 响应报文
```
行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>Ajax测试</h1>
            </body>
        </html>
```
* 404
* 403
* 401
* 500
* 200

2. XML 简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据

比如说我有一个学生数据：

name = "孙悟空" ; age = 18 ; gender = "男" ;

用 XML 表示：

<student>

<name>孙悟空</name>

<age>18</age>

<gender>男</gender>

</student>

现在已经被 JSON 取代了

用 JSON 表示：

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

3. AJAX 的特

3.1 AJAX 的优点

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

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

3.2 AJAX 的缺点

1) 没有浏览历史，不能回退

2) 存在跨域问题(同源)

3) SEO 不友好

experss框架建立

experss.js建立

//1. 引入express
const express = require('express');
const { request } = require('http');
//2. 创建应用对象
const app=express();

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

1.在全局文件输入指令“npm i experss”建立node_modules、package-lock.json、package.json三个文件。

2.在experss基本使用.js进行输入指令“ node 文件名称”

3.在网页输入“127.0.0.1:8000”其中8000是experss文件设置的端口。

4. AJAX 的使用

4.1 核心对象

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

4.2 使用步骤

1) 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

2) 设置请求信息

xhr.open(method, url);

//可以设置请求头，一般不设置

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

3) 发送请求

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

4) 接收响应

//xhr.responseXML 接收 xml 格式的响应数据

//xhr.responseText 接收文本格式的响应数据

xhr.onreadystatechange = function (){

if(xhr.readyState == 4 && xhr.status == 200){

var text = xhr.responseText; console.log(text);

}

}

1.GET

GET.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>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>GET</button>
    <div id="result"></div>
    
</body>
<script>
  //获取button元素
  var bat=document.getElementsByTagName('button')[0];
 var result=document.getElementById('result');

   //绑定事件
   bat.onclick=function(){
       //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{

                    }
                }
            }
   }
</script>
</html>

server.js

//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 GET')
});

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

结果：

2.POST

POST.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>POST</title>
    <style>
        .result {
            width: 200px;
            height: 100px;
            border: 1px solid red;

        }
    </style>

</head>

<body>
    <button>POST</button>
    <div class="result"></div>
</body>
<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.querySelector('.result');

    btn.onclick = function () {
        //1. 创建对象   
        const xhr = new XMLHttpRequest();
        //2. 初始化 设置类型与 URL
        xhr.open('POST', 'http://127.0.0.1:8000/posts');
        //设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('name', 'atguigu');
        //3. 发送
        xhr.send('a=100&b=200&c=300');
        //4. 事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    result.innerHTML = xhr.response;
                } else {

                }
            }
        }
    }

</script>

</html>

server.js

//1. 引入express
const { response } = require('express');
const express = require('express');
const req = require('express/lib/request');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
 

app.all('/posts',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');

    response.end('Hello Ajax POST')
})



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

结果：

JSON

JSON.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>AJAX JSON 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>JSON</button>
    <div id="result"></div>
    
</body>
<script>
  //获取button元素
  var bat=document.getElementsByTagName('button')[0];
 var result=document.getElementById('result');

   //绑定事件
   bat.onclick=function(){
       //1. 创建对象
       const xhr=new XMLHttpRequest();
          //设置响应体数据的类型
          xhr.responseType='json';
       //2. 初始化 设置请求方法和 url
       xhr.open('GET','http://127.0.0.1:8000/json-server')
         //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 的文本
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }else{

                    }
                }
            }
   }
</script>
</html>

server.js

//1. 引入express
const { response } = require('express');
const express = require('express');
const req = require('express/lib/request');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

app.get('/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);
})



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

结果：

4.3 解决 IE 缓存

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题

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

案例：

问题：两个浏览器同时打开，如果修改了server反映的值，就会出现修改前一个浏览器显示的值和修改后一个浏览器显示的值。不会进行同步。

解决：在请求链接上添加Date now();

IE 缓存问题.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>IE 缓存问题.html</title>
    <style>
          .result{
            width:200px;
            height:100px;
            border:solid 1px #258;
        }
    </style>
</head>
<body>
    <button>IE 缓存</button>
    <div class="result"></div>
</body>
<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>
</html>

server.js

//1. 引入express
const { response } = require('express');
const express = require('express');
const req = require('express/lib/request');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/ie',(request,response)=>{
      //设置响应头  设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*');
          //设置响应体
    response.send('HELLO IE - 4');
})



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

4.4 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。

1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。

2: 表示 send()方法已经执行，并且头信息和状态码已经收到。

3: 表示正在接收服务器传来的 body 部分的数据。

4: 表示服务器数据已经完全接收，或者本次接收已经失败了

二、jQuery 中的 AJAX

1. get 请求

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

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default

2. post 请求

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

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default。

三、跨域

1. JSON

1) JSONP 是什么

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

2) JSONP 怎么工作的？

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

3) JSONP 的使用

1.动态的创建一个 script 标签

var script = document.createElement("script");

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

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

function abc(data) {

alert(data.name);

};

3.将 script 添加到 body 中

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {

console.log("收到请求");

var callback = req.query.callback;

var obj ={

name:"孙悟空",

age:18

}

res.send(callback+"("+JSON.stringify(obj)+")");

});

4)jQuery 中的 JSONP

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <button id="btn">按钮</button>
    <ul id="list"></ul>
    <script type="text/javascript" src="./jquery-1.12.3.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById('btn')
            btn.onclick = function () {
                $.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?", function
                    (data) {
                    console.log(data);
                    //获取所有的电影的条目
                    var subjects = data.subjects;
                    //遍历电影条目
                    for (var i = 0; i < subjects.length; i++) {
                        $("#list").append("<li>" +
                            subjects[i].title + "<br />" +
                            "<img src=\"" + subjects[i].images.large + "\" >" +
                            "</li>");
                    }
                });
            }
        }
    </script>
</body>

</html>

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 的使用

主要是服务器端的设置：

router.get("/testAJAX" , function (req , res){

//通过 res 来设置响应头，来允许跨域请求

//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");

res.set("Access-Control-Allow-Origin","*");

res.send("testAJAX 返回的响应");

});

1.node.js

2.nodemon自动重启工具

安装链接：

https://www.npmjs.com/package/nodemon

输入指令“npm install -g nodemon”