window.ajaxJsonp=function(params) {
params = params || {};
params.data = params.data || {};
var json = params.jsonp ? jsonp(params) : json(params);
// jsonp请求
function jsonp(params) {
//创建script标签并加入到页面中
var callbackName = params.jsonp;
var head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
params.data['callback'] = callbackName;
var data = formatParams(params.data);
var script = document.createElement('script');
head.appendChild(script);
//创建jsonp回调函数
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
params.success && params.success(json);
};
//发送请求
script.src = params.url + '?' + data;
//为了得知此次请求是否成功,设置超时处理
if(params.time) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
params.error && params.error({
message: '超时'
});
}, time);
}
};
//格式化参数
function formatParams(data) {
var arr = [];
for(var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
};
// 添加一个随机数,防止缓存
arr.push('v=' + random());
return arr.join('&');
}
// 获取随机数
function random() {
return Math.floor(Math.random() * 10000 + 500);
}
}

  

js的jsonp的更多相关文章

  1. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  2. Node.js返回JSONP

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...

  3. 原生的js实现jsonp的跨域封装

    一.原理 jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发 ...

  4. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  5. 2-8 js基础 jsonp封装

    'use strict'; function jsonp(json){ json = json||{} if(!json.url)return; json.data=json.data||{}; js ...

  6. js 实现JSONP

    编写一个 jsonp.html 内容如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  8. 用原生js来处理跨域的数据(jsonp)

    说明总结: 1.ajax和jsonp其实本质上是不同的东西.ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提 ...

  9. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

随机推荐

  1. Snackbar:用它来替换Toast 显示短提示

    简介 Snackbar 它是Toast的子类.主要用来提示短暂的提示信息后,然后它自动消失. 它寄生在普通view上,具有一些基本功能. 它寄生在 CoordinatorLayout 时,有以下两个特 ...

  2. 最新的 xp sp3序列号(绝对可通过正版验证)-xp序列号

    windows xp激活方法一:使用windows xp激活码 以下xp系统激活码都是可用的 MRX3F-47B9T-2487J-KWKMF-RPWBY(工行版) 可用(强推此号) QC986-27D ...

  3. redis学习-sds数据类型

    今天开始了redis的学习,本来想直接从源码看起的,不过看到有篇对redis介绍的基础教程 <Redis 设计与实现(第一版)> 于是决定从这个开始入门. 1.数据类型定义 typedef ...

  4. C++学习笔记(三)之函数库

    1.标准库函数 begin end begin 返回数组首地址 end   返回数组尾地址 2.const 在声明变量时对变量限制为只读,不允许修改 const int i = 5; 单个const作 ...

  5. StyleAI厚积薄发: Android网络图片数据传输

    在StyleAI上厚积了这么长时间,憋了这么久,本来想憋个更大的,不过还是薄发一次的好. 三.直接使用别人的工程 文章:Android学习之客户端上传图片到服务器 下载地址:https://downl ...

  6. EF 迁移操作

    一. 模型设计 1.  遵循EF标准,注意表关系配对 2.  数据模型里尽量把必须的属性和说明都写全 3.  EF默认id字段为主键,如果没有,需指定主键 二. 数据迁移 1.  命令运行环境:vis ...

  7. 前端axios发送的数据后端接收不到(没有自动依赖注入)可能的原因

    前端请求头content-type没有进行正确设置,后端无法解析该类型数据,比如说: 后端若想接收json类型的数据,则需要配置相应的转换器,(spring中可使用@RequestBody注解),若没 ...

  8. 16Log4J

    Log4J Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事件记录器.UNIX Syslog守 ...

  9. 移动端开发需要加的meta

    移动端开发需要加的meta和常用的css3媒体查询样式,移动开发中头部要加的一些常用meta. <meta name="viewport" content="ini ...

  10. 我的ACM技能框架(自用)

    每次接触到新的知识就把它名字记下来,留给以后当纪念 2018.11 已经学会的 滚动数组,前缀和优化 对多维数组在空间复杂度上的降维优化     最长上升子序列 LIS问题,动态规划递推解决 最长不下 ...