跨域，js同步异步

# 跨域

# 1. 同源策略

它是由Netscape提出的一个著名的安全策略。

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

规定：协议，域名，端口相同即为同源。

同源判定

拓展：

域名与ip的关系：

相对独立，靠域名解析联系（DNS服务）百度Ip
子域：

.com顶级域名（一级）.a(二级)

裸域名缺点：1. cookie，2. 不能设置CNAME
端口：（netstat -ano）

2^16 0~65535

常用端口号：
```
 	80 http服务，21 FTP，            3306mysql默认
```

# 2. 解决跨域（几种不同源解决方式相同）

CORS（跨域资源共享，服务端设置）

header('Access-Control-Allow-Origin:http://127.0.0.1');

jsonp（是一种获取资源的方式）

支持跨域访问的标签：img,link,script

原理：script js文件自动执行

客户端：

<script src="http://localhost/kuayu.php?abc=dosomething"></script>

声明回调函数（dosomething）
约定好键名(abc)

  function dosomething(res){
      console.log(res);
  }

1
2
3

服务器：

<?php
    //根据约定好的键值对，获取回调函数名
    $callback = $_REQUEST["abc"];
	//需要返回的数据
	$data = array("name" => "dongfang" , "age" => "26");
	//返回   callback(data);
	echo $callback."(".json_encode($data).")";
   
    ?>

1
2
3
4
5
6
7
8
9

# 2、同步、异步

js是单线程语言，同时只能做一件事

js中异步是声明要做一件事，但如果有同步任务没做完，就不会执行。当同步全部完成后，再依次执行

js异步一共有3种情况：

定时器
事件的绑定

AJAX（异步）

举个例子：

1定时器

console.log(0);

setTimeout(()=>{
    console.log(1);
},100)

setTimeout(()=>{
    console.log(2);
},0)

console.log(3);

1
2
3
4
5
6
7
8
9
10
11

2AJAX

    console.log(0);
    var AJAX = new XMLHttpRequest();
    AJAX.open("get","http://localhost/day2/kuayu.js",false);
    AJAX.send();
    console.log(AJAX.responseText);
    // AJAX.onreadystatechange = function(){
    //   if(AJAX.readyState == 4&&AJAX.status == 200)
    //   {
    //     console.log(AJAX.responseText);
    //   }
    // }
    console.log(1);

1
2
3
4
5
6
7
8
9
10
11
12

拓展：

event loop事件循环 task queue

js线程

浏览器线程

js是单线程的，但是浏览器不是单线程的

浏览器线程

# 3、回调地狱（callback hell）

var sayHello = function(name , callback)
{
    console.log("hello" +name);
    setTimeout(callback,1000);
}
sayHello("蒙多",function(){
    sayHello("哪吒",function(){
        sayHello("魔王",function(){
            console.log("你们都是弟弟");
        })
    })
})

1
2
3
4
5
6
7
8
9
10
11
12

编辑

#基础

← ajax promise(待扩展，微队列及all，race案例) →