javaScript Ajax 和 跨域

序言

什么是Ajax?

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax是异步 JavaScript 和XML的简写。

Ajax技术的核心是XMLHttpRequest 对象简称XHR。能以异步方式从服务器获取新数据，意味着用户点击按钮，请求数据后，可以不必刷新页面也能获取新数据来更新当前页面。

XMLHttpRequest 对象👉MDN 传送

IE5是第一款引入XMLHttpRequest对象的浏览器。

但是现在是2020年了，IE7+都支持原生的XHR对象。直接使用XMLHttpRequest()构造函数创建。

var xhr = new XMLHttpRequest();

# open() 方法 启动一个请求以备发送，还未发送请求
# 第一个参数用于指定发送请求的方式，这个字符串，不区分大小写，但通常使用大写字母，"GET"和"POST"
# 第二个参数是URL，该URL相对于执行代码的当前页面，也可以使绝对路径
# 第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送
xhr.open("get","ex.txt",false); // 同步

# post 请求如下
xhr.open('post',"login.php",true)
xhr.setRequestHeader("Content-Type","application/x-www-from-urlencoded")
var form = $('#user-info').serialize(); 
// serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
// 格式：FirstName=Mickey&LastName=Mouse
xhr.send(form) // 发送序列化表单数据

# send() 发送请求,调用后请求会被分派到服务器
xhr.send(null);

# 接收响应前，还可以通过 abort() 来取消异步请求。

# 接收到响应，第一件事，检查 status属性，以确定响应已经成功返回。http 标志码为200 视为成功
# 此时，responseText属性的内容已经就绪，responesXML 也可以访问，状态码为304 表示请求的资源并没有被修改。直接使用浏览器中的缓冲的版本。

xhr.onreadystatechange = function(){
  if(xhr.readyState ==4 ){  // 完成，已经接收到全部响应数据，可以在客户端使用
    if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
     console.log('请求成功', xhr.responseText)
  }else{
    console.log('请求失败')
  }
  }
}
# readyState 状态值
# 0 未初始化，没有调用open()方法
# 1 启动，调用open()方法，没有调用send()
# 2 发送，调用send(),没有接收到响应
# 3 接收，已经接收到部分数据响应
# 4 完成，已经接收到全部响应数据，可以在客户端使用

XHR 超时设定

IE8为XHR对象添加了一个 timeout属性，表示请求在等待响应多少毫秒之后终止。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState ==4 ){  // 完成，已经接收到全部响应数据，可以在客户端使用
    try {
      if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
      console.log('请求成功', xhr.responseText)
   }else{
     console.log('请求失败')
   }
    } catch (ex){
      // 由 ontimeout 事件处理
    }
  }
}
xhr.open("get","ex.txt",true); // 异步
xhr.timeout = 1000
xhr.ontimeout = function(){
  console.log('请求超时')
}

xhr.send(null);

GET 和 POST 请求的区别（面试高频）

两者都是超文本传输协议（HTTP）请求的方法，是客户端和服务器之间进行请求-响应的方法。

• GET - 从指定的资源请求数据。查询字符串（名称/值对）是在 GET 请求的 URL 中发送的
• POST - 向指定的资源提交要被处理的数据。查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的。

区别对比	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

提到Ajax 就不得不说下 跨域（大家都懂）

那么什么是跨域?

是指一个域下的文档或者脚本试图去请求另一个域下的资源，这里是广义上的跨域。包含以下：

• 资源跳转：A链接、重定向、表单提交
• 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
• 脚本请求：js发起的ajax请求、dom和js对象的跨域操作等

我们经常遇到的是狭义的跨域是由浏览器同源策略限制的一类请求场景。

那么什么是同源策略呢？

👉同源策略是一个重要的安全策略，它用于限制一个👉origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源的定义：如果两个 URL 的 👉protocol、👉port (如果有指定的话)和 👉host 都相同的话，则这两个 URL 是同源。

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制以下几种行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
  • Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。
• DOM 和 Js对象无法获得
• AJAX 请求不能发送

跨域的几种解决方案

1. jsonp跨域：只能实现get一种请求。
   1. 实现原理：script、link、img 标签可以加载静态资源，被浏览器允许。
2. document.domain + iframe跨域 ： 此方案仅限主域相同，子域不同的跨域应用场景。
   1. 实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
3. location.hash + iframe
4. window.name + iframe跨域
5. postMessage跨域
6. 跨域资源共享（CORS）：主流的跨域解决方案。
7. nginx代理跨域
   1. 跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题
   2. 实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
8. nodejs中间件代理跨域
   1. node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
9. WebSocket协议跨域
   1. WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。👉https://socket.io/

👉不要再问我跨域的问题了

👉前端常见跨域解决方案（全）

本文使用 👉mdnice 排版