一、同源
同源是指，域名，协议，端口完全相同。
二、跨域
1、不同源则跨域
1-不允许进行DOM操作
2-不能进行ajax请求
2、设置跨域请求
设置所有域
header( 'Access-Control-Allow-Origin:*' );
设置指定域
header( 'Access-Control-Allow-Origin:http://www.study.com');
三、 JSONP
1、原理剖析

其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

注意：只能以GET方式请求
2、jQuery中的JSONP
jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

dataType:'jsonp' 设置dataType值为jsonp即开启跨域访问

jsonp 可以指定服务端接收的参数的“key”值，默认为callback

jsonpCallback 可以指定相应的回调函数，默认自动生成
3、具体代码：
        客户端写法（jQuery）
        $.ajax({
                url : 请求地址,
                data: 请求时要发送的数据,
                dataType: "jsonp",
                //成功后要做的事
                success : function(){ .... }
        })
        客户端写法（原生js）
        function test( data ){
                console.log(data);//处理数据
        }
        var script = document.createElement("script");
        script.src = "xxx.php?callback=test";
        document.body.append(script);
        服务器端：
        <?php
                $callback = $_GET['callback'];
                $arr = array(....);        //数据
                $data = json_encode($arr);
                echo $callback . "(" . $data . ")";
        ?>
四、XMLHttpRequest2.0
1、设置超时
a)    设置超时
xhr.timeout= 2000;

b)    监听超时事件 （如果超时了，怎么处理）
xhr.ontimeout = function () {// code}

当请求超时，此事件就会被触发
2、FormData
a)    提供了一个新的内建对象，可用于管理表单数据
b)    首先要获取一个表单元素form
c)    然后在实例化时 new FormData(form)，将表单元素form传进去
d)    会返回一个对象，此对象可以直接做为xhr.send(formData)的参数
e)    此时我们的数据就是以二进制形式传递了
f)     注意我们这里只能以post形式传递，浏览器会自动为我们设置一个合适的请求头
FormData对象：用于一次性收集form表单数据
    var formObj = document.querySelector("form表单");
    var formData = new FormData(formObj);
    //然后直接作为xhr的send参数：
    xhr.send( formData );
    细节：
        2.1）xhr此时只能是post请求
        2.2）xhr此时无需设置请求头
        2.3）FormData还可以追加数据，形式为：
                     formData.append('key', "value");
3、文件上传
a)    我们上传文件是以二进制形式传递的

b)    我们可以通过表单<input type=”file”>获取到一个文件对象

c)    然后file.files[0]可以获取文件信息

d)    然后再利用var formData = new FormData() 实例化

e)    然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制

f)     最后将 formData 做为xhr.send(formData)的参数
4、上传进度
a)    利用XMLHttpRequest我们可以实现文件的上传

b)    并且我们可以通过xhr.upload.onprogress = function (ev) {// code}，监听上传的进度

c)    这时我们上传的进度信息会保存在事件对象ev里

d)    ev.loaded 表示已上传的大小，ev.total表示文件整体的大小

e)    var percent = ev.loaded / ev.total
xhr.upload.onprogress = function(e){
        var current = e.loaded;        //已上传 的 数据大小
        var total = e.total;        //要上传的总数据大小
        //然后就可以去根据这两个数据设定进度条的表现了
    }


提示：
        测试大文件，需要去php.in中修改以下两个配置：
        post_max_size,  upload_max_filesize
拓展：
        跨域的几种方式： 1、jsonp 缺点只支持get请求 ；2、proxyTable 反向代理(后期框架里面带有这个，可以配置) ；3、Nginx反向代理(一般后台或者运维配); 4、加入node或php中间层; 5、Nginx正向代理（一般用得很少）6、后端配置cors请求头允许； 还有很多利用标签跨域的，原理都和jsonp差不多

一、同源
同源是指，域名，协议，端口完全相同。
二、跨域
1、不同源则跨域
1-不允许进行DOM操作
2-不能进行ajax请求
2、设置跨域请求
设置所有域
header( 'Access-Control-Allow-Origin:*' );
设置指定域
header( 'Access-Control-Allow-Origin:http://www.study.com');
三、 JSONP
1、原理剖析

其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

注意：只能以GET方式请求
2、jQuery中的JSONP
jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

dataType:'jsonp' 设置dataType值为jsonp即开启跨域访问

jsonp 可以指定服务端接收的参数的“key”值，默认为callback

jsonpCallback 可以指定相应的回调函数，默认自动生成
3、具体代码：
        客户端写法（jQuery）
        $.ajax({
                url : 请求地址,
                data: 请求时要发送的数据,
                dataType: "jsonp",
                //成功后要做的事
                success : function(){ .... }
        })
        客户端写法（原生js）
        function test( data ){
                console.log(data);//处理数据
        }
        var script = document.createElement("script");
        script.src = "xxx.php?callback=test";
        document.body.append(script);
        服务器端：
        <?php
                $callback = $_GET['callback'];
                $arr = array(....);        //数据
                $data = json_encode($arr);
                echo $callback . "(" . $data . ")";
        ?>
四、XMLHttpRequest2.0
1、设置超时
a)    设置超时
xhr.timeout= 2000;

b)    监听超时事件 （如果超时了，怎么处理）
xhr.ontimeout = function () {// code}

当请求超时，此事件就会被触发
2、FormData
a)    提供了一个新的内建对象，可用于管理表单数据
b)    首先要获取一个表单元素form
c)    然后在实例化时 new FormData(form)，将表单元素form传进去
d)    会返回一个对象，此对象可以直接做为xhr.send(formData)的参数
e)    此时我们的数据就是以二进制形式传递了
f)     注意我们这里只能以post形式传递，浏览器会自动为我们设置一个合适的请求头
FormData对象：用于一次性收集form表单数据
    var formObj = document.querySelector("form表单");
    var formData = new FormData(formObj);
    //然后直接作为xhr的send参数：
    xhr.send( formData );
    细节：
        2.1）xhr此时只能是post请求
        2.2）xhr此时无需设置请求头
        2.3）FormData还可以追加数据，形式为：
                     formData.append('key', "value");
3、文件上传
a)    我们上传文件是以二进制形式传递的

b)    我们可以通过表单<input type=”file”>获取到一个文件对象

c)    然后file.files[0]可以获取文件信息

d)    然后再利用var formData = new FormData() 实例化

e)    然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制

f)     最后将 formData 做为xhr.send(formData)的参数
4、上传进度
a)    利用XMLHttpRequest我们可以实现文件的上传

b)    并且我们可以通过xhr.upload.onprogress = function (ev) {// code}，监听上传的进度

c)    这时我们上传的进度信息会保存在事件对象ev里

d)    ev.loaded 表示已上传的大小，ev.total表示文件整体的大小

e)    var percent = ev.loaded / ev.total
xhr.upload.onprogress = function(e){
        var current = e.loaded;        //已上传 的 数据大小
        var total = e.total;        //要上传的总数据大小
        //然后就可以去根据这两个数据设定进度条的表现了
    }


提示：
        测试大文件，需要去php.in中修改以下两个配置：
        post_max_size,  upload_max_filesize
拓展：
        跨域的几种方式： 1、jsonp 缺点只支持get请求 ；2、proxyTable 反向代理(后期框架里面带有这个，可以配置) ；3、Nginx反向代理(一般后台或者运维配); 4、加入node或php中间层; 5、Nginx正向代理（一般用得很少）6、后端配置cors请求头允许； 还有很多利用标签跨域的，原理都和jsonp差不多