原生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();
      });
    
    跨域参考资料
上一篇:Ajax错误处理


下一篇:跨域资源共享 CORS 详解