问题引出:要发送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 + ')';

到此,浏览器的跨域问题已经基本全部解决。

【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)的更多相关文章

  1. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  2. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 通过jsonp解决浏览器的跨域共享

    因为浏览器的同源策略,普通ajax访问跨域请求返回的json数据是不会被浏览器接受的.看下面例子可以看出是访问不到的 首先 定义webapi 后台代码 public class JsopControl ...

  4. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  5. 解决浏览器跨域限制方案之JSONP

    一.什么是JSONP JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法. JSONP是一个非官方的协议,它允许在服务器端返回javascript标签 ...

  6. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  7. 第一百四十节,JavaScript,封装库--浏览器检测

    JavaScript,封装库--浏览器检测 在函数库编写一个,浏览器检测对象 /** sys浏览器检测对象,对象下有两个属性,liu_lan_qi属性和xi_tong属性 * liu_lan_qi属性 ...

  8. JavaScript 跨域:谈谈跨域之 JSONP

    在 Web 开发中,后台开发人员应该会通常遇到这个问题:跨域,而使用 JSONP 就是其中解决办法之一,当然,还有其它解决方法,比如:window.name.window.postMessage.CO ...

  9. 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

随机推荐

  1. [MongoDB]Python 操作 MongoDB

    from pymongo import MongoClient mc = MongoClient('localhost',27017) db = mc.users db.users.save({'na ...

  2. Kotlin和Java名称的由来

    Kotlin和Java名称的由来 学习了:http://blog.jobbole.com/111249/ JetBrains由战斗民族开发: Java来源于印尼群岛中的Java岛: Kotlin来源于 ...

  3. 网络基础篇(一)--TCP/IP协议族

    TCP/IP协议族是一个分层,多协议通信体系. 1 TCP/IP协议族体系结构 TCP/IP协议族自底而上分为四层: 数据链路层, 网络层, 传输层和应用层. 1.1 数据链路层 实现网卡接口的网络驱 ...

  4. string 和 vector 初探

    标准库类型 string string 表示可变长的字符序列.是C++标准库类型的一部分,拥有很多优秀的性能. 定义 string 对象时如未人为初始化编译器会默认初始化为空字符串. string 对 ...

  5. 【译文】利用STAN做贝叶斯回归分析:Part 2 非正态回归

    [译文]利用STAN做贝叶斯回归分析:Part 2 非正态回归 作者 Lionel Hertzogn 前一篇文章已经介绍了怎样在R中调用STAN对正态数据进行贝叶斯回归.本文则将利用三个样例来演示怎样 ...

  6. SpringMVC中的 --- 异常处理

    系统异常处理器SimpleMappingExceptionResolver 处理器方法执行过程中,可能会发生异常,不想看到错误黄页,想看到一个友好的错误提示页. 自定义异常处理器 使用异常处理注解

  7. java 页面传输中文乱码解决方式

    post 中文乱码解决方案 接受数据的时候设置 request.setCharacterEncoding("utf-8");//编码必须和页面编码一致 页面设置 <%@pag ...

  8. c# winform 多条件查找 外加网络人才回答

    浮生 Э 2012-11-22  c# winform 多条件查找  20 我现在有2个textbox  一个是用户名,另一个是电话   现在想对这两个进行条件查找datagridview里的数据 s ...

  9. hdu 2586(Tarjan 离线算法)

    How far away ?                                                                             Time Limi ...

  10. python3+request接口自动化框架中自动发送邮件

    在上一篇中的自动化框架中没有放上自动发送测试结果到邮箱的功能,在这篇文章中在补一下,哈哈 1.上一篇的代码就不在一一介绍了,本篇只介绍发送邮件的功能代码 2.在public common 文件夹中创建 ...