【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题（Ajax跨域）
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82701029 问题引出：要发送Ajax请求，就必须使用HTTP请求？什么是跨域问题？ 什么是跨域问题：如果两个页面中的协议、域名、端口、子域名任意有一项不同，两者之间所进行的访问行动就是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。 如何解决呢？ 1. 使用创建DOM元素的方式创建img对象, audio, video, link 这几个对象都支持跨域请求，。 var img = new Image(); img.src = 'http://192.168.1.105:8080?name=zhangsan&age=18'; 类似于上面的这种呢？还有其他一些类似的标签，实际上是可以向服务器发送请求的，但是不能拿到返回值 2. 使用link标签, 但是也不能拿到服务器的请求， 然后再试试script这个标签来试试看？？？ <link rel="stylesheet" href=""> link标签只能支持css的格式，其他格式的内容浏览器是显示不出来的 3.使用script标签来实现跨域， 也能满足发送数据的要求， 接受数据呢？来测试一下。 var script = document.createElement('script'); script.src = 'http://192.168.1.105:8080?name=zhangsan&age=18'; document.body.appendChild(script); // 开始正式发送请求 经测试，还是真可以的，而且在客户端也成功接受到了数据，这说明我们终于找对了路！ 4.解决没有加载完成就输出的问题( 这样就会等待到script标签加载完成之后执行) // 在返回数据到客户端之前，先进行字符串拼接 let json = JSON.stringify({ id: 1, name: 'zhangsan', age: 18, gender: 'Male' }); let jsonStr = 'var data = ' + json; 上面的是我们服务器的数据， 我们直接通过字符串拼接json,然后发给浏览器。 console.log(data) 直接输出，我们发现报错了，找不到这个变量？？？ 原因是因为，浏览器自上而下执行代码，如果DOM元素没有加载完毕就输出，坑定会报错的 5.解决没有加载完成就输出的问题( 这样就会等待到script标签加载完成之后执行) script.addEventListener('load', function () { console.log(data); }); 直接绑定个事件不就行了，测试以后还真是可以。 但是，缺点是： 这种方式需要服务器端定义一个全局变量， 从而会污染全局变量， 不太推荐………… 6. 上面的思路逻辑和代码优化， 由于脚本执行过后才可以拿到数据， 上面的代码可以优化吗？ var script = document.createElement('script'); script.src = 'http://192.168.1.105:8080?name=zhangsan&age=18'; document.body.appendChild(script); function callback(data) { console.log(data) } 实现原理： 服务器端实际上是返回了一个callback函数的调用， 类似于callback(jsondata), 因此当且仅当服务器断点数据返回来以后， 下面的这个函数就相当于是自动调用了， 就会直接得到服务器端传回来的数据信息， 从而打印输出数据。 服务器端就是这样的: let jsonFunc = `callback(${json})`; 7.代码的继续优化, 可以直接在请求中, 我要自己定义一个函数呢？函数名我要自己指定的方法， 可以直接写在url请求中。 var script1 = document.createElement('script'); var url = 'http://192.168.1.105:8080?name=zhangsan&age=19&callback=callback1'; script1.src = url; document.body.appendChild(script1); function callback1(data) { console.log(data); } 服务器端进行参数解析，换成用户自己定义的函数名字不就行了？ let callback = urlObj.query.callback; let jsonFunc = ''+callback+'' + '('+ json + ')'; 到此，浏览器的跨域问题已经基本全部解决。
