封装一个JSONP请求

首先,先介绍下jsonp的跨域原理:

1、 动态创建script标签2、 利用 script 的src属性,会自动发送请求3、 只需要将要请求的地址设置为 script标签的src属性的值4、 需要服务端的接口配合,必须返回 JSONP 格式的数据才行

注意:
1、 需要有个支持 JSONP 请求的接口地址2、 我们指定回调函数的名称3、 我们写一个 与回调函数名称 相同的函数4、 通过这个函数的参数就可以获取到服务器返回的数据了!!!5、 这个函数只能写在全局环境中!!
 1 function jsonp(url, params, callback) {
 2             url += ‘?‘;
 3
 4             for(var k in params) {
 5                 url += k + ‘=‘ + params[k] + ‘&‘
 6             }
 7
 8             // 随机生成一个不重复的函数名
 9             var callbackName = ‘ivy_‘ + (new Date - 0);
10             url += ‘callback=‘ + callbackName;
11             // 根据生成的函数名,让这个函数称为一个全局函数
12             window[callbackName] = function( data ) {
13                 // console.log( data );
14                 callback( data );
15
16                 // 获取到数据后,就可以将script标签以及函数都销毁掉
17                 document.head.removeChild( script );
18                 delete window[callbackName];
19             };
20
21             // 动态创建script
22             // 浏览器会自动发送请求,请求接口
23             var script = document.createElement(‘script‘);
24             script.src = url;
25             document.head.appendChild( script );
26
27         }
时间: 2024-08-27 03:48:14

封装一个JSONP请求的相关文章

block传值以及利用block封装一个网络请求类

1.block在俩个UIViewController间传值 最近刚学了几招block 的高级用法,其实就是利用block语法在俩个UIViewController之间传值,在这里分享给初学者,同时也方便我自己理解.我们知道UINavigationController类管理UIViewController的时候,利用的是"栈"的思想,在这里不做过多解释,切入正题,假设我们现在有俩个UIViewController,viewC1和viewC2,viewC1比viewC2先进入到UINavi

31封装一个网络请求的服务

①创建一个服务类 @Injectable() 在服务类中定义方法.数据 sendRequest ( myUrl : string ) { return this.http.get( myUrl ).map(  (response : Response) => response.json()  ) } ②给服务指定提供商 providers : [ MyHttpService ]  模块.组件限定作用范围 ③调用服务 import { } this.myHttpService.sendRequse

尝试封装一个异步请求then方法和catch方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

封装一个axios请求后台的通用方法

import axios from 'axios'; import constant from '@/js/const'; import alert from '@/js/alertView'; let env = process.env.NODE_ENV; var needLogin = ""; let root = ''; let yxHeader; if (env === 'development') { console.log("api"); } else

使用Script元素发送JSONP请求

// 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSONP(url, callback){ //为本次请求创建一个唯一的回调函数名称 var cbnum = "cb"+getJSONP.counter++; var cbname = "getJSONP."+cbnum; if(url.indexof("?"

JavaScript跨域请求和jsonp请求实例

<script type="text/javascript" src="./whenReady.js"></script> <script type="text/javascript"> /** * 一:跨域请求 * * 这个常见的JavaScript模块查询有href属性但没有title属性的所有<a>元素 * 并给他们注册onmouseover事件处理程序 * 这个事件处理程序使用XMLHttp

自动封装Servlet HttpServletRequest请求成为一个POJO对象

自己写了个小工具类,将Servlet里面的HttpServletRequest请求封装成为一个POJO对象,可以复习一下Java的反射原理,开发中这个没什么用,毕竟都用MVC框架,框架都自带这种功能,而且更为强大,不过框架也应该是采用这种原理,通过这个也能对框架窥测一二. 这是工具类:通过传入POJO的Class对象来自动封装一个POJO. package com.xxx.xxx.util; import java.lang.reflect.InvocationTargetException;

原生JavaScript封装的jsonp跨域请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨域的jsonp请求</title> </head> <body> <script> (function(window,document){ //该函数接受三个参数,请求的地址,请求的数据(对象格式),回调函数 // 回调

封装 jsonp请求数据的方法

什么是jsonp :  Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略. 同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略. 了解一下jsonp的api :  封装jsonp的方法: //jsonp.js文件 import or