jsonp和ajax对比,ajax的json和jsonp

;function ajax(params) {

params = params || {};

params.data = params.data || {};

// 判断是ajax请求还是jsonp请求

var json = params.jsonp? jsonp(params) : json(params);

function formatParams(data) {

var arr = [];

for (var name in data) {

// encodeURIComponent()

arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));

};

// 添加一个随机数参数 防止缓存

arr.push('v='+random());

return arr.join('&');

}

function json(params) {

params.type = (params.type || 'GET').toUpperCase();

params.data = formatParams(params.data);

var xhr = null;

if(window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else {

xhr = new ActiveXObject('Microsoft.XMLHTTP');

};

xhr.onreadystatechange = function() {

/*

* 0：为初始化。尚未调用open()方法。

* 1：启动。已经调用open()方法。但尚未调用send()方法。

* 2：发送。已经调用send()方法。但尚未接受到响应。

* 3：接受。已经接收到部分响应数据。

* 4：完成。已经接收到全部响应数据，并且可以在客户端使用。

*/

if(xhr.readyState == 4) {

var status = xhr.status;

if (status >= 200 && status < 300) {

var response = "";

var type = xhr.getResponseHeader('Content-type');

if (type.indexOf('xml') !== -1 && xhr.responseXML) {

response = xhr.responseXML; // document对象响应

} else if (type === 'application/json') {

response = JSON.parse(xhr.responseText);

} else {

response = xhr.responseText; // 字符串响应

}

}

params.success && params.success(response);

} else {

params.error && params.error(status);

}

};

};

function jsonp(params) {

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

}

};

if (params.type == 'GET') {

xhr.open(params.type, params.url + '?' + params.data, true);

xhr.send(null);

} else {

xhr.open(params.type, params.url, true);

// 设置提交时的内容类型

xhr.setRequestHeader('Content-type', 'application/x-ww-form-urlencoded; charset=UTF-8');

xhr.send(params.data);

}

}

ajax({

url: 'text.php',

type: 'POST',

data: {'b': '异步请求'},

success: function(res){

console.log(JSON.parse(res));

}

error: function(error){}

});

ajax({

url: 'test', // 请求地址

jsonp: 'jsonpCallback', // 采用jsonp请求，且回调函数名为"jsonpCallbak"，可以设置为合法的字符串

data: {'b': '异步请求'}, // 传输数据

success:function(res){ // 请求成功的回调函数

console.log(res);

},

error: function(error) {} // 请求失败的回调函数

});