Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

这并不是一种新的技术，而是好多旧的技术融合在了一起，而产生了一种新的思想。它包含的技术有：JavaScript、xml、HTML 、dom、XMLHttpRequest 等。

原生 Ajax 的四个步骤

1、创建 ajax 对象

1	var xhr = new XMLHttpRequest();

2、监听 ajax 状态的改变，绑定回调函数，判断 ajax 状态等于 4，获取服务端响应的数据

xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var responseData = this.responseText;
    console.log(responseData);
    //把服务端响应回来的json字符串变为js对象
    var result = JSON.parse(responseData);
    var str = `大名：${result.username}-芳龄：${result.age}`;
    document.getElementById("info").innerHTML = str;
  }
};

3、建立 Http 连接

1	xhr.open("get", "接口地址", true);

4、发送 http 请求

1	xhr.send(null);

get 与 post 请求的区别

1、GET 请求会将参数跟在 URL 后进行传递，而 POST 请求则是作为 HTTP 消息的实体内容发送给 WEB 服务器。

2、 GET 方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET 方式会带来严重的安全问题。而 POST 方式相对来说就可以避免这些问题。

跨域问题

域名、协议、端口不一样就会产生跨域

解决跨域的方法

1、通过 CORS 方式跨域

CORS（跨域资源共享，Cross-Origin Resource Sharing）定义一种跨域访问的机制，可以让 AJAX 实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交 AJAX 跨域请求。实现此功能非常简单，只需由被请求的服务器设置一个响应头即可.
1
header("Access-Control-Allow-Origin:*"); // 允许任何来源

2、JSONP 的方式

JSONP 之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力，客户端网页网页通过添加一个<script>元素，向服务器请求 JSON 数据，这种做法不受同源政策限制

unction addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('response data: ' + JSON.stringify(data));
};

3、正向代理
4、node 中间件实现跨域代理

利用 node + express + http-proxy-middleware 搭建一个 proxy 服务器

前端代码

var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;

// 访问http-proxy-middleware代理服务器
xhr.open("get", "http://www.domain1.com:3000/login?user=admin", true);
xhr.send();

后台代码

var express = require("express");
var proxy = require("http-proxy-middleware");
var app = express();

app.use(
  "/",
  proxy({
    // 代理跨域目标接口
    target: "http://www.domain2.com:8080",
    changeOrigin: true,

    // 修改响应头信息，实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
      res.header("Access-Control-Allow-Origin", "http://www.domain1.com");
      res.header("Access-Control-Allow-Credentials", "true");
    },

    // 修改响应信息中的cookie域名
    cookieDomainRewrite: "www.domain1.com" // 可以为false，表示不修改
  })
);

app.listen(3000);
console.log("Proxy server is listen at port 3000...");