《JavaScript设计模式》——11.4 JSONP

11.4 JSONP

“第二种代理对象形式是通过script标签。比如我们在CDN(内容分发网络,一种更接近用户的网络架构,是用户可以就近获取内容)上更快速地获取,然而这种获取方式获取的script内容是不变的。而我们需要的代理对象,是对页面与浏览器间通信的,显然上面的方式还不能满足我们的需求,不过我们知道通过src属性可实现get请求,因此我们可以在src指向的url(请求地址)上面添加一些字段信息,然后服务器端获取这些字段,再相应地生成一份内容。”

// 前端浏览器页面
<script type="text/JavaScript">
// 回调函数,打印出请求数据与响应数据
function jsonpCallBack(res,req){
  console.log(res,req);
}
</script>
<script type="text/JavaScript" src="http://localhost/test/jsonp.php?callback= jsonp CallBack&data=getJsonPData"></script>
// 另外一个域下服务器请求接口
<?php
  /*后端获取请求字段数据,并生成返回内容*/
  $data = $_GET["data"];
  $callback = $_GET["callback"];
  echo $callback."('success', '".$data."')";
?>

“这种方式,你可以想象成河里面的一只小船,通过小船将你的请求发送给对岸,然后对岸的人们将数据放在小船里为你带回来。”

“哦,那这种方式就需要其他域下的服务器端与前端协同工作开发功能了吧。”

时间: 2024-08-16 00:30:48

《JavaScript设计模式》——11.4 JSONP的相关文章

常用的Javascript设计模式

<Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰

JavaScript中模拟实现jsonp

  这篇文章主要介绍了JavaScript中模拟实现jsonp,本文直接给出实现代码,代码中包含详细注释,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 6

《JavaScript设计模式》——导读

前言 JavaScript设计模式 设计模式是解决软件设计中常见问题的可复用方案.探索任何编程语言时,设计模式都是一个令人兴奋和极具吸引力的话题. 原因之一是:设计模式是许多先前开发人员总结出的经验,我们可以借鉴这些经验进行编程,以确保能够以优化的方式组织代码,为我们解决棘手的问题提供参考. 设计模式还是我们用来描述解决方案的常用词汇.当我们想要向其他人表述一种以代码形式构建解决方案的方式时,描述设计模式比描述语法和语义要简单得多. 在本书中,我们将探讨JavaScript编程语言中经典的与现代

《JavaScript设计模式》——2.3 传宗接代——继承

2.3 传宗接代--继承 "小白,看继承呢?"小铭忙完自己的事情走过来. "是呀,刚才学习类,发现每个类都有3个部分,第一部分是构造函数内的,这是供实例化对象复制用的,第二部分是构造函数外的,直接通过点语法添加的,这是供类使用的,实例化对象是访问不到的,第三部分是类的原型中的,实例化对象可以通过其原型链间接地访问到,也是为供所有实例化对象所共用的.然而在继承中所涉及的不仅仅是一个对象." "对呀,不过继承这种思想却很简单,如千年文明能够流传至今靠的就是传承

《JavaScript设计模式》——2.2 包装明星——封装

2.2 包装明星--封装 2.2.1 创建一个类 "在JavaScript中创建一个类很容易,首先声明一个函数保存在一个变量里.按编程习惯一般将这个代表类的变量名首字母大写.然后在这个函数(类)的内部通过对this(函数内部自带的一个变量,用于指向当前这个对象)变量添加属性或者方法来实现对类添加属性或者方法,例如:" var Book = function(id, bookname, price){ this.id = id; this.bookname= bookname; this

《JavaScript设计模式》——9.12 Decorator(装饰者)模式

9.12 Decorator(装饰者)模式 Decorator是一种结构型设计模式,旨在促进代码复用.与Mixin相类似,它们可以被认为是另一个可行的对象子类化的替代方案. 通常,Decorator提供了将行为动态添加至系统的现有类的能力.其想法是,装饰本身对于类原有的基本功能来说并不是必要的:否则,它就可以被合并到超类本身了. 装饰者可以用于修改现有的系统,希望在系统中为对象添加额外的功能,而不需要大量修改使用它们的底层代码.开发人员使用它们的一个共同原因是,应用程序可能包含需要大量不同类型对

javascript设计模式--策略模式之输入验证_javascript技巧

策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:

JavaScript设计模式之观察者模式

设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切图.做少量交互效果的FE甚至可能不会用到,但是当你开始使用Angular/Backbone等框架的时候,就无法避免设计模式.MVC/MVVM这些东西了(反正我是伤脑筋). 我学设计模式是刚开始接触编程大概三个月的时候,看一本书<大话设计模式>,里面用C#语言来写,我很无语,因为强类型的编程语言对于

JavaScript设计模式系列之原型模式

prototype模式通过实例对象指定需要创建的类型,这与factory method模式有本质不同,factory method模式是通过类的继承定义不同子类来达到创建不同类型对象的目的,属于类模式,prototype模式通过调用组合的对象成员生成不同类型的对象实例,属于对象模式. 由于这个特性,prototype具有以下适用场合: · 需要运行时确定实例化的类时,比如动态装载库时 · 避免创建过多子类时.子类太多永远是不受欢迎的,在factory method中我们也提到通过模板或者参数化来

javascript设计模式:JavaScript设计模式学习一之接口

看完了<JavaScript王者归来>,在图书馆找了<JavaScript设计模式>来看,之前设计模式方面的书看过:<Head First 设计模式>.<设计模式之禅>,GOF的<Design Patterns: Elements of Reusable Object-Oriented Software>看了一部分.记得以前没这些基础的时候,看<JavaScript设计模式>简直是不知道作者在说什么.言归正传:准确的说,JavaScr