前后端交互-Ajax编程扩展
2022-04-15 本文已影响0人
Imkata
一. 客户端模板引擎
1 - 模板引擎概述
背景：在传统网站中，客户端向服务端发送请求，服务器端都是将数据和html拼接好，再将拼接好的html字符串发送给客户端，但是现在我们使用Ajax技术向服务器端发送请求，服务器端大部分情况下都是返回json格式的数据作为响应内容，也就是说原本数据和html的拼接是在服务器端完成的，就比如前面我们学习的Node+Express。
在Node+Express的学习中我们使用的是art-template模板引擎，使用的方法是res.end或者res.render，然后将拼接好的html字符串响应给客户端，如下：
// 导入art-template
const template = require('art-template');
// 模板路径
const views = path.join(__dirname, 'views', 'index.art');
// 使用template方法将模板和数据拼接
const html = template(views, {
name: '张三',
age: 20
})
// 将拼接好的字符串响应给客户端
res.end(html);
// 或者
// 导入express框架
const express = require('express');
// 导入art-template
const template = require('art-template');
// 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件
// 参数1:模板后缀 参数2:使用的模板引擎
app.engine('art', require('express-art-template'))
// 2.告诉express框架模板存放的位置是什么 参数1:配置项的名字 参数2:路径
app.set('views', path.join(__dirname, 'views'))
// 3.告诉express框架模板的默认后缀是什么 参数1:配置项的名字 参数2:后缀
app.set('view engine', 'art');
app.get('/index', (req, res) => {
// 前面我们使用res.end(html)方法将拼接好的字符串响应给客户端，现在我们使用render方法，更强大
// render方法做了下面一些事
// 1. 拼接模板路径
// 2. 拼接模板后缀
// 3. 哪一个模板和哪一个数据进行拼接
// 4. 将拼接结果响应给了客户端
// 参数1:模板名称 参数2:向模板中传递的数据
res.render('index', {
msg: 'message'
})
});
现在这项工作是在客户端完成的，在客户端做数据拼接时，我们也需要使用模板引擎。
接下来我们就讲客户端模板引擎，无论服务器端模板引擎还是客户端模板引擎，它的作用都是：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。
官方地址： https://aui.github.io/art-template/zh-cn/index.html
2 - 客户端模板引擎使用步骤
-
下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
注意下载的是template-web.js文件，和Node中通过npm下载的不一样。
<script src="./js/template-web.js"></script>
- 准备 art-template 模板，通过模板语法告诉模板引擎，数据和html字符串要如何拼接
// id是模板的唯一标识 type="text/html"这样编辑器可以将script标签内部的代码当成html来解析
<script id="tpl" type="text/html">
//这些代码就是html模板
<div class="box"> {{ username }} </div>
</script>
- 告诉模板引擎将哪一个模板和哪个数据进行拼接
var html = template('tpl', {username: 'zhangsan', age: '20'});
- 将拼接好的html字符串添加到页面中
document.getElementById('container').innerHTML = html;
3 - 导入模板变量
// 如果这个方法被定义在全局作用域下，那么在模板中可以直接使用如下方式使用
<div>$imports.dataFormat(time)</div>
// 如果这个方法没有被定义在全局作用域下(比如定义在一个元素的onload方法里面)
function dateFormat（未格式化的原始时间）{
return '已经格式化好的当前时间'
}
// 可以先将方法导入模板，然后在模板中再按照上面方式使用
template.defaults.imports.dateFormat = dateFormat;
二. 案例
1 - 验证邮箱地址唯一性
- 获取文本框并为其添加离开焦点事件
- 离开焦点时，检测用户输入的邮箱地址是否符合规则
- 如果不符合规则，阻止程序向下执行并给出提示信息
- 向服务器端发送请求，检测邮箱地址是否被别人注册
- 根据服务器端返回值决定客户端显示何种提示信息
/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
代码示例：
app.js文件代码：
// 邮箱地址验证
app.get('/verifyEmailAdress', (req, res) => {
// 接收客户端传递过来的邮箱地址
const email = req.query.email;
// 判断邮箱地址注册过的情况
if (email == 'itheima@itcast.cn') {
// 设置http状态码并对客户端做出响应
res.status(400).send({message: '邮箱地址已经注册过了, 请更换其他邮箱地址'});
} else {
// 邮箱地址可用的情况
// 对客户端做出响应
res.send({message: '恭喜, 邮箱地址可用'});
}
});
html文件代码：
<!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">
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>
<!-- 引入我们封装的文件 -->
<script src="/js/ajax.js"></script>
<script>
// 获取页面中的元素
var emailInp = document.getElementById('email');
var info = document.getElementById('info');
// 当文本框离开焦点以后
emailInp.onblur = function () {
// 获取用户输入的邮箱地址
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);
// 更新html
info.innerHTML = result.message;
info.className = 'bg-success';
},
error: function (result) {
console.log(result)
// 更新html
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
2 - 搜索框内容自动提示 (使用了模板引擎)
- 获取搜索框并为其添加用户输入事件
- 获取用户输入的关键字
- 向服务器端发送请求并携带关键字作为请求参数
- 将响应数据显示在搜索框底部
示例代码：
app.js文件代码：
// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
// 搜索关键字
const key = req.query.key;
// 提示文字列表
const list = [
'黑马程序员',
'黑马程序员官网',
'黑马程序员顺义校区',
'黑马程序员学院报名系统',
'传智播客',
'传智博客前端与移动端开发',
'传智播客大数据',
'传智播客python',
'传智播客java',
'传智播客c++',
'传智播客怎么样'
];
// 搜索结果
let result = list.filter(item => item.includes(key));
// 将查询结果返回给客户端
res.send(result);
});
html文件代码：
<!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>
<!-- 引入封装好的Ajax函数文件 -->
<script src="/js/ajax.js"></script>
<!-- 引入art-template文件 -->
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
{{each result}} <!-- 从服务器接收的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;
}
// 开启定时器,让请求延迟发送,延迟了0.8s
// 减少没必要的每次输入拼音都发送给服务端
timer = setTimeout(function () {
// 向服务器端发送请求
// 向服务器端索取和用户输入关键字相关的内容
ajax({
type: 'get',
url: 'http://localhost:3000/searchAutoPrompt',
data: {
key: key
},
success: function (result) {
// 使用模板引擎拼接字符串
// 从服务器接收的result是个数组
var html = template('tpl', {result: result});
// 将拼接好的字符串显示在页面中
listBox.innerHTML = html;
// 显示ul容器
listBox.style.display = 'block';
}
})
}, 800)
}
</script>
</body>
</html>
3 - 省市区三级联动
- 通过接口获取省份信息
- 使用JavaScript获取到省市区下拉框元素
- 将服务器端返回的省份信息显示在下拉框中
- 为下拉框元素添加表单值改变事件（onchange）
- 当用户选择省份时，根据省份id获取城市信息
- 当用户选择城市时，根据城市id获取县城信息
示例代码：
html文件代码：
<!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">
<!-- 数据没请求的时候,数据为空,所以加一个占位的 -->
<option>请选择省份</option>
</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>
<!-- 引入封装好的Ajax函数文件 -->
<script src="/js/ajax.js"></script>
<!-- 引入art-template文件 -->
<script src="/js/template-web.js"></script>
<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
<!-- 返回的是对象数组 -->
{{each province}}
<!-- 将id绑定在option的value上 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 城市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
<!-- 循环省份标签 -->
{{each city}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 县城模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县城</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 () {
// 获取城市id
var cid = this.value;
// 根据城市id获取县城信息
ajax({
type: 'get',
url: 'http://localhost:3000/areas',
data: {
id: cid
},
success: function(data) {
var html = template('areaTpl', {area: data});
area.innerHTML = html;
}
})
}
</script>
</body>
</html>
三. FormData
1 - FormData 对象的作用
Ajax技术的缺点：
- 当我们使用Ajax技术传递参数的时候，还需要获取表单控件以及获取表单控件的值，然后将值按照指定的格式进行字符串拼接，然后再传递给服务端，特别繁琐。
- 普通的Ajax是不能向服务器端传递二进制文件的，比如图片文件的传输。
使用FormData对象就可以解决这些问题，FormData对象的作用：
- 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
- 异步上传二进制文件，比如图片文件视频文件。
- FormData对象是html5中提供的，存在兼容性问题。
2 - FormData 对象的使用
- 准备 HTML 表单
<form id="form">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="button"/>
</form>
- 将 HTML 表单转化为 formData 对象
var form = document.getElementById('form');
var formData = new FormData(form);
- 提交表单对象
xhr.send(formData);
注意：
- Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。
- 服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析。
示例代码：
app.js文件代码：
// 导入formidable第三方模块
const formidable = require('formidable');
app.post('/formData', (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
// fields 存储普通请求参数
// files 存储上传的文件信息
res.send(fields);
});
});
html文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 创建普通的html表单 -->
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<!-- 这里的按钮类型不能是submit,因为submit有默认的提交行为 -->
<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>
3 - FormData 对象的实例方法
获取表单对象中属性的值
formData.get('key');
设置表单对象中属性的值
// 如果设置的表单属性存在,将会覆盖属性原有的值,如果设置的表单属性不存在,将会创建这个表单属性
formData.set('key', 'value');
删除表单对象中属性的值
// 删除的时候key和value一块都给删了
formData.delete('key');
向表单对象中追加属性值
formData.append('key', 'value');
// 当我们创建空的表单对象，就可以往里面append属性
var f = new FormData();
f.append('sex', '男');
console.log(f.get('sex'));
注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有属性的值，append会保留两个属性及其值，如下：
username: itcast
username: itheima
注意：如果不经过特殊设置的话，服务器端默认会接收最后一个username，所以服务器端最终接收的是username: itheima。
4 - FormData 二进制文件上传
1. 文件上传
<input type="file" id="file"/>
var file = document.getElementById('file')
// 当用户选择文件的时候
file.onchange = function () {
// 创建空表单对象
var formData = new FormData();
// 将用户选择的二进制文件追加到表单对象中 files是一个集合
formData.append('attrName', this.files[0]);
// 配置ajax对象，请求方式必须为post
xhr.open('post', 'www.example.com');
xhr.send(formData);
}
2. 文件上传进度展示
// 当用户选择文件的时候
file.onchange = function () {
// 文件上传过程中持续触发onprogress事件
xhr.upload.onprogress = function (ev) {
// 当前上传文件大小/文件总大小 再将结果转换为百分数
// 将结果赋值给进度条的宽度属性
bar.style.width = (ev.loaded / ev.total) * 100 + '%';
}
}
3. 文件上传图片即时预览
在我们将图片上传到服务器端以后，服务器端通常都会将图片地址做为响应数据传递到客户端，客户端可以从响应数据中获取图片地址，然后将图片再显示在页面中。
xhr.onload = function () {
var result = JSON.parse(xhr.responseText);
var img = document.createElement('img');
img.src = result.src;
img.onload = function () {
document.body.appendChild(this);
}
}
4. 示例代码：
app.js文件代码：
// 实现文件上传的路由
app.post('/upload', (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 设置客户端上传文件的存储路径
form.uploadDir = path.join(__dirname, 'public', 'uploads');
// 保留上传文件的后缀名字
form.keepExtensions = true;
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
// fields 存储普通请求参数
// files 存储上传的文件信息
// 将客户端传递过来的文件地址响应到客户端
res.send({
// 使用split分割服务端存储文件的路径，结果是个数组，将数组index为1的元素返回给客户端
// 例如：{ path: /uploads/xxxxxxxxx.png }
path: files.attrName.path.split('public')[1]
});
});
});
html文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 60px;
}
.padding {
padding: 5px 0 20px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label>请选择文件</label>
<input type="file" id="file">
<div class="padding" id="box">
<!--<img src="" class="img-rounded img-responsive">-->
</div>
<div class="progress">
<div class="progress-bar" style="width: 0%;" id="bar">0%</div>
</div>
</div>
</div>
<script type="text/javascript">
// 获取文件选择控件
var file = document.getElementById('file');
// 获取进度条元素
var bar = document.getElementById('bar');
// 获取图片容器
var box = document.getElementById('box');
// 为文件选择控件添加onchanges事件
// 在用户选择文件时触发
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');
// 在文件上传的过程中持续触发
xhr.upload.onprogress = function (ev) {
// ev.loaded 文件已经上传了多少
// ev.total 上传文件的总大小
var result = (ev.loaded / ev.total) * 100 + '%';
// 设置进度条的宽度
bar.style.width = result;
// 将百分比显示在进度条中
bar.innerHTML = result;
}
// 发送ajax请求
xhr.send(formData);
// 监听服务器端响应给客户端的数据
xhr.onload = function () {
// 如果服务器端返回的http状态码为200
// 说明请求是成功的
if (xhr.status == 200) {
// 将服务器端返回的数据转成json对象 { path: /uploads/xxxxxxxxx.png }
var result = JSON.parse(xhr.responseText);
// 动态创建img标签 因为不想让用户看到图片加载过程
var img = document.createElement('img');
// 给图片标签设置src属性
img.src = result.path;
// 当图片加载完成以后
img.onload = function () {
// 将图片显示在页面中
box.appendChild(img);
}
}
}
}
</script>
</body>
</html>
代码地址：https://github.com/iamkata/Ajax-extension
四. 同源政策
1 - Ajax请求限制
Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。
2 - 什么是同源
如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。比如对于：http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）
3 - 同源政策的目的
同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。其实这个请求是可以发送出去的，只不过浏览器拒绝接受服务器返回的结果，所以最终请求还是失败的。
4 - 使用 JSONP 解决同源限制问题
jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。
原理：script标签的src属性可以写任何地址，不受同源限制，比如以前我们的jquery地址，就是典型的向非同源服务器端请求的案例，JSONP解决方案就是利用script标签的这种特性，如下：
// 以前我们的jquery地址，就是典型的向非同源服务器端请求的案例
<script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
- 将不同源的服务器端请求地址写在 script 标签的 src 属性中
<script src="www.example.com"></script>
- 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
const data = 'fn({name: "张三", age: "20"})';
res.send(data);
- 在客户端全局作用域下定义函数 fn
function fn (data) { }
- 在 fn 函数内部对服务器端返回的数据进行处理
function fn (data) { console.log(data); }
具体流程就是：
客户端：① 在全局作用域下（script 标签中）定义函数 fn，并且对服务器端返回的数据进行处理。② 将不同源的服务器端请求地址写在 script 标签的 src 属性中，当客户端执行到这个 script 标签会向 src 地址请求数据。
服务端：服务器端返回函数的调用，并且将参数传递过去。由于客户端接收到的是函数的调用，并且是写在客户端 script 标签中，所以服务器端返回的函数调用会被当做js代码执行，所以会在客户端执行函数调用。
jsonp是什么意思：jsonp 是 json with padding 的缩写，padding是填充的意思，意思就是在服务器端将json数据填充到函数调用中的意思。
示例代码：
客户端代码：
<body>
<!-- 函数的定义写在前面,并且写在script标签里面 -->
<script>
function fn (data) {
console.log('客户端的fn函数被调用了')
console.log(data);
}
</script>
<!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 -->
<script src="http://localhost:3001/test"></script>
</body>
服务端代码：
app.get('/test', (req, res) => {
// 服务器端返回函数的调用,并且将参数传递过去
const result = 'fn({name: "张三"})';
res.send(result);
});
5 - JSONP 代码优化
1. 客户端需要将函数名称传递到服务器端
客户端代码：
<body>
<script>
function fn2 (data) {
console.log('客户端的fn函数被调用了')
console.log(data);
}
</script>
<!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 -->
<script src="http://localhost:3001/better?callback=fn2"></script>
</body>
服务端代码：
app.get('/better', (req, res) => {
// 接收客户端传递过来的函数的名称
const fnName = req.query.callback;
// 将函数名称对应的函数调用代码返回给客户端
const data = JSON.stringify({name: "张三"});
const result = fnName + '('+ data +')';
setTimeout(() => {
res.send(result);
}, 1000)
});
2. 将 script 请求的发送变成动态请求
点击按钮就发送请求，客户端代码如下：
<body>
<button id="btn">点我发送请求</button>
<script>
function fn2 (data) {
console.log('客户端的fn函数被调用了')
console.log(data);
}
</script>
<script type="text/javascript">
// 获取按钮
var btn = document.getElementById('btn');
// 为按钮添加点击事件
btn.onclick = function () {
// 创建script标签
var script = document.createElement('script');
// 设置src属性
script.src = 'http://localhost:3001/better?callback=fn2';
// 将script标签追加到页面中
document.body.appendChild(script);
// 为script标签添加onload事件
script.onload = function () {
// 当script标签中的内容加载完成之后,将body中的script标签删除掉
document.body.removeChild(script);
}
}
</script>
</body>
3. 客户端封装 jsonp 函数，方便请求发送
客户端代码：
<body>
// 为按钮添加点击事件
btn1.onclick = function () {
// jsonp方法调用,参数是个对象
jsonp({
// 请求地址
url: 'http://localhost:3001/better',
data: {
name: 'lisi',
age: 30
},
success: function (data) {
console.log(123)
console.log(data)
}
})
}
// 封装jsonp方法,参数是个对象
function jsonp (options) {
// 动态创建script标签
var script = document.createElement('script');
// 拼接字符串的变量
var params = '';
for (var attr in options.data) {
params += '&' + attr + '=' + options.data[attr];
}
// 函数名字变成随机名字 myJsonp0124741
var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
// 它已经不是一个全局函数了,我们要想办法将它变成全局函数
// 就是挂载到window下,这样服务器端在返回函数调用的时候就可以找到这个函数了
// .后面不能跟一个变量,所以跟一个[]
window[fnName] = options.success;
// 为script标签添加src属性
script.src = options.url + '?callback=' + fnName + params;
// 将script标签追加到页面中
document.body.appendChild(script);
// 为script标签添加onload事件
script.onload = function () {
document.body.removeChild(script);
}
}
</body>
4. 服务器端代码优化之 res.jsonp 方法
其实Express框架的res对象下面有一个封装好的jsonp方法，我们只需要把参数传递过去就好了，jsonp方法内部做的就是下面代码注释的内容。
app.get('/better', (req, res) => {
// 接收客户端传递过来的函数的名称
//const fnName = req.query.callback;
// 将函数名称对应的函数调用代码返回给客户端
//const data = JSON.stringify({name: "张三"});
//const result = fnName + '('+ data +')';
// setTimeout(() => {
// res.send(result);
// }, 1000)
res.jsonp({name: 'lisi', age: 20});
});
6 - 案例：使用jsonp获取腾讯天气信息
客户端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jsonp获取腾讯天气信息</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 60px;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-striped table-hover" align="center" id="box"></table>
</div>
<script src="/js/jsonp.js"></script>
<script src="/js/template-web.js"></script>
<!-- art-template模板 -->
<script type="text/html" id="tpl">
<tr>
<th>时间</th>
<th>温度</th>
<th>天气</th>
<th>风向</th>
<th>风力</th>
</tr>
{{each info}}
<tr>
<td>{{dateFormat($value.update_time)}}</td>
<td>{{$value.degree}}</td>
<td>{{$value.weather}}</td>
<td>{{$value.wind_direction}}</td>
<td>{{$value.wind_power}}</td>
</tr>
{{/each}}
</script>
<script>
// 获取table标签
var box = document.getElementById('box');
// 日期处理函数
function dateFormat(date) {
var year = date.substr(0, 4);
var month = date.substr(4, 2);
var day = date.substr(6, 2);
var hour = date.substr(8, 2);
var minute = date.substr(10, 2);
var seconds = date.substr(12, 2);
return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
}
// 向模板中开放外部变量
template.defaults.imports.dateFormat = dateFormat;
// 向服务器端获取天气信息
jsonp({
url: 'https://wis.qq.com/weather/common',
data: {
source: 'pc',
weather_type: 'forecast_1h',
// weather_type: 'forecast_1h|forecast_24h',
province: '黑龙江省',
city: '哈尔滨市'
},
success: function (data) {
// 将模板和数据结合
var html = template('tpl', {info: data.data.forecast_1h});
// 更新html
box.innerHTML = html;
}
})
</script>
</body>
</html>
代码执行步骤：
- cd到s1目录，执行
npm install下载第三方模块 - 执行
node app.js运行服务器 - 在浏览器输入
http://localhost:3000/06.06.使用jsonp获取腾讯天气信息.html运行代码
结果如下：
7 - CORS 跨域资源共享
CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。
当客户端向服务器端发送请求时，如果浏览器检测到这个请求是跨域的，就会自动在请求头中加入origin字段，origin字段包含当前发送请求的协议、域名、端口号信息，服务器端会根据这个字段的值来决定是否同意该请求，但无论服务器端是否同意该请求，服务器端都会给客户端一个正常的http响应，浏览器如何才能知道服务器端是否同意这次请求呢？如果服务器同意该请求，会在响应头加入Access-Control-Allow-Origin字段，否则不会加入该字段，浏览器会根据响应头中是否有该字段来判断是否同意该请求。
这种技术只需要服务端做一些相应的配置，客户端代码不变即可。
origin: http://localhost:3000
Access-Control-Allow-Origin: 'http://localhost:3000' // 允许哪些客户端访问我，* 代表允许所有客户端访问这个服务端
Node 服务器端设置响应头示例代码：
// 拦截所有请求
app.use((req, res, next) => {
// 允许哪些客户端访问我
res.header('Access-Control-Allow-Origin', '*'); // * 代表允许所有的客户端访问我
res.header('Access-Control-Allow-Methods', 'GET, POST'); // 允许客户端使用哪些请求方法访问我
next();
})
8 - 访问非同源数据，服务器端解决方案
同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。服务端开发人员可以访问非同源网站中的数据，当客户端想获取非同源网站中的数据时，可以让自己的服务端先获取非同源网站中的数据，然后自己服务端再将数据响应给自己的客户端，这样就绕过了浏览器的同源政策限制。
那么，A服务端如何向B服务端请求数据呢？我们使用node下的request第三方模块即可。
A客户端向A服务端发送请求：
btn.onclick = function () {
ajax({
type: 'get',
url: 'http://localhost:3000/server',
success: function (data) {
console.log(data);
}
})
A服务端接收到请求，再向B服务端发送请求：
// 向其他服务器端请求数据的模块
const request = require('request');
app.get('/server', (req, res) => {
request('http://localhost:3001/cross', (err, response, body) => {
res.send(body);
})
});
B服务端返回响应信息：
app.get('/cross', (req, res) => {
res.send('ok')
});
9 - cookie复习
http协议的请求是无状态的，服务端只负责对客户端的请求做出响应，响应完之后这次请求就结束了，无论客户端来多少次，他们都是陌生人。
在早期不需要登录的网站中，这样的请求是没什么毛病的，但是现在的网站大多都需要登录，所以需要用cookie。当客户端第一次访问服务端的时候，服务端会给客户端一个cookie，这个cookie就相当于一个身份证，当客户端再一次访问服务端的时候，这个cookie会随着请求被自动发送到服务端，服务端拿到身份证就知道客户端是谁了。
10 - withCredentials属性
当不涉及到跨域请求的时候，cookie的传递是没问题的，但是当涉及到跨域请求的时候，cookie就不会随着请求被发送到服务端了，这也是出于安全性的考虑，防止用户信息被窃取。那么如果我们想要跨域并且携带cookie，怎么办呢？
在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
在客户端设置如下：
withCredentials：true // 指定在涉及到跨域请求时，是否携带cookie信息，默认值为false，需要设置为true
在服务端设置如下：
Access-Control-Allow-Credentials：true // 允许客户端发送请求时携带cookie
