AJAX的基本内容

1.ajax 全名 async javascript and XML(异步JavaScript和XML)
2.通过AJAX可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据
3.AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
4.是前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具

AJAX的优缺点

优点

1.页面无刷新更新数据

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

2.异步与服务器通信

AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

3.前端和后端负载平衡

AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

4.基于标准被广泛支持

AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

5.界面与应用分离

Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点

1.AJAX 干掉了Back和History功能，即对浏览器机制的破坏（没有浏览历史，不能回退）

在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现的，后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，

2.AJAX的安全问题

AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等

3.对搜索引擎支持较弱

对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

eg：

比如网页中有一个

在页面源代码中是找不到的
因为这些内容都是通过AJAX异步请求的方式来得到的结果
意思是源代码第一次请求京东的时候，源代码结果中是没有商品消息的
源代码其实就是响应体（http响应的一部分）
我们可以看到是因为
他通过AJAX向服务端发请求，服务端反结果，然后通过js动态创建到页面当中去的
因为是动态创建，所以爬虫爬不到商品数据

4.破坏程序的异常处理机制

至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的

5.违背URL和资源定位的初衷

我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的

6.AJAX不能很好支持移动设备

一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax

7.客户端过肥，太多客户端代码造成开发上的成本

编写复杂、容易出错；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

8.如果用户禁用了JS，网站就取不到数据

HTTP协议请求报文与相应文本结构

HTTP（HyperText Transfer Protocol）【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间相互通信的规则。
主要约定了两块内容

请求报文

、、、

行

请求类型（get/post）
url的路径（路径或请求字符串）eg：s?wd=谷粒学院
我们在敲下回车发请求，浏览器帮我们把报文拼接好

将整个内容放到url做传递
http协议的版本（HTTP/1.1）

头

Host: atguigu.com
COOkie: name=atguigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行(必须有)

体（可以有内容也可以没有内容）

如果是get请求请求体是空的
如果是post请求请求体可以不为空
eg：username=admin&password=admin
、、、
完整的http请求报文

响应报文

、、、

行

http协议的版本（HTTP/1.1）
响应状态码（200）
响应状态码：200（响应成功）、404（找不到）、401（未授权）、500（内部错误）等
状态码是304代表Not Modified,说明你不是第一次访问，无需重新加载
响应状态字符串（OK）

头

类型 Content-type：text/html；charset=utf-8
长度 Content-length：2048
压缩方式 Content-encoding：gzip
空行

体

<html>
	<head>
	</head>
	<body>
  		<h1>尚硅谷</h1>
	</body>
</html>

Chrome网络控制台查看通信报文

get请求的演示

网页界面（检查–刷新网页）

对请求参数做解析的显示

post请求的演示

登录界面（检查–登录）

请求体为空是因为响应的结果是一个跳转

express框架介绍与基本使用

express的基本使用

首先安装express的包
然后

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

const app = express();

// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
    // 设置响应
    response.send('啦啦啦啦啦啦啦')
});

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

打开终端输入node express.js

AJAX的交互流程

1、创建XMLHttpRequest对象；

const xhr = new XMLHttpRequest()

2、规定请求的类型、URL以及是否异步处理请求；

xhr.open('GET', url,true)

3、设置发送信息至服务器时的内容编码类型；

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

4、发送请求；

xhr.send( );

5、接受服务器响应数据；

xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
         if (xhr.status >= 200 && xhr.status < 300) {
             result.innerHTML = xhr.response;
        } 
      }
    }

readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 : 表示 send 方法已经执行完成
readyState === 3 : 表示正在解析响应内容
readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

6、使用JS和DOM实现局部刷新；

AJAX请求的基本操作

        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function() {
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化 设置请求方法和url
            // 第一个参数是发送什么类型的请求，第二个是给谁发
            xhr.open('GET','http://127.0.0.1:8000/server')
	    //这里是get请求，如果是post请求把get改成post即可
            // 3.发送
            xhr.send();
            // 4.事件绑定 处理服务端返回结果
            // on when 当......时候
            // readystate 是xhr 对象中的属性，表示状态 0 1 2 3 4
            // 0表示未初始化，
            //最开始readystate的值就是0，
            // 1表示open方法已经调用完毕，
            // 2表示send方法已经调用完毕
            // 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;
                    }
                }
            }

        }

在Ajax当中该如何传递参数

在url的后面写参数
用？分割加参数的名字与值

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

POST设置请求体

xhr.send('a=200&b=300'); xhr.send('a:200&b:300');

设置CORS响应头实现跨域

CORS是什么？

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

response.setHeader("Access-Control-Allow-Origin","*"); 
response.setHeader("Access-Control-Allow-Headers","*");//请求头信息
response.setHeader("Access-Control-Allow-Method","*");//请求方法 
// 这样客户端跨域请求是哪个页面都可以，头信息可以自定义，请求方法也可以随意

补充：

get请求方法和post请求方法的区别

(1)post比get安全 (因为post参数在请求体中。get参数在url上面)
(2)get传输速度比post快根据传参决定的。(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
(3)post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
(4)get获取数据 post上传数据(上传的数据比较多而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)