浅谈ajax和同源策略
一.B/S和C/S
什么是B/S和C/S
B/s : browser / server
C/s: client /server
二.HTTP协议
请求和响应
请求协议:
浏览器向服务器发送请求的时候使用的协议
请求行
访问的路径,主机,协议版本
请求头
浏览器的一些信息
请求体
get请求没有请求体
post请求才有请求体
响应协议:
响应码:服务器给浏览器响应后的一种代码。 200 ok 404:资源没有找到 500:服务器内部问题
- GET请求和POST请求
GET请求和POST请求的区别
get请求:
没有请求体。 get请求如果想向服务器传递数据,必须把要传递的数据放入到 url 中。
请求数据是键值对的形式,建和值用=连接
post请求:
有请求体。而且我们的数据都是通过请求体提交的数据
三.AJAX简介
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面,在加载新的网页的过程中,用户会有一个等待。降低了用户体验。
局部更新!
AJAX的出现就可以让网页进行部分更新。
异步和同步:
Ajax的全称是Asynchronous JavaScript+XML ,Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。Ajax结合了异步技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Js技术的Web应用,并打破了使用页面重载的惯例。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加载,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax刚出生的时候,用的比较多的数据格式是XML,后来JSON数据格式更多的去替换了XML格式的数据。
四.AJAX工作原理
五. 使用AJAX
JAX的核心对象是XMLHttpRequest, 这个对象在目前的所有浏览器都支持,只是IE6 和 IE5的写法不一样而已。使用AJAX一般按照下面 4个步骤
1). 步骤1:创建XMLHttpRequest对象
这个对象从IE5开始支持,后来各大浏览器都进行了跟进。IE7+和chrome、firefox写法一样,IE6以前的浏览器一种写法。实际开发中,一般使用如下的兼容写法。
```javascript
function createXHR() {
if(window.XMLHttpRequest) {
//标准浏览器创建XMLHttpRequest对象的方式
return new
XMLHttpRequest();
}else{
//IE5和IE6的创建方式
return new
ActiveXObject("Microsoft.XMLHTTP");
}
}
```
2)步骤2:调用open方法
javascript
/*调用open方法
* 参数1:请求方法,一般是get或post
* 参数2:请求是url
* 参数3:是否为异步。true表示异步,默认是true异步。
*/
xhr.open("GET", "msg.json",
true);
```
注意:
- URL相对于执行代码的当前页面(当然也可以使用绝对路径);
- 调用 open() 方法并不会真正发送请求,而只是启动一个请求以备发送。
- 如果使用绝对路径,则一定要和当前页面的协议、主机和端口完全一致,否则会出现错误。
3)步骤3:监听请求状态(onreadystatechange)
xhr.onreadystatechange监听请求状态,根据状态来确定数据获得之后要做的事情。
xhr.readyState的值保存了xhr的状态。一共有5种状态,每个状态用1个整数来表示
- 0 未初始化。对象new出来了,但是还没有调用open方法
- 1 启动。 已经调用open,但是还没有调用send方法
- 2 发送。 已经send方法,但是还没有接收到相应
- 3 接收。 已经开始接收数据,但是还没有完全接收。
- 4 完成。已经完全接收数据。
作为开发者,我们一般只关注 **第4种** 状态。
`javascript
//监听状态
xhr.onreadystatechange = function () {
// 如readyState的值为4,表示已经接收完数据,可以开始对数据处理。
if(xhr.readyState == 4){
//
xhr.status 保存了服务的响应码, 200表示正常响应
if(xhr.status
== 200){
alert(xhr.responseText);
}
}
}
注意:步骤2和步骤3可以调换顺序
javascript
//send方法才是真的的发起网络请求。
参数:请求的时候向服务区传递的参数。 如果是get请求,直接传入null即可。
xhr.send(null);
六.使用AJAX是携带参数
不同的请求方式,携带参数的方式不一样。
1)GET请求
get请求携带的参数直接追加到url后面即可。`?`后面跟的就是参数,多个参数之间用`&`连接。注意,参数中的中文必须要经过`url`编码。
```javascript
var url =
'http://wthrcdn.etouch.cn/weather_mini?city='+encodeURI('深圳')+'&pwd='+pwdValue;
```
2)POST请求
post请求的的参数是在send方法中携带,参数的格式必须是:xxx=XXX&yyy=YYY格式。并且需要添加头部信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
```javascript
//post请求必须添加这个头部
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send('user='+nameVal + '&pwd=' + pwdVal);
```
七.同源策略
1. 什么是同源策略
同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略。最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
- 协议相同
- 域名相同
- 端口号相同
2. 同源策略的目的
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
3. 同源策略的限制范围
随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求接收不到数据。
八.AJAX中规避同源策略
在AJAX中,同源策略要求,AJAX只能发给同源的网址,否则就报错。
1. 使用JSONP规避同源(服务器端和前端要配合)
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
它的基本思想是,网页通过动态添加一个 script 元素,向服务器请求 JSON 数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
```javascript
//函数功能:添加script标签。 参数表示AJAX要请求的地址(一个外部的网页)。
function addScriptTag(src) {
var script =
document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
//请求参数中添加一个callback参数,用来指定回调函数的名字,这对于JSONP是必须的。
window.onload = function () {
addScriptTag('http://localhost:8020?callback=foo');
}
//回调函数。 一旦响应成功,会执行该方法
function foo(data) {
alert(data);
console.log(data);
};
```
*使用JSONP的局限性:只能使用get请求,不能发送post请求。如果想要发送post请求,只能其他的途径*
2. 服务器断打破同源( 必须服务器支持 )