ajax jsonp 解析data,jsonp详解

title: jsonp详解

tags:

categories:

ajax不允许跨域获取数据

说明，假定后端语言是 PHP

script标签

jsonp的原理：script标签具有跨域性，可以利用Script标签的src属性发送跨域请求，获取相应数据

// 回调函数

function fnName(data){

console.log(data);

}

后端返回的是js代码，是函数调用

echo $fnName.'(hello world)';

jQuery-jsonp

type必须是get

$.ajax({

url: "域名/域名下的php文件名",

dataType: "jsonp",

jsonp: "callbackName", // 约定等号左边的key，服务器根据该名称获取回调函数名称

jsonpCallback: "fnName", // 约定等号右边的value，标识回调函数名称

success: function(){

// todo

error: function(){

// todo

}

})

模仿封装jQuery-ajax

function myAjax(options) {

// 默认值

var defaults = {

jsonp: "callback",

jsopCallback: "jQuery"+ ('v3.1.1'+ Math.random()).replace(/\D/g,'')+"_"+new Date().getTime();

};

// window是全局对象，[]中的值可以是变量，也可以是字符串

window[defaults.jsonpCallback] = function(data){

defaults.success(data);

};

// 处理业务参数,把data数据转换为查询字符串

var param = '';

if(defaults.data){

for(var key in defaults.data){

param += key+"="+defaults.data[key]+"&";

}

// 使用设置参数覆盖默认配置

for(var key in options){

defaults[key] = options[key];

};

// 处理跨域请求

var script = document.createElement("script");

script.src = defaults.url+"?"+ param + defaults.jsonp+"="+defaults.jsonpCallback;

var head = document.querySelector("head");

head.appendChild(script);

}

ajax jsonp 解析data,jsonp详解相关推荐

php 请求拦截,解决拦截器对ajax请求的拦截实例详解
解决拦截器对ajax请求的的拦截拦截器配置:public boolean preHandle(HttpServletRequest request, HttpServletResponse resp ...
爬虫解析利器PyQuery详解及使用实践
作者:叶庭云整理:Lemon 爬虫解析利器 PyQuery详解及使用实践之前跟大家分享了 selenium.Scrapy.Pyppeteer 等工具的使用. 今天来分享另一个好用的爬虫解析工具 P ...
php解析bt,PHP基于闭包思想实现的BT(torrent)文件解析工具实例详解
PHP基于闭包思想实现的BT(torrent)文件解析工具实例详解发布于 2017-09-08 20:05:36 | 124 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP( ...
mysql的load data_【MySQL】load data语句详解（一）
作者罗小波沃趣科技高级MySQL数据库工程师 load data语句详解背景数据库版本:MySQL 5.7.18 服务器信息:本地到处导入在10.10.30.241上演示,local远程导入 ...
html css data-,HTML+CSS入门 HTML自定义data属性详解
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 可以在HTML标签上添加任意以 "data-&q ...
java data使用_@Data注解详解及使用方法-Fun言
@Data作用去除Getter,Setter,equals,hashCode,toString方法,@Data注解在类上时,简化java代码编写,为该类提供读写属性.简单来说就是不用再手动添加get ...
Android复习10【Service与Thread的区别、Service的生命周期、Service生命周期解析（相关方法详解、启动方式的不同、绑定）、音乐播放器+服务】
音乐播放器Android代码下载:https://wws.lanzous.com/ifqzihaxvij 目录 Service与Thread的区别 Service的生命周期 Service生命周 ...
一文搞定 Spring Data Redis 详解及实战
转载自一文搞定 Spring Data Redis 详解及实战 SDR - Spring Data Redis的简称. Spring Data Redis提供了从Spring应用程序轻松配置和访问 ...
Ext.data.GroupingStore详解
Ext.data.GroupingStore详解 Ext.data.GroupingStore 继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的 ...

ajax jsonp 解析data,jsonp详解

ajax jsonp 解析data,jsonp详解相关推荐

最新文章

热门文章