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,获取服务端响应的数据

1
2
3
4
5
6
7
8
9
10
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var responseData = this.responseText;
console.log(responseData);

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 数据,这种做法不受同源政策限制

1
2
3
4
5
6
7
8
大专栏  Ajax和跨域class="line">9
10
11
12
13
14
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 (data) {
console.log('response data: ' + JSON.stringify(data));
};

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

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

前端代码

1
2
3
4
5
6
7
8
var xhr = new XMLHttpRequest();


xhr.withCredentials = true;


xhr.open("get", "http://www.domain1.com:3000/login?user=admin", true);
xhr.send();

后台代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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...");

猜你喜欢

转载自www.cnblogs.com/liuzhongrong/p/11986285.html
今日推荐