今天大概梳理总结了一下之前学习js中的 jsonp、ajax以及跨域的部分问题。

1、什么是跨域？

在前后端分离模式下，前后端域名不一致，这种时候就会发生跨域访问的问题。跨域问题来源于js同源策略，即只有 协议+主机名+端口号(如存在)相同才允许相互访问。

2、什么是同源策略？

同源策略 是由NetScape提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

3、什么是jsonp？

上面说了跨域，因为js不可以直接跨域请求数据，但是可以直接跨域请求脚本，所以我们可以想出这样一个方案：

把要请求的数据封装成一个js语句，做一个方法的调用。

跨域请求js脚本可以得到此脚本，得到js脚本之后会立即执行。

把数据做为参数传递到方法中。就可以获得数据，从而解决跨域问题。

这样的一个方案就可以称之为jsonp。

4、jsonp工作原理？

因为浏览器允许通过script标签的src跨域请求，因此我们就可以在请求结果中添加一个回调函数方法，然后在页面中定义方法，这样就可以顺利获取到跨域请求的数据。这就是其工作原理。

5、什么是ajax？

ajax：即Asynchronous JavaScript and XML，ajax主要是用于实现页面和web服务器之间数据的异步传输的。

一个完整的ajax包括五个步骤：

（1）创建异步对象

（2）设置请求行（open）

（3）注册事件

（4）发送请求（send）

（5）获取相应。更新页面

需要注意的是：jsonp和ajsx虽然在调用方式上相似，并且都是请求一个url进而把服务器返回的数据进行处理，但两者本质上并不相同。ajsx主要是通过XmlHttpRequest获取页面内容，而jsonp则是通过动态添加script调用js脚本。

 以下附上自己写的用ajax封装get和post请求的方法代码，相关注释都已标识。

 //-------------封装
        function ajax(option) {
            //创建异步对象
            var xhr = new XMLHttpRequest();
            /**分别判断是get还是post**/
            //如果是get并且有数据
            if (option.type == 'get' && option.data) {
                option.url = option.url + '?' + option.data;
            }
            //设置请求行
            xhr.open(option.type, option.url);
            //设置请求头(post有数据发送才需要设置请求头)
            //判断是否有数据发送
            if (option.type == 'post' && option.data) {
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            }
            //注册回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //接收返回的数据类型
                    var type = xhr.getResponseHeader('Content-Type');
                    /**设置接收返回的数据类型的三种处理方式**/
                    //json格式
                    if (type.indexOf('json') != -1) {
                        option.callback(JSON.parse(xhr.responseText));
                    }
                    //xml格式
                    else if (type.indexOf('xml') != -1) {
                        option.callback(xhr.responseXML);
                    }
                    //普通格式
                    else {
                        option.callback(xhr.responseText);
                    }
                }
            }
            //发送请求主体
            //判断不同的请求类型
            xhr.send(option.type == 'post' ? option.data : null);
        }