AJAX同源策略
1). server.js
//引入express框架
const express = require('express');
//创建express对象
const app = express();
//创建路由规则
app.get('/home', (request, response) => {
//响应一个页面,这样会获取index.html中的数据
response.sendFile(__dirname + '/index.html');
});
//创建一个路由规则 获取用户数据
app.get('/data', (request, response) => {
response.send('用户数据');
});
//监听8000端口
app.listen(9000, () => {
console.log('监视9000端口中...');
})
2). index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>尚硅谷</h1>
<button>点击获取用户数据</button>
</body>
<script>
const btn = document.querySelector('button');
btn.onclick = function(){
//创建一个xhr
const x = new XMLHttpRequest();
//这里只写/data 是因为满足同源策略,所以url可以简写
x.open("GET","/data");//给谁发
//发送
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
if(x.status >= 200 && x.status <300){
console.log(x.response)
}
}
}
}
</script>
</html>
3). 感想:
上面这个同源策略的案例就是利用,第一个get请求获取了 index.html 这个响应页面,从而获取了index.html中的说有数据到server.js的服务器页面(http://127.0.0.1:9000/home)。
然后在原服务器server.js再利用第二个 get 请求创建一个发送数据的路由规则,响应 index.html中button按钮。
所以 http://127.0.0.1:9000/home 中的内容和 index.html 浏览器中内容是一致的,而且点击button按钮会触发server服务器(这不就同源了吗,即响应页面和按钮请求同源)发送相关数据来