浅谈ajax和同源策略

一．B/S和C/S

 什么是B/S和C/S

B/s : browser / server

C/s: client /server

二．HTTP协议

请求和响应

请求协议：

​    浏览器向服务器发送请求的时候使用的协议

请求行

​    访问的路径，主机，协议版本

请求头

​    浏览器的一些信息

请求体

​    get请求没有请求体

     post请求才有请求体

响应协议：

     响应码：服务器给浏览器响应后的一种代码。     200 ok     404：资源没有找到     500：服务器内部问题

1. 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网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

1.  协议相同
2. 域名相同
3. 端口号相同

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. 服务器断打破同源( 必须服务器支持 )

 

 

 

 

转载于:https://www.cnblogs.com/Vah1029/p/9051088.html