原生ajax

原生ajax

1.ajax简介

ajax 全称asynchronous javascript and xml ，就是异步的js和xml，通过ajax可以在浏览器中向服务端发送异步请求，最大的优势是无刷新获取数据

2.xml的简介

xml 可扩展标记语言，被设计用来传输和存储数据，和超文本标记语言HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全部是自定义标签，比如下面用来表示一些数据

一个学生的数据
name = '苏三'；age = 18 ; gender = '男';

用XML表示：
<student>
   <name>苏三</name>
   <age>18</age>
   <gender>男</gender>
</student>

现在已经被JSON取代

3.ajax的优缺点

• ajax的优点
  (1) 可以无刷新页面而与服务端进行通信
  (2) 允许根据用户事件来更新部分页面内容

• ajax的缺点
  (1) 没有浏览历史，无法回退
  (2) 存在同源跨域的问题
  (3) SEO不友好

4.HTTP

HTTP 全称hypertext transport protocol 协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则，约定

请求报文

行  POST /?p=5 HTTP/1.1
头  Host: xcneuq.top
    Cookie:name=owen
    Content-type:application/x-www-form-urlencoded
    User-Agent: chrome 83
空行
体  username=admin&password=123456

响应报文

行  HTTP/1.1 200 OK
头  Content-Type:text/html;charset=utf-8
    Content-length:2048
    Content-encoding:gzip
空行
体  

5.同源策略

是一种浏览器安全策略，要求网页和ajax请求资源的协议，域名，和端口号保持一致，违背这个规则就是跨域，ajax遵循浏览器的同源策略

6.jsonp解决跨域

非官方的跨域方式，利用的是script标签来实现跨域，（img,link,script等标签天生具备跨域的能力）

7.CORS跨域

• 定义
  Cross-Origin Resource sharing 跨域资源共享，是官方的跨域解决方案，特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，跨域资源共享标准新增一组HTTP首部字段，允许服务器声明哪些资源站通过浏览器有权限访问哪些资源
• CORS如何工作
  CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
• CORS的使用
  主要是服务端的设置头信息：
  “Access-Control-Allow-Origin” // 指示请求的资源能共享给哪些域。
  “Access-Control-Allow-Credentials” //指示当请求的凭证标记为 true 时，是否响应该请求。
  “Access-Control-Allow-Headers” //用在对预请求的响应中，指示实际的请求中可以使用哪些 HTTP 头。
  “Access-Control-Allow-Methods” //指定对预请求的响应中，哪些 HTTP 方法允许访问请求的资源。

  //CORS设置跨域访问 *号代表默认所有
    app.all('*', function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
        res.header("X-Powered-By", ' 3.2.1')
        res.header("Content-Type", "application/json;charset=utf-8");
        next();
    });
  

  跨域参考资料