关于jsonp、ajax和跨域问题的总结梳理,以及get请求和post请求的ajax的封装代码!!!

今天大概梳理总结了一下之前学习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);
        }

你可能感兴趣的:(js,ajax,ajax,javascript,前端)