HTTP和AJAX

HTTP

http应用层协议，基于tcp/ip协议。

每一个独立的文件都会发起一个独立的请求，一个html文件会在访问的时候通常会发起不止一次请求。

URI:uniform resourse identifier:统一资源标识符

URL:uniform resource location:统一资源定位符

url是uri的落地方案

http：超文本传输文件

HTTPS：安全版本的http协议,它比http多一个一层验证。需要向相关部门去申请（企业）得到一个ssl加密的文件，需要放置在www服务器的指定位置。当用户访问这个给网站时，浏览器会自动读取这个ssl文件，同时将ssl文件发送给专门的服务器进行数据比对。

http发送和接收时都会以包的形式传输数据。

请求

1、请求行：方法（post、get)、URL地址、协议版本

2、请求头：当次请求的媒体类型，及用户代理信息（浏览器信息）

3、请求体：数据(文本、二进制)

相应：

1、状态行：服务器地址、协议版本、状态码

2、响应头：响应时间、媒体类型、相应数据的详细信息

3、响应体：数据（文本、二进制）

状态码：

200：一切正常

301、304：数据未修改

400：浏览器端语法错误

401：浏览器token验证失效

404：服务器没有找到该资源、

500：服务器发生重大错误

HTTP状态码由三个十进制数组组成，第一个十进制数字定义了状态码的类型、响应分为五类:信息响应(100-199),成功响应(200-299),重定向(300-399),客户端错误(400-499)和服务器错误(500-599):

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

MIME类型

通用规范，用来表示不同的媒体类型：

常见的媒体格式类型如下：

text/html：HTML格式

text/plain：纯文本格式

text/xml：XML格式

image/gif：gif图片格式

image/jpeg：jpg图片格式

image/png：png图片格式

appiication/json：JSON数据格式

url

http网络协议

www主机名（默认是www）

XXX.com域名

：5500端口（默认是80）

/public/indexx.html 路径

?id=1&a=2参数

#daadsa 锚点名称

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

使用ajax创建对象

1、创建对象

const xhr = new XmlHttpRequest();

兼容低版本ie浏览器

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = ActiveXobject('Microsoft.XMLHttpRequest')
}
return xmlhttp
}

2、为xhr对象附加处理函数

 xhr.onreadystatechange = function () {
      if(xhr.readyState == 4){
        if(xhr.status == 200){
          xhr.response
        }else{
          
        }
      }
    }

onreadystatechange事件，监控就绪状态的变化，会触发四次，xhr.readyState会从0-1，1-2，2-3，3-4 xhr.status表示响应数据的状态码

3、打开通道

设置Ajax请求的配置并打开通道

xhr.open('post','/api/XXX?a=1',true);

xhr.open(请求方法，url地址，是不是异步)

4、设置请求类型

  xhr.setRequestHeader('Content-Type', 'Application/x-www-form-urlencoded');
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.setRequestHeader('Content-Type', 'text/plain');

get请求通常不需要设置

post但是发送的数据是formData数据，multer组件不允许我们设置，如果需要设置则：

  xhr.setRequestHeader('Content-Type', 'multipart/form-data');

post发送常规数据时，需要主动设置：

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

//发送数据时
xhr.send("a=1&b=2")

需要发送json数据：

	xhr.setRequestHeader('Content-Type', 'application/json');
//发送数据
	xhr.send(JSON.stringify({
        a:1,
        b:2,
    }))

当我们需要发送token数据时

  xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'))

5、发送数据

xhr.send();

使用Promise封装ajax

function ajax(method, url, data) {
      return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              resolve(JSON.parse(xhr.response))
            } else {
              reject({
                code: xhr.status
              })
            }
          }
        }
        method = method.toLowerCase()
        //如果是get请求，将参数拼接到url中
        if (method == 'get') {
          const arr = []
          for (let key in data) {
            arr.push(
              key + '=' + encodeURIComponent(data[key])
            )
          }
          arr.join('&')
          url += '?' + arr.join('&')
        }


        xhr.open(method, url, true);

        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'))
        //如果是post请求
        if (method == 'post') {
          xhr.setRequestHeader('Content-Type', 'application/json');
          xhr.send(JSON.stringify(data))
        } else {
          xhr.send();
        }
      })
    }