本篇文章是接着跟着博主一起学Ajax（一）写的，有不是很懂的可以回顾一下上一篇文章
一、模板引擎
模板引擎概述
作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。
官方地址：https://aui.github.io/art-template/zh-cn/index.html
1.1 模板引擎使用步骤
- 下载art-template模板引擎库文件并在HTML页面中引入库文件
<script src="./js/template-web.js"></script>
将下载好的文件，保存到项目中，通过script去引用它
- 准备art-template模板
<script id="tpl" type="text/html">
<div class="box"></div>
</script>
- 告诉模板引擎将哪一个模板和哪一个数据进行拼接
var html = template('tpl',{username:'xiaohutongxue',age:'20'});
- 将拼接好的html字符串添加到页面中
document.getElementById('container').innerHTML = html;
- 通过模板语法告诉模板引擎，数据和HTML字符串该如何拼接
<script id="tpl" type="text/html">
<div class="box"> {{ username }} </div>
</script>
代码示例
<!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>
<!-- 1、将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id = "ab">
</div>
<!-- 2、准备art-template模板 -->
<script type="text/html" id='tpl'>
<h1>{{username}}{{age}}</h1>
</script>
<script type="text/javascript">
// 3、告诉模板引擎将哪个数据和哪个模板进行拼接
//1.模板ID 2.数据 对象类型
//方法就是返回值拼接好的html字符串
var html = template('tpl',{
username:'小hu同学',
age:20
});
document.getElementById('ab').innerHTML = html
</script>
</body>
</html>
页面上就渲染出了数据，说明我们这个代码是没有问题的
二、案例
2.1 验证邮箱地址唯一性（案例一）
案例的实现步骤
- 获取文本框并为其添加离开焦点的事件
- 离开焦点时，检测用户输入的邮箱地址是否符合规则
- 如果不符合规则，就阻止程序向下执行，并且给出提示信息
- 如果符合规则，就向服务器端发送请求，检测邮箱地址是否被别人注册
- 根据服务器端返回值决定客户端显示何种提示信息
代码示例
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证邮箱地址是否已经注册</title>
<!-- 这里引入bootstrap.min.css是为了样式好看
文件可以自己到官网下载
-->
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
p:not(:empty) {
padding: 15px;
}
.container {
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label>邮箱地址</label>
<input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
</div>
<!-- 错误 bg-danger 正确 bg-success -->
<p id="info"></p>
</div>
<!-- 引入ajax.js文件，以便于后面调用-->
<script src="js/ajax.js"></script>
<script>
//获取页面中的元素
var emails = document.getElementById('email');
var info = document.getElementById('info');
//当文本框离开焦点以后
emails.onblur= function(){
//获取用户的输入的邮箱地址并且赋值给email
var email = this.value;
//验证邮箱地址的正则表达式
var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
//如果用户输入的邮箱地址不符合规则
if(!reg.test(email)) {
//给出用户提示信息
info.innerHTML = '重新输入符合规则的地址'
//让提示信息显示错误的信息样式
info.className = 'bg-danger';
return;
//阻止程序向下执行
}
//向服务器端发送请求
ajax({
type:'get',
url:'http://localhost:3000/verifyEmailAdress',
data:{
email:email
},
success: function (result) {
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error: function (result) {
console.log(result)
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
ajax.js文件
function ajax (options) {
// 默认值
var defaults = {
type: 'get',
url: '',
async: true,
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
}
// 使用用户传递的参数替换默认值参数
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 参数拼接变量
var params = '';
// 循环参数
for (var attr in defaults.data) {
// 参数拼接
params += attr + '=' + defaults.data[attr] + '&';
// 去掉参数中最后一个&
params = params.substr(0, params.length-1)
}
// 如果请求方式为get
if (defaults.type == 'get') {
// 将参数拼接在url地址的后面
defaults.url += '?' + params;
}
// 配置ajax请求
xhr.open(defaults.type, defaults.url, defaults.async);
// 如果请求方式为post
if (defaults.type == 'post') {
// 设置请求头
xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
// 如果想服务器端传递的参数类型为json
if (defaults.header['Content-Type'] == 'application/json') {
// 将json对象转换为json字符串
xhr.send(JSON.stringify(defaults.data))
}else {
// 发送请求
xhr.send(params);
}
} else {
xhr.send();
}
// 请求加载完成
xhr.onload = function () {
// 获取服务器端返回数据的类型
var contentType = xhr.getResponseHeader('content-type');
// 获取服务器端返回的响应数据
var responseText = xhr.responseText;
// 如果服务器端返回的数据是json数据类型
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText);
}
// 如果请求成功
if (xhr.status == 200) {
// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
defaults.success(responseText, xhr);
} else {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(responseText, xhr);
}
}
// 当网络中断时
xhr.onerror = function () {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(xhr);
}
}
一般情况下，我们只需要编写前端的代码，根据后端提供给我们的接口文档，去调用即可，这里我把这个后端的app.js代码也贴在下面
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// const formidable = require('formidable');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 邮箱地址验证
app.get('/verifyEmailAdress', (req, res) => {
// 接收客户端传递过来的邮箱地址
const email = req.query.email;
// 判断邮箱地址注册过的情况
if (email == 'xiaohutongxue@qq.com') {
// 设置http状态码并对客户端做出响应
res.status(400).send({message: '邮箱地址已经注册过了, 请更换其他邮箱地址'});
} else {
// 邮箱地址可用的情况
// 对客户端做出响应
res.send({message: '恭喜, 邮箱地址可用'});
}
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
页面展示效果
2.2 搜索框内容自动提示（案例二）
类似的这样一个效果，输入后自动匹配提示文字
案例步骤
- 获取搜索框并且为其添加用户输入事件
- 获取用户输入的关键字
- 像服务器端发送请求并且携带关键字作文请求参数
- 将相应数据显示在搜索框底部
代码示例
HTML文件 代码中引用的ajax.js、bootstrap.min.css可复用上面案例的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
.list-group {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
<ul class="list-group" id="list-box">
</ul>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
//循环result
{{each result}}
<li class="list-group-item">{{$value}}</li>
{{/each}}
</script>
<script>
//获取搜索框
var searchinp = document.getElementById('search');
//获取提升文字的存放容器
var listBox = document.getElementById('list-box')
//存储定时器的变量
var timer = null;
//当用户在文本框中输入的时候触发
searchinp.oninput = function () {
//清除上一次开启的定时器
clearTimeout(timer);
//获取用户数输入的内容
var key = this.value;
//如果用户没有在搜索框输入内容
if(key.trim().length == 0){
listBox.style.display = 'none';
//阻止程序向下执行
return;
}
//开启定时器 让请求延迟发送
timer = setTimeout(function () {
//向服务器端发送请求
//向服务器索取和用户输入关键字内容
ajax({
type: 'get',
url: 'http://localhost:3000/searchAutoPrompt',
data: {
//这个参数key 是有后端人员提供的接口文档提供的，另外一个key就是用户输入的值
key: key
},
success: function (result) {
// 使用模板引擎拼接字符串
var html = template('tpl', { result: result });
// 将拼接好的字符串显示在页面中
listBox.innerHTML = html;
// 显示ul容器
listBox.style.display = 'block';
}
})
}, 500)
}
</script>
</body>
</html>
app.js文件
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// const formidable = require('formidable');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
// 搜索关键字
const key = req.query.key;
// 提示文字列表
const list = [
'小hu同学',
'小hu同学爱吃饭',
'小hu同学要睡觉',
'小hu同学要学习',
'百度',
'百度前端与移动端开发',
'百度大数据招聘',
'百度python招聘',
'百度java招聘',
'百度c++招聘',
'百度招聘情况'
];
// 搜索结果
let result = list.filter(item => item.includes(key));
// 将查询结果返回给客户端
res.send(result);
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
2.3 省市区三级联动（案例三）
- 通过接口获取省份信息
- 使用JavaScript获取到省市区下拉框元素
- 将服务器端返回的省份信息显示在下拉框中
- 为下拉框元素添加表单值改变事件（onchange）
- 当用户选择省份时，根据省份id获取城市信息
- 当用户选择城市时，根据城市id获取县城信息
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="province"></select>
</div>
<div class="form-group">
<select class="form-control" id="city">
<option>请选择城市</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="area">
<option>请选择县城</option>
</select>
</div>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
<option value="">请选择省份</option>
{{each province}}
<option value="{{$value.id}}">
{{$value.name}}
</option>
{{/each}}
</script>
<!-- 城市模板 -->
<script type="text/html" id="cityTpl">
<option value="">请选择城市</option>
{{each city}}
<option value="{{$value.id}}">
{{$value.name}}
</option>
{{/each}}
</script>
<!-- 县城模板 -->
<script type="text/html" id="areaTpl">
<option value="">请选择县城</option>
{{each area}}
<option value="{{$value.id}}">
{{$value.name}}
</option>
{{/each}}
</script>
<script>
//获取省市区下拉框元素
var province = document.getElementById('province')
var city = document.getElementById('city')
var area = document.getElementById('area')
//获取省份信息
ajax({
type:'get',
url:'http://localhost:3000/province',
success:function(data){
//将服务器返回的数据和HTML进行拼接
var html = template('provinceTpl',{province:data});
// 将拼接好的HTML显示在页面中
province.innerHTML = html;
}
});
//为省份的下拉框添加值改变事件
province.onchange = function(){
// 获取省份ID
var pid = this.value;
//清空县城下拉框的的信息
var html= template('areaTpl',{area:[]});
area.innerHTML = html;
//根据省份Id 获取城市信息
ajax({
type:'get',
url:'/cities',
data:{
id:pid
},
success:function(data){
var html = template('cityTpl',{city:data});
city.innerHTML = html
}
})
};
//为当用户选择城市信息时渲染县
city.onchange = function(){
var cid = this.value;
// 根据城市信息选择县城信息
ajax({
type:'get',
url:'/areas',
data:{
id:cid
},
success:function(data){
var html= template('areaTpl',{area:data});
area.innerHTML = html;
}
})
}
</script>
</body>
</html>
app.js文件
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 获取省份
app.get('/province', (req, res) => {
res.json([{
id: '001',
name: '黑龙江省'
},{
id: '002',
name: '四川省'
},{
id: '003',
name: '河北省'
},{
id: '004',
name: '江苏省'
}]);
});
// 根据省份id获取城市
app.get('/cities', (req, res) => {
// 获取省份id
const id = req.query.id;
// 城市信息
const cities = {
'001': [{
id: '300',
name: '哈尔滨市'
}, {
id: '301',
name: '齐齐哈尔市'
}, {
id: '302',
name: '牡丹江市'
}, {
id: '303',
name: '佳木斯市'
}],
'002': [{
id: '400',
name: '成都市'
}, {
id: '401',
name: '绵阳市'
}, {
id: '402',
name: '德阳市'
}, {
id: '403',
name: '攀枝花市'
}],
'003': [{
id: '500',
name: '石家庄市'
}, {
id: '501',
name: '唐山市'
}, {
id: '502',
name: '秦皇岛市'
}, {
id: '503',
name: '邯郸市'
}],
'004': [{
id: '600',
name: '常州市'
}, {
id: '601',
name: '徐州市'
}, {
id: '602',
name: '南京市'
}, {
id: '603',
name: '淮安市'
}]
}
// 响应
res.send(cities[id]);
});
// 根据城市id获取县城
app.get('/areas', (req, res) => {
// 获取城市id
const id = req.query.id;
// 县城信息
const areas = {
'300': [{
id: '20',
name: '道里区',
}, {
id: '21',
name: '南岗区'
}, {
id: '22',
name: '平房区',
}, {
id: '23',
name: '松北区'
}],
'301': [{
id: '30',
name: '龙沙区'
}, {
id: '31',
name: '铁锋区'
}, {
id: '32',
name: '富拉尔基区'
}]
};
// 响应
res.send(areas[id] || []);
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
三、FormData
3.1 FormData对象的作用
- 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
- 异步上传二进制文件
3.2 FormData对象的使用
- 准备HTML
<from id="form">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="button"/>
</from>
- 将 HTML 表单转化为 formData 对象
var form = document.getElementById('form');
var formData = new FormData(form);
- 提交表单对象
xhr.send(formData);
代码示例
<!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>
<!--创建普通的HTML表单-->
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" id="btn" value="提交按钮">
</form>
<script type="text/javascript">
//获取按钮
var btn = document.getElementById('btn')
//获取表单
var form = document.getElementById('form')
//为按钮添加点击事件
btn.onclick = function(){
//将普通的HTML表单转换为表单对象
var formData = new FormData(form);
//创建ajax对象
var xhr = new XMLHttpRequest();
//配置ajax对象进行配置
xhr.open('post','http://localhost:3000/formData');
//发送ajax请求
xhr.send(formData);
// 监听xhr对象下面的onload事件
xhr.onload = function(){
//对象http状态码进行判断
if(xhr.status == 200){
console.log(xhr.responseText);
}
}
}
</script>
</body>
</html>
app.js文件
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
//创建路由
app.post('/formData',(req,res) =>{
//创建formidable表单解析对象
const form = new formidable.IncomingForm();
//解析客户端传递过来的FromData对象
form.parse(req,(err,fields,files) =>{
res.send(fields);
})
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功')
3.3 FormData对象实例的方法
3.3.1 获取表单对象中属性的值(formData.get)
formData.get('key');
3.3.2 设置表单对象中属性的值(formData.set)
formData.set('key','value');
无论你的输入是什么，这里面的值都是为你设置的值
- 如果设置的表单属性存在 将会覆盖属性原有的值
- 如果设置的表单属性不存在，将会创建这个表单属性
formData.set('age',20)
3.3.3 删除表单对象中属性的值(formData.delete)
formData.delete('key');
//删除用户输入的密码
formData.delete('password')
可以看到我这个打印出来password的值就已经被删除了
3.3.4 向表单对象中追加属性值(formData.append)
formData.append('key','value')
代码示例
//创建空的表单对象
var f = new FormData();
f.append('sex','男')
console.log(f.get('sex'));
这里追加了一个男的属性就输出来了
注意set方法与append方法的区别是，在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值
3.4 FormData二进制文件上传
<input type='file' id="file"/>
var file = document.getElementById('file')
// 当用户选择文件的时候
file.onchange = function () {
// 创建空表单对象
var formData = new FormData();
// 将用户选择的二进制文件追加到表单对象中
formData.append('attrName', this.files[0]);
// 配置ajax对象，请求方式必须为post
xhr.open('post', 'www.baidu.com');
xhr.send(formData);
}
示例代码
<!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">
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<style>
.container{
padding-top: 60px;
}
.padding{
padding: 5px 0 20px 0;
}
</style>
<div class="container">
<div class="from-group">
<label for="">请选择文件</label>
<input type="file" id="file">
</div>
</div>
<script type="text/javascript">
//获取文件选择控件
var file = document.getElementById('file')
//为文件选择控件添加onchang事件
//在用户选择文件时触发
file.onchange = function(){
//创建空的Formdata表单对象
var formData = new FormData();
//将用户选择的文件追加到formData表单对象中
formData.append('attrname',this.files[0]);
//创建ajax对象
var xhr = new XMLHttpRequest();
//对ajax方法进行配置
xhr.open('post','http://localhost:3000/upload');
//发送ajax请求
xhr.send(formData);
//监听服务器端响应给客户端的数据
xhr.onload = function () {
//如果服务器端返回的http状态码为200
//说明请求是成功的
if (xhr.status == 200) {
//将服务器端返回的数据显示在控制台中
console.log(xhr.responseText)
}
}
}
</script>
</body>
</html>
app.js服务器端添加路由
//实现文件上传的路由
app.post('/upload',(req,res) =>{
//创建formidable表单解析对象
const form = new formidable.IncomingForm();
//设置客户端上传文件的存储路径
form.uploadDir = path.join(__dirname,'public','uploads');
//保留上传文件的后缀名字
form.keepExtensions = true;
//解析客户端传递过来的FromData对象
form.parse(req,(err,fields,files) =>{
res.send('ok');
})
});
3.4.1 FormData文件上传进度展示（onprogress）
// 当用户选择文件的时候
file.onchange = function () {
// 文件上传过程中持续触发onprogress事件
xhr.upload.onprogress = function (ev) {
// 当前上传文件大小/文件总大小 再将结果转换为百分数
// 将结果赋值给进度条的宽度属性
//ev.loaded 文件上传了多少
//ev.total 上传文件总大小
bar.style.width = (ev.loaded / ev.total) * 100 + '%';
}
}
可以结合上面的文件上传进行使用
创建一个进度条的div盒子
<div class="progress">
<div class="progress-bar" style="width: 0%;" id='bar'>0%</div>
</div>
以下代码都是需要在js中添加的，结合之前的上传文件的代码
<!--操作DOM，获取到这个盒子的id -->
<!--获取进度条元素-->
var bar = document.getElementById('bar');
<!--在文件上传过程中持续触发-->
xhr.upload.onprogress = function (ev) {
<!--ev.loaded 文件上传了多少 -->
<!--ev.total 上传文件的总大小-->
var result = (ev.loaded/ev.total)*100 + '%';
<!--设置进度条的宽度-->
bar.style.width = result;
<!--将百分比显示在进度条中-->
bar.innerHTML = result;
}
3.4.2 FormData文件上传图片即时预览
在我们将图片上传到服务器端以后，服务器端通常都会将图片地址做为响应数据传递到客户端，客户端可以从响应数据中获取图片地址，然后将图片再显示在页面中。
首先，我们需要配置服务器端app.js文件，在之前的文件上传功能上进行的完善
//实现文件上传的路由
app.post('/upload',(req,res) =>{
//创建formidable表单解析对象
const form = new formidable.IncomingForm();
//设置客户端上传文件的存储路径
form.uploadDir = path.join(__dirname,'public','uploads');
//保留上传文件的后缀名字
form.keepExtensions = true;
//解析客户端传递过来的FromData对象
form.parse(req,(err,fields,files) =>{
//将客户端传递过来的文件地址响应到客户端
res.send({
//使用split对文件路径进行分割
//只获取public文件后面实际的图片存储路径
path:files.attrname.path.split('public')[1]
});
})
});
html文件
创建一个显示image图片的盒子，给一个id值
<div class="padding" id='box'>
</div>
js
//获取图片显示盒子的id
var box = document.getElementById('box')
//发送ajax请求
xhr.send(formData);
//监听服务器端响应给客户端的数据
xhr.onload = function () {
//如果服务器端返回的http状态码为200
//说明请求是成功的
if (xhr.status == 200) {
//将服务器端返回的数据显示在控制台中
var result = JSON.parse(xhr.responseText)
//动态创建一个img表单
var img = document.createElement('img');
//给图片标签设置SRC属性
img.src = result.path;
//当图片加载完成，就将图片追加到页面中
img.onload = function () {
box.appendChild(img)
}
}
}
四、同源政策
4.1 Ajax请求限制
Ajax只能向自己的服务器发送请求，比如你现在有一个A网站，有一个B网站，A网站中的HTML文件只能向A网站服务器发送请求，B网站中的HTML文件只能向B网站服务器发送请求，但是A不能像B网站发送ajax请求，同理B网站也不能像A网站发送ajax请求
4.2 什么是同源
如果两个页面拥有相同协议、域名和端口，那么着两个页面就属于同一个源，其中只要有一个不相同，就是不同源
http://www.baidu.com/abc/1.html
http://www.baidu.com/amd/1.html : 同源
http://baidu.com/abc/1.html :不同源（域名不同）
http://a2.www.baidu.com/abc/1.html :不同源（域名不同）
http://www.baidu.com:81/abc/1.html ：不同源（端口不同）
https://www.baidu.com/abc/1.html ：不同源（协议不同）
4.3 同源政策的目的
同源政策是为了保护用户信息的安全，防止恶意的网站窃取数据，最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严苛，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错
4.4 使用JSONP解决同源限制问题
jsonp是json with padding 缩写，它不属于Ajax请求，但它可以模拟Ajax请求。
- 将不同源的服务器端请求地址写在script标签的src属性中
<script src = "www.baidu.com"></script>
- 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
const data = 'fn({name: "张三", age: "20"})';
res.send(data);
- 在客户端全局作用域下定义函数 fn
function fn (data) { }
- 在 fn 函数内部对服务器端返回的数据进行处理
function fn (data) { console.log(data); }
代码示例
下面这个代码是简单的一个不同源请求代码示例
首先需要有两个文件夹，里面分别对应一个服务器地址
app1.js
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 向其他服务器端请求数据的模块
const request = require('request');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
app2.js
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.get('/test', (req, res) => {
const result = 'fn({name:"小hu同学"})';
res.send(result)
});
// 监听端口
app.listen(3001);
// 控制台提示输出
console.log('服务器启动成功');
然后在app1.js服务器的那个文件夹下面创建一个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>
<script>
function fn(data) {
console.log('客户端的fn函数被调用了');
console.log(data)
}
</script>
<!-- 注意，上面函数调用的script的函数 必须写在调用另外一个服务器的标签上面 -->
<!-- 1、将非同源服务器端的请求地址写在script标签的src属性中 -->
<script src="http://localhost:3001/test"></script>
</body>
</html>
注意 演示时,需同时启动两个服务器
4.5 JSONP代码优化
- 客户端需要将函数名称传递到服务器
- 将script请求的发送变成动态请求
- 封装 jsonp 函数，方便请求发送。
4.6 使用CORS跨域资源共享
cors:全称为cross-origin resoure sharing,即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能向同源使用的限制
origin: http://localhost:3000
Access-Control-Allow-Origin: ‘http://localhost:3000’
Access-Control-Allow-Origin: ‘*’
示例代码
前提是启动了两个服务器
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>
<button id="btn"> 点击发送请求</button>
<script src="/js/ajax.js"></script>
<script>
//获取按钮
var btn = document.getElementById('btn');
//为按钮添加点击事件
btn.onclick = function () {
ajax({
type:'get',
url:'http://localhost:3001/cross',
success:function(data){
console.log(data);
}
})
}
</script>
</body>
</html>
点击后会发生报错
这句话的意思是“当前的localhost：3000网站访问localhost：3001已经被阻止了，是被cors这个政策给阻止了，原因是响应头中没有Access-Control-Allow-Origin”这个字段
现在切换到localhost：3001服务器所在的app.js文件
写上请求地址的路由
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 接收post请求参数
// const formidable = require('formidable');
// 实现session功能
var session = require('express-session');
// 创建web服务器
const app = express();
// 接收post请求参数
// 实现session功能
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: false
}));
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
//拦截所有请求
app.use((req,res,next) =>{
//1、允许哪些客户端访问我
//* 代表所有的客户端访问我
res.header('Access-Control-Allow-Origin','*')
//2、运行客户端使用哪些请求方法访问我
res.header('Access-Control-Allow-Methods','get,post')
next();
})
app.get('/cross',(req,res) =>{
res.send('ok')
})
// 监听端口
app.listen(3001);
// 控制台提示输出
console.log('服务器启动成功');
4.7 withCredentials属性
在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false
Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie
本篇博客就分享到这里了，码字不易，希望能一键三连谢谢！
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
