3.1 Dom事件 Ajax Bom - 黑山( Ajax 和 跨域 )

269 阅读2分钟

ajax实现

  • 原生js实现
var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();  
    // 第一个参数请求方式
    // 第二个:请求地址
    // 第三个:是否异步          
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    // 第一个参数请求方式
    // 第二个:请求地址
    // 第三个:是否异步 
    xhr.open("POST", url, true);
    // 添加http头,发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

  • Jq AJAX实现
$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

看到AJAX请求就自然而然的联想到了跨域的问题我也不知道为什么,可能就是用的比较多吧?

  • 为什么会有跨域? 答:浏览器的同源策略,协议/主机/端口 有一个不一样
  • 同源的定义? 答:如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话,则这两个 URL 是同源。
  • 浏览器 localStorage 和 IndexedDB,Cookies 可以跨域吗? 答: localStorage 和 IndexedDB,是以源进行分割。每个源都拥有自己单独的存储空间,一个源中的 JavaScript 脚本不能对属于其它源的数据进行读写操作。 简单点说: http:// test.com:8080 和 http:// test.com:8081 缓存是可以互相跨域的 Cookies 不能跨域哟! 栗子: | URL |是否同源 | 原因 | --- | --- | --- | | store.company.com/dir2/other.… | 同源| 只有路径不同 |store.company.com/dir/inner/a… | 同源| 只有路径不同 |store.company.com/secure.html | 失败 | 协议不同 |store.company.com:81/dir/etc.htm… | 失败| 端口不同 ( http:// 默认端口是80) |news.company.com/dir/other.h… | 失败 | 主机不同

跨域解决方法

  • 设置document.domain解决无法读取非同源网页的 Cookie问题因为浏览器是通过document.domain属性来检查两个页面是否同源,因此只要通过设置相同的document.domain,两个页面就可以共享Cookie(此方案仅限主域相同,子域不同的跨域应用场景。) 目标地址: www.a.com上的a.html
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

接受源:script.a.com上的b.html

document.domain = 'a.com';

缺点: 安全性,当一个站点(b.a.com)被攻击后,另一个站点(c.a.com)会引起安全漏洞。 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain。

  1. 跨文档通信 API:window.postMessage() 调用postMessage方法实现父窗口test1.com向子窗口http://test2.com发… 它可用于解决以下方面的问题:
  • 页面和其打开的新窗口的数据传递
  • 多窗口之间消息传递
  • 页面与嵌套的iframe消息传递
  • 上面三个场景的跨域数据传递 demo-父窗口:
<!--我是父窗口-->  
<div class="parent" >
      <iframe src="子窗口链接" id="iframe"></iframe>
</div>
<script>
//监听子窗口信息
 window.addEventListener('message',function(event){
   ...
   })
//父窗口给子窗口发消息,
document.getElementByID('iframe').
        contentWindow.postMessage(msg,'子窗口源');
   
</script>

子窗口

<!--我是子窗口-->  
<div class="child"></div>
<script>
//子窗口给父窗口发消息
try {//放到trycatch里面,解决有些手机卡住报错问题
  window.top.postMessage(msg,'父窗口源');
      //嵌套一层使用window.top(parent),多层window.frameElement
      //使用top而不是window,top指向iframe最顶层窗口
  } catch (error) {

}

//监听父窗口信息
 window.addEventListener('message',function(event){
   ...
   })
</script>
  • JSONP

JSONP 是服务器与客户端跨源通信的常用方法。 原理:网页通过添加一个

①原生实现:

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,
//用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

② jQuery ajax:

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

③ Vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})
  • 优点:就是简单使用,兼容性好(兼容低版本IE)
  • 缺点:只支持get请求,不支持post请求。

- CORS

重点来了:CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。

普通跨域请求:只需服务器端设置Access-Control-Allow-Origin 带cookie跨域请求:前后端都需要进行设置 【前端设置】根据xhr.withCredentials字段判断是否带有cookie

①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

② jQuery ajax

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie
});

③vue-resource

Vue.http.options.credentials = true

④ axios

axios.defaults.withCredentials = true
【服务端设置】

服务器端对于CORS的支持,主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

① Java后台

/*
 * 导入包:import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义:HttpServletResponse response
 */
 
// 允许跨域访问的域名:若有端口需写全(协议+域名+端口),若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
 
// 允许前端带认证cookie:启用此项后,上面的域名不能为'*',必须指定具体的域名,
//否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 
 
// 提示OPTIONS预检时,后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", 
                            "Content-Type,X-Requested-With");

② Nodejs后台

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var postData = '';
 
    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });
 
    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);
 
        // 跨域后台设置
        res.writeHead(200, {
                // 后端允许发送Cookie
            'Access-Control-Allow-Credentials': 'true', 
            // 允许访问的域(协议+域名+端口)
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    
            /* 
             * 此处设置的cookie还是domain2的而非domain1,
             *    因为后端也不能跨域写cookie(nginx反向代理可以实现),
             * 但只要domain2中写入一次cookie认证,后面的跨域接口都能从
             *    domain2中获取cookie,从而实现所有的接口都能跨域访问
             */
              // HttpOnly的作用是让js无法读取cookie
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'
        });
 
        res.write(JSON.stringify(postData));
        res.end();
    });
});
 
server.listen('8080');
console.log('Server is running at port 8080...');