1. function prescript(s) {
  2. if (s.cache === undefined) {
  3. s.cache = false;
  4. }
  5. if (s.crossDomain) {
  6. s.type = "GET";
  7. }
  8. }
  9.  
  10. function prejsonp(s, originalSettings, jqXHR) {
  11. // 给回调函数命名
  12. var callbackName = s.jsonpCallback
  13. s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName;
  14. // 脚本执行后使用数据转换器来检索json
  15. // 提供给代码获取服务器的是据
  16. s.getData = function() {
  17. if (!responseContainer) {
  18. jQuery.error(callbackName + " was not called");
  19. }
  20. return responseContainer[0];
  21. };
  22. //修改处理机制
  23. s.dataTypes[0] = "json";
  24. // 创建一个全局函数
  25. overwritten = window[callbackName];
  26. //用来收集服务器给的数据
  27. window[callbackName] = function() {
  28. responseContainer = arguments;
  29. };
  30.  
  31. return "script";
  32. }
  33.  
  34. /**
  35. * jsonp的预先处理
  36. */
  37. function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) {
  38. //预处理jsonp
  39. var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR)
  40. //扩充dataTypes
  41. options.dataTypes.unshift(dataTypeOrTransport);
  42. //预处理script类型
  43. prescript(options)
  44. }
  45.  
  46. /**
  47. * 分发器
  48. * @return {[type]} [description]
  49. */
  50. function inspectPrefiltersOrTransportsB(s, originalOptions, jqXHR) {
  51. return {
  52. send: function(_, complete) {
  53. var script = jQuery("<script>").prop({
  54. async: true,
  55. charset: s.scriptCharset,
  56. src: s.url
  57. }).on(
  58. "load error",
  59. callback = function(evt) {
  60. script.remove();
  61. callback = null;
  62. if (evt) {
  63. complete()
  64. }
  65. }
  66. );
  67. //<script async="" src="http://192.168.1.113:8080/github/jQuery/jsonp.php
  68. document.head.appendChild(script[0]);
  69. }
  70. }
  71. }
  72.  
  73. /**
  74. * 模拟ajax的 jsonp请求
  75. * @param {[type]} options [description]
  76. * @return {[type]} [description]
  77. */
  78. function createAjax(options) {
  79.  
  80. if (typeof url === "object") {
  81. options = url;
  82. url = undefined;
  83. }
  84.  
  85. options = options || {};
  86.  
  87. /**
  88. * 参数
  89. * jQuery.ajaxSetup 是默认参数
  90. * @type {[type]}
  91. */
  92. var s = jQuery.ajaxSetup({}, options);
  93.  
  94. // Deferreds
  95. // 异步机制
  96. var deferred = jQuery.Deferred();
  97. var completeDeferred = jQuery.Callbacks("once memory");
  98.  
  99. /**
  100. * 实际返回的ajax对象
  101. * @type {Object}
  102. */
  103. var jqXHR = {}
  104.  
  105. // 把jqXHR对象转化promise对象,幷加入complete、success、error方法
  106. deferred.promise(jqXHR).complete = completeDeferred.add;
  107. //别名
  108. jqXHR.success = jqXHR.done;
  109. jqXHR.error = jqXHR.fail;
  110.  
  111. s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().match(/(?:)/) || [""];
  112.  
  113. //预处理
  114. inspectPrefiltersOrTransportsA(s, options, jqXHR);
  115.  
  116. for (i in {
  117. success: 1,
  118. error: 1,
  119. complete: 1
  120. }) {
  121. jqXHR[i](s[i]);
  122. }
  123.  
  124. /**
  125. * 分发器
  126. */
  127. transport = inspectPrefiltersOrTransportsB(s, options, jqXHR);
  128.  
  129. function done(status, nativeStatusText, responses, headers) {
  130. console.log(s,s.getData())
  131. }
  132.  
  133. //发送请求
  134. transport.send(s, done);
  135.  
  136. return jqXHR;
  137. }
  138.  
  139. function show(data){
  140. $('body').append('<li>'+ data +'</li>');
  141. }
  142.  
  143. /**
  144. * 数据回调接收
  145. * @return {[type]} [description]
  146. */
  147. function flightHandler(){
  148.  
  149. }
  150.  
  151. $("#test").click(function(){
  152. //执行一个异步的HTTP(Ajax)的请求。
  153. var ajax = createAjax({
  154. url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php',
  155. data: {
  156. 'action': 'aaron'
  157. }, // 预传参的数组
  158. dataType: 'jsonp', // 数据类型
  159. jsonp: 'callback', // 指定回调函数名,与服务器端接收的一致,并回传回来
  160. jsonpCallback:flightHandler,
  161. success: function() {
  162. show('局部事件success')
  163. }
  164. })
  165. })

模拟jsonp的实现的更多相关文章

  1. jsonp和事件发布监听

    模拟jsonp var id = 0; function JSONP(url,param,cb){ var callbackName = "json_" + id++; var a ...

  2. python&JSONP(初级篇)

    JSONP产生背景 1.跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 2.浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 3.如果协议,端口和主机对 ...

  3. 前端跨域(二):JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  4. 折腾nock给jsonp进行单元测试

    概述 前几天学习用Jest和nock.js对异步api进行单元测试.在项目中,我用到了jsonp,自然想到对jsonp进行单元测试. 过程很折腾,结果很有趣. jsonp.js 首先axios或者fe ...

  5. 简单的jsonp实现跨域原理

    什么原因使jsonp诞生?  传说,浏览器有一个很重要的安全限制,叫做"同源策略".同源是指,域名,协议,端口相同.举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚 ...

  6. JSONP 跨域问题

    JSONP跨域请求   什么是跨域: 1.域名不同 2.域名相同端口不同 js出于对安全考虑不支持跨域请求.我们可以使用JSONP解决跨域问题. 一.JSONP是什么 JSONP(JSON with ...

  7. jsonp模拟获取百度搜索相关词汇

    随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...

  8. JavaScript:原生模拟$.ajax以及jsonp

    现实项目中,常常会用到请求,但是在考虑低版本的浏览器时,promise相关的axios,fetch这类第三方库的支持率就不那么好了,再考虑到最大的一个问题,跨域,更是让人头痛,虽然也有fetch-js ...

  9. jsonp 原理 并模拟实现一个简单的jsonp

    jsonp产生的背景 1.从原网站向目标网站(服务端)发送ajax请的时候,由于浏览器的安全策略(这两个网站只要域名,端口,协议 有一个不同就不允许请求访问)导致跨域,从而请求无法正常进行. 2.We ...

随机推荐

  1. ssm简单配置

    MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架. MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获. MyBatis 只使用简单的XML 和注解来配置和映射 ...

  2. xcode8 升级后注释快键键不能使用的解决方法

    1.这个是因为苹果解决xcode ghost.把插件屏蔽了.解决方法 命令运行:  sudo /usr/libexec/xpccachectl 然后必须重启电脑后生效 2.option+command ...

  3. node-webkit安装及简单实现

    遇到一个客户说不要登录网页访问系统,说是不安全,要做成像是QQ这样的客户端. 这让我很为难啊,项目都快做好了,不可能让我重新做吧,再说C++什么的我也不会啊, 于是我接触了node-webkit,并觉 ...

  4. zepto区别于jquery获取select表单选中的值

    在jquery下,我们获取select表单选中的值通常是通过$('select').val()来实现,这样的方式简单又明了,或者通过$('select option[selected]').text( ...

  5. MySql UDF 调用外部程序和系统命令

    1.mysql利用mysqludf的一个mysql插件可以实现调用外部程序和系统命令 下载lib_mysqludf_sys程序:https://github.com/mysqludf/lib_mysq ...

  6. iOS8沙盒路径的变化

    iOS8中的的沙盒路径发生了变化 之前是这样的路径,通过NSHomedictionary()获取的家路径 /Users/wupeng/Library/Application Support/iPhon ...

  7. JSON详解

    首先要知道JSON是一种轻量级的数据格式,不是一种编程语言,因此其他语言也可以使用. 一.JSON语法 JSON语法可以表现为下面三种值: 1.简单值:字符串.数值.布尔值和null,如"h ...

  8. placehoder不兼容ie9以下和opero12以下

    颜色设置 解决方案一: ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* ...

  9. 关于英语PETS5备考的一些事

    首先,自我介绍一下,我叫万世想,目前国内某985高校CS硕士在读,在现代软件工程课上,接触到了博客园,之前是自己在新浪云上用WP简单搭了自己的博客,但是都没有坚持下来.希望自己能够在博客园大家庭中,与 ...

  10. ThinkPHP5 助手函数

    对于ThinkPHP5.0以前的版本,助手函数全部是单字母函数,但到ThinkPHP5之后,使用如下函数来代替单字母函数: 最常用: /** * 实例化Model * @param string $n ...