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);

}