模板引擎
是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
为什么要使用模板引擎
我们通过ajax获取到数据后,需要把数据渲染到页面,在学习模板引擎前,我们的做法是大量的拼接字符串,对于结构简单的页面,这么做还行,但是如果页面结构很复杂,使用拼串的话代码可阅读性非常的差,而且非常容易出错,后期代码维护也是相当的麻烦。
作用:代替前面渲染数据是拼接字符串操作
实际工作渲染数据使用的模板引擎
常见的模板引擎
BaiduTemplate:http://tangram.baidu.com/BaiduTemplate/
velocity.js:https://github.com/shepherdwind/velocity.js/
ArtTemplate:https://github.com/aui/artTemplate
artTemplate是使用最广泛,效率最高的模板引擎,需要大家掌握。
同源与跨域
同源
不同源 则跨域
同源策略的基本概念
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
同源策略:最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。现在浏览器的所谓"同源"指的是"三个相同":
javascript
协议相同
域名相同
端口相同
举例来说,http://www.example.com/dir/page.html
这个网址,协议是http://
,域名是www.example.com
,端口是80
(默认端口可以省略)。它的同源情况如下。
javascript
//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:不同源(端口不同)
同源策略的目的
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
同源策略的限制范围
随着互联网的发展,“同源策略”越来越严格,目前,如果非同源,以下三种行为都将收到限制。
javascript
//1. Cookie、LocalStorage 无法读取。
//2. DOM 无法获得。
//3. AJAX 请求不能发送。
虽然这些限制是很有必要的,但是也给我们日常开发带来不好的影响。比如实际开发过程中,往往都会把服务器端架设到一台甚至是一个集群的服务器中,把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况,如果我们知道两个网站都是安全的话,我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。
跨域
【演示跨域问题.html】
jsonp
JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。原理:服务端返回一个预先定义好的javascript函数的调用,并且将服务器的数据以该函数参数的形式传递过来,这个方法需要前后端配合。
script
标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。类似的还有img
和link
标签
html
不受同源策略的标签
img
link
script
jsonp演化过程
jsonp原理大家知道即可,不用太过于去纠结这个原理,因此jquery已经帮我们封装好了,我们使用起来非常的方便。
jquery对于jsonp的封装
javascript
//使用起来相当的简单,跟普通的get请求没有任何的区别,只需要把dataType固定成jsonp即可。
$.ajax({
type:“get”,
url:“http://www.api.com/testjs.php”,
dataType:“jsonp”,
data:{
uname:“zs”,
upass:“123456”
},
success:function (info) {
console.log(info);
}
});
XMLHttpRequest 2.0
XMLHttpRequest是一个javascript内置对象,使得Javascript可以进行异步的HTTP通信。2008年2月,就提出了XMLHttpRequest Level 2 草案。
老版本的XMLHttpRequest的缺点:
javascript
//1. 仅支持传输文本数据,无法传说二进制文件,比如图片视频等。
//2. 传输数据时,没有进度信息,只能提示完成与否。
//3. 受到了"同源策略"的限制
新版本的功能:
javascript
//1. 可以设置timeout 超时时间
//2. 可以使用formData对象管理表单数据
//3. 可以获取数据传输的进度信息
注意:我们现在使用new XMLHttpRequest创建的对象就是2.0对象了,我们之前学的是1.0的语法,现在学习一些2.0的新特性即可。
timeout设置超时
javascript
xhr.timeout = 3000;//设置超时时间
xhr.ontimeout = function(){
alert(“请求超时”);
}
formData管理表单数据
formData对象类似于jquery的serialize方法,用于管理表单数据
javascript
//使用特点:
//1. 实例化一个formData对象, new formData(form); form就是表单元素
//4. formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。
//5. formData有一个append方法,可以添加参数。formData.append(“id”, “1111”);
//6. 这种方式只能以post形式传递,不需要设置请求头,浏览器会自动为我们设置一个合适的请求头。
代码示例:
javascript
//1. 使用formData必须发送post请求
xhr.open(“post”, “02-formData.php”);
//2. 获取表单元素
var form = document.querySelector(“myForm”);
//3. 创建form对象,可以直接作为send的参数。
var formData = new FormData(form);
//4. formData可以使用append方法添加参数
formData.append(“id”, “1111”);
//5. 发送,不需要指定请求头,浏览器会自动选择合适的请求头
xhr.send(formData);
文件上传
以前,文件上传需要借助表单进行上传,但是表单上传是同步的,也就是说文件上传时,页面需要提交和刷新,用户体验不友好,xhr2.0中的formData对象支持文件的异步上传。
javascript
var formData = new FormData();
//获取上传的文件,传递到后端
var file = document.getElementById(“file”).files[0];
formData.append(“file”, file);
xhr.send(formData);
显示文件进度信息
xhr2.0还支持获取上传文件的进度信息,因此我们可以根据进度信息可以实时的显示文件的上传进度。
javascript
- 需要注册 xhr.upload.onprogress = function(e){} 事件,用于监听文件上传的进度.注意:需要在send之前注册。
- 上传的进度信息会存储事件对象e中
- e.loaded表示已上传的大小 e.total表示整个文件的大小
代码参考:
javascript
xhr.upload.onprogress = function (e) {
inner.style.width = (e.loaded/e.total100).toFixed(2)+"%";
span.innerHTML = (e.loaded/e.total100).toFixed(2)+"%";
}
xhr.send(formData);
如果上传文件超过8M,php会报错,需要进行设置,允许php上传大文件。
跨域资源共享(CORS)
cors的使用
新版本的XMLHttpRequest对象,可以向不同域名的服务器发出HTTP请求。这叫做"跨域资源共享"(Cross-origin resource sharing,简称CORS)。
跨域资源共享(CORS)的前提
- 浏览器支持这个功能
- 服务器必须允许这种跨域。
服务器允许跨域的代码:
php
//允许所有的域名访问这个接口
header(“Access-Control-Allow-Origin:”);
//允许www.study.com这个域名访问这个接口
header(“Access-Control-Allow-Origin:http://www.study.com”);
CORS的具体流程(了解)
- 浏览器会根据同源策略 查看是否是跨域请求,如果同源,直接发送ajax请求。
- 如果非同源,说明是跨域请求,浏览器会自动发送一条请求(预检请求 ),并不会携带数据,服务器接受到请求之后,会返回请求头信息,浏览器查看返回的响应头信息中是否设置了
header('Access-Control-Allow-Origin:请求源域名或者');
- 如果没有设置,说明服务器不允许使用cors跨域,那么浏览器不会发送真正的ajax请求。
- 如果返回的响应头中设置了
header('Access-Control-Allow-Origin:请求源域名或者');
,浏览器会跟请求头中的Origin: http://www.study.com
进行对比,如果满足要求,则发送真正的ajax请求,否则不发送。 - 结论:跨域行为是浏览器行为,是浏览器阻止了ajax行为。服务器与服务器之间是不存在跨域的问题的