本文是根据尚硅谷讲师的AJAX所编

[视频]（https://www.bilibili.com/video/BV1WC4y1b78y?p=1）

第一章：原生AJAX

1.1AJAX简介

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

通过AJAX可以在浏览器中向服务器发送异步请求

最大的优势：无需刷新即可获得数据

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

1.2XML简介

XML可扩展标记语言

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

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

例如表示一个学生数据（name=“张三” age=“18” gender=“男”)

用XML表示：

jpg

但是现在被JSON取代了

用JSON表示：

jpg

1.3 AJAX 的特点

1.3.1 AJAX 的优点

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

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

1.3.2 AJAX 的缺点

没有浏览历史，不能回退

存在跨域问题(同源)

SEO （搜索引擎优化）不友好

第二章HTTP

2.1 HTTP概述

HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。

（客户端和服务端通过交换各自的消息（与数据流正好相反）进行交互。由像浏览器这样的客户端发出的消息叫做 requests，被服务端响应的消息叫做responses）

2.2HTTP 请求报文

格式和参数：

1. 请求行

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

2. 请求头

Host: www.baidu.com

Cookie: name=zhangsan

Content-Type: application/x-www-form-urlencoded

user-Agent：chrome 83

3.空行

4.请求体

username=admin&password=admin

2.3HTTP 响应报文

1.状态行

HTTP/1.1 200 OK

2.响应头

Content-Type:text/html;charset=utf-8

Content-length:2048

Content-encoding:gzip

3.空行

4.响应体

html内容等等

2.4HTTP 请求交互的基本过程

jpg

第三章原生AJAX

3.1 安装nodejs

3.2 安装Express

jpg

3.3 开始工作

jpg

启动成功

jpg

成功后可以查看请求和响应

jpg

3.4 GET请求

//引入Express

const express = require('express');

//创建应用对象

const app = express();

//创建路由规则

// request是对请求报文的封装

// response是对响应报文的封装

app.get('/server',(request,response)=>{

    //设置响应头 设置允许跨域

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

    //设置响应体

    response.send('Hello AJAX');



});

//监听端口启动服务

app.listen(8000,()=>{

  console.log("服务器已经启动，8000端口监听中");

});

jpg

成功

jpg

3.5 AJAX请求的基本操作

基于3.4的GET请求，可以实现一些基本操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AJAX请求</title>

    <style>

        #result{

            width: 200px;;

            height: 100px;

            border:solid 1px #90b;

        }

    </style>

</head>

<body>

    <button>点击发送请求</button>

    <div id="result"></div>

    <script>

        //获取button元素

        const btn = document.getElementsByTagName('button')[0];

        const result = document.getElementById("result");

        //绑定事件

        btn.onclick = function(){

            //创建对象

            const xhr = new XMLHttpRequest();

            //初始化 设置请求方法和url

            xhr.open('GET','http://127.0.0.1:8000/server');

            //发送

            xhr.send();

            //事件绑定 （处理服务器返回的结果）

            // on when 当....时候

            //readystate 是xhr对象中的属性

            //表示状态

            // 0：未初始化

            // 1：open方法调用完毕

            // 2：state方法调用完毕

            // 3：服务端返回了部分结果

            // 4：服务端返回了所有的结果

            //change  改变

            xhr.onreadystatechange = function(){

                //判断（4）

                if(xhr.readyState===4){

                    //判断响应状态码 200(2xx 成功) 404 403 401 500

                    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

                    }

                }

            }

        }

    </script>

</body>

</html>

成功页面

jpg

3.6 post请求

实现一个简单的功能

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

创建路由规则(添加至server.js)

jpg

post.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AJAX POST 请求</title>

    <style>

        #result{

            width: 200px;

            height: 100px;

            border:solid 1px #903;

        }

    </style>

</head>

<body>

    <div id="result"></div>

    <script>

        //获取元素对象

        const result = document.getElementById("result");

        //绑定事件

        result.addEventListener("mouseover",function(){

            //创建对象

            const xhr = new XMLHttpRequest();

            //初始化 设置类型与URL

            xhr.open('post','http://127.0.0.1:8000/server');

            //发送

            xhr.send();

            //事件绑定

            xhr.onreadystatechange = function(){

                //判断

                if(xhr.readyState===4){

                    if(xhr.status >= 200 && xhr.status<300){

                        //处理服务器返回的结果

                        result.innerHTML = xhr.response

                    }

                }

            }

        })

    </script>

</body>

</html>

成功

jpg

3.7 设置请求头信息

 // 设置请求体内容的类型

 xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');

 // 自定义头信息

 xhr.setRequesHeader('name', 'ykyk');

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

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

3.8 JSON数据请求

server.js部分

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);

});

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>JSON</title>

  <style>

    #result {

      width: 200px;

      height: 100px;

      border: solid 1px #89b;

    }

  </style>

</head>

<body>

  <div id="result"></div>

  <script>

    const result = document.getElementById('result');

    // 绑定键盘按下事件

    window.onkeydown = function(){

      // 发送请求

      const xhr = new XMLHttpRequest();

      // *2*.(自动转换) 设置响应体数据的类型(自动转换)

      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);

            // 1. 手动对数据转化 (字符串再转换成json)

            // let data = JSON.parse(xhr.response); //转换成json

            // result.innerHTML = data.name;

            // *2*. (自动转换)自动转换(自动转换)

            result.innerHTML = xhr.response.name; //已经自动变成json

          }

        }

      }

    }

  </script>

</body>

</html>

成功

jpg

3.9 请求超时与网络异常

// 超时设置 （2秒）

xhr.timeout = 2000;

// 超时回调

xhr.ontimeout = function(){

alert('网络超时，请稍后重试')

}

// 网络异常回调

xhr.onerror = function(){

alert('网络异常，请稍后重试')

}

3.10 取消请求

// 手动取消

xhr.abort()

重复请求问题（节流）：通过检测一个变量，如果正在发送请求，则取消该请求，创建一个新的额请求

3.11 axios发送ajax请求

引入axios

jpg

axios.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>axios 发送 AJAX请求</title>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>

    <button>GET</button>

    <button>POST</button>

    <button>AJAX</button>

    <script>

        const btns = document.querySelectorAll('button');

        //配置 baseURL

        axios.defaults.baseURL= 'http://127.0.0.1:8000';

        btns[0].onclick = function(){

            //GET请求

            axios.get('/axios-server',{

                //url参数

                params:{

                    id:100,

                    vip:7

                },

                headers:{

                    name:'atguigu',

                    age:20

                }

            }).then(value =>{

                console.log(value);

            });

        }

        //发post请求

        btns[1].onclick = function(){

            //post请求

            axios.post('/axios-server',{

                    username:'admin',

                    password:'admin',

                },{

                //url

                params:{

                    id:200,

                    vip:9

                },

                //请求头参数

                headers:{

                    height:100,

                    weight:180,

                },

            }

            )

        }

        btns[2].onclick = function(){

            axios({

                //url

                url:'/axios-server',

                //url参数

                params:{

                    vip:10,

                    level:30

                },

                //头信息

                headers:{

                    a:100,

                    b:200

                },

                //请求体参数

                data:{

                    username:'admin',

                    password:'admin'

                }

            })

        }

    </script>

</body>

</html>

axios服务

app.all('/axios-server',(request,response)=>{

  //设置响应头 设置允许跨域

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

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

  const data = {name:'尚硅谷'};

  response.send(JSON.stringify(data));

});

第四章跨域

4.1同源策略

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

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

跨域：违背同源策略就是跨域

例子

jpg

4.2 如何解决跨域

JSONP

\1) JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明

才智开发出来，只支持get 请求。

\2) JSONP 怎么工作的？

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

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

3)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)+")");

});

第五章 CORS

CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方

案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持

get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些

源站通过浏览器有权限访问哪些资源

CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应

以后就会对响应放行。

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 返回的响应");

});

AJAX（看尚硅谷AJAX的入门笔记）

本文是根据尚硅谷讲师的AJAX所编

第一章：原生AJAX

1.1AJAX简介

1.2XML简介

1.3 AJAX 的特点

1.3.1 AJAX 的优点

1.3.2 AJAX 的缺点

第二章HTTP

2.1 HTTP概述

2.2HTTP 请求报文

1. 请求行

2. 请求头

3.空行

4.请求体

2.3HTTP 响应报文

1.状态行

2.响应头

3.空行

4.响应体

2.4HTTP 请求交互的基本过程

第三章原生AJAX

3.1 安装nodejs

3.2 安装Express

3.3 开始工作

3.4 GET请求

3.5 AJAX请求的基本操作

基于3.4的GET请求，可以实现 一些基本操作

成功页面

3.6 post请求

实现一个简单的功能

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

post.html

成功

3.7 设置请求头信息

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

3.8 JSON数据请求

server.js部分

html部分

成功

3.9 请求超时与网络异常

3.10 取消请求

3.11 axios发送ajax请求

引入axios

axios.html

axios服务

第四章 跨域

4.1同源策略

4.2 如何解决跨域

JSONP

第五章 CORS

推荐阅读更多精彩内容

基于3.4的GET请求，可以实现一些基本操作

第四章跨域