原生ajax&jQueryAjax&jsonp实现与使用
1、原生ajax实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript"> 8 // 对象 9 /* 10 json数据和普通的js对象的区别： 11 1、json数据没有变量 12 2、json形式的数据结尾没有分号 13 3、json数据中的键必须用双引号包住 14 */ 15 // var obj = { 16 // name: 'zhangsan', 17 // age : 12, 18 // lover : ['coding','singing','dancing'], 19 // friend : { 20 // high : '180cm', 21 // weight : '80kg' 22 // } 23 // }; 24 25 var str = '{"name":"zhangsan","age":"12"}'; 26 var obj = JSON.parse(str); //把json形式的字符串转成对象 27 28 var str1 = JSON.stringify(obj); //把对象转成字符串 29 console.log(str1); //{"name":"zhangsan","age":"12"}
32 window.onload = function() { 33 var btn = document.getElementById('btn'); 34 btn.onclick = function() { 35 var uname = document.getElementById('username').value; 36 var pw = document.getElementById('password').value; 37 38 // 1、创建XMLHttpRequest对象 39 var xhr = null; 40 if (window.XMLHttpRequest) { 41 xhr = new XMLHttpRequest(); //标准 42 } else { 43 xhr = new ActiveXObject("Microsoft"); //IE6 44 } 45 // readyState=0表示xhr对象创建完成 46 // 2、准备发送 47 var param = 'username=' + uname + '&password=' + pw; 48 // xhr.open('post','data.json',true); 49 xhr.open('post', 'data.php', true); 50 // 3、执行发送动作 51 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 52 xhr.send(param); //post请求参数在这里传递，并且不需要转码 53 // 4、指定回调函数 54 // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1） 55 xhr.onreadystatechange = function() { 56 if (xhr.readyState == 4) { 57 if (xhr.status == 200) { 58 var data = xhr.responseText; 59 var data = JSON.parse(data); 60 // console.log(data[0],data[1],data[2]); 61 console.log(data.name1); 62 console.log(data.name2); 63 console.log(data.name3); 64 // var d = eval("(" + data + ")");//eval的作用就是把字符串解析成js代码并执行 65 // var d = JSON.parse(data); 66 // console.log(d.name); 67 // console.log(d.age); 68 // console.log(d.friend.high); 69 // console.log(d.friend.weight); 70 // console.log(d.friend.lover); 71 72 // var tag = '<div><span>'+d.name+'</span><span>'+d.age+'</span><span>'+d.lover+'</span><span>'+d.friend.high+'</span></div>'; 73 // document.getElementById("showInfo").innerHTML = tag; 74 } 75 } 76 } 77 78 } 79 } 80 </script> 81 </head> 82 83 <body> 84 <form> 85 用户名： 86 <input type="text" name="username" id="username"><span id="info"></span> 87 <br> 密码： 88 <input type="text" name="password" id="password"> 89 <input type="button" value="登录" id="btn"> 90 </form> 91 <div id="showInfo"></div> 92 </body> 93 94 </html>
php代码
1 <?php 2 3 // echo '{"username":"zhangsan","age":"12"}'; 4 // -------------------------------------------------- 5 // $uname = 'wangwu'; 6 // $age = '13'; 7 // echo '{"username":"'.$uname.'","age":"'.$age.'"}'; 8 // -------------------------------------------------- 9 // json_encode() 作用：就是把数组转化成json形式的字符串 10 // $arr = array(1,2,3); 11 // $arr = array("tom","jerry","spike"); 12 $arr = array("name1"=>"tom","name2"=>"jerry","name3"=>"spike"); 13 $str = json_encode($arr); 14 echo $str; 15 16 ?>
2、jquery Ajax
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style type="text/css"> 8 #container { 9 width: 360px; 10 min-height: 100px; 11 background-color: lightgreen; 12 position: absolute; 13 left: 50%; 14 top: 10px; 15 margin-left: -180px; 16 } 17 </style> 18 <script type="text/javascript" src="./jquery.js"></script> 19 <script type="text/javascript" src="./ajax1.js"></script> 20 <script type="text/javascript"> 21 /* 22 jQuery-ajax相关API基本使用 23 */ 24 $(function(){ 25 $("#btn").click(function(){ 26 var code = $("#code").val(); 27 // ajax({ 28 // type:'post', 29 // url:'./14.php', 30 // dataType:'json', 31 // async : false, 32 // data:{username:'张三',password:'123'}, 33 // success:function(data){ 34 // var html = '<div><span>用户名：'+data.password+'</span><span>密码：'+data.password+'</span></div>' 35 // $("#info").html(html); 36 // } 37 // }); 38 var data = ajax({ 39 type:'post', 40 url:'./14.php', 41 dataType:'json', 42 async : false, 43 data:{username:'张三',password:'123'} 44 }); 45 console.log(data); 46 var html = '<div><span>用户名：'+data.password+'</span><span>密码：'+data.password+'</span></div>' 47 $("#info").html(html); 48 49 }); 50 }); 51 </script> 52 </head> 53 54 <body> 55 <div id="container"> 56 <div> 57 图书编码： 58 <input type="text" name="code" id="code"> 59 <input type="button" value="查询" id="btn"> 60 </div> 61 <div id="info"></div> 62 </div> 63 </body> 64 65 </html>
php代码
1 <?php 2 $sData = '{"msg":"","status":"0","error_code":"0","data":{"info":{"status":"1","com":"ems","state":"3","context":[{"time":"1450252800","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u5df2\u7b7e\u6536,\u4ed6\u4eba\u6536\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011"},{"time":"1449887960","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u8f6c\u4ed6\u5c40\u5904\u7406,\u539f\u56e0:\u975e\u672c\u7ad9\u8bd5\u4ed6\u5c40\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011"},{"time":"1449886219","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011\u6b63\u5728\u6295\u9012"},{"time":"1449871677","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u5230\u8fbe\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011"},{"time":"1449866125","desc":"\u3010\u5317\u4eac\u3011 \u79bb\u5f00\u3010\u5317\u4eac\u3011\uff0c\u4e0b\u4e00\u7ad9\u3010\u4eac\u5929\u901a\u897f\u3011"},{"time":"1449838500","desc":"\u3010\u5317\u4eac\u5e02\u3011 \u3010\u5317\u4eac\u5e02\u3011\u5df2\u7ecf\u5c01\u53d1"},{"time":"1449827400","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 \u79bb\u5f00\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011\uff0c\u4e0b\u4e00\u7ad9\u3010\u5317\u4eac\u5e02\u3011"},{"time":"1449820658","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 \u3010\u5317\u4eac\u5e02\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011\u5df2\u7ecf\u6536\u5bc4"}],"_source_com":""},"com":"ems","company":{"url":"http:\/\/www.kuaidi100.com\/all\/ems.shtml?from=openv","fullname":"EMS","shortname":"EMS","icon":{"id":"2","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,944","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,828","normal":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=295567570,1377797753&fm=58"},"icon249":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=2482145894,2699292432&fm=58","website":{"title":"www.ems.com.cn","url":"http:\/\/www.ems.com.cn\/"},"tel":"11183","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.ems.com.cn\/serviceguide\/tong_da_fan_wei.html"},{"title":"\u7f51\u4e0a\u5bc4\u4ef6","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_biao_zhun.html"}],"timecost":{"btn_show":"1","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_cha_xun.html"},"onlineorder":{"btn_show":"1","url":"http:\/\/www.11183.com.cn\/ec-web\/"}},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"},"kuaidiSource":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"}}}'; 3 $fData = '{"msg":"\u8be5\u5355\u53f7\u6682\u65e0\u7269\u6d41\u8fdb\u5c55\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff0c\u6216\u68c0\u67e5\u516c\u53f8\u548c\u5355\u53f7\u662f\u5426\u6709\u8bef\u3002","status":"-3","error_code":"3","data":{"info":{"status":"0","msg":"EMS \u5355\u53f799711213460851\uff0c\u6ca1\u6709\u67e5\u5230\u76f8\u5173\u4fe1\u606f\u3002\u5355\u53f7\u6682\u672a\u6536\u5f55\u6216\u5df2\u8fc7\u671f","_source_com":""},"com":"ems","company":{"url":"http:\/\/www.kuaidi100.com\/all\/ems.shtml?from=openv","fullname":"EMS","shortname":"EMS","icon":{"id":"2","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,944","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,828","normal":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=295567570,1377797753&fm=58"},"icon249":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=2482145894,2699292432&fm=58","website":{"title":"www.ems.com.cn","url":"http:\/\/www.ems.com.cn\/"},"tel":"11183","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.ems.com.cn\/serviceguide\/tong_da_fan_wei.html"},{"title":"\u7f51\u4e0a\u5bc4\u4ef6","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_biao_zhun.html"}],"timecost":{"btn_show":"1","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_cha_xun.html"},"onlineorder":{"btn_show":"1","url":"http:\/\/www.11183.com.cn\/ec-web\/"}},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"},"kuaidiSource":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"}}}'; 4 5 $cbName = $_GET['cb']; 6 $code = $_GET['code']; 7 8 if($code == '9971121346085'){ 9 echo $cbName.'('.$sData.')'; 10 }else{ 11 echo $cbName.'('.$fData.')'; 12 } 13 14 ?>
3、ajax封装
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #container{ 8 width: 360px; 9 min-height: 100px; 10 background-color: lightgreen; 11 position: absolute; 12 left: 50%; 13 top: 10px; 14 margin-left: -180px; 15 } 16 </style> 17 <script type="text/javascript" src="./ajax.js"></script> 18 <script type="text/javascript"> 19 /* 20 功能需求：页面输入图书编号，查询服务器端的图书信息并且解析渲染 21 */ 22 window.onload = function(){ 23 var btn = document.getElementById('btn'); 24 btn.onclick = function(){ 25 var code = document.getElementById('code').value; 26 ajax('./11.php','get','code='+code,'json',function(data){ 27 // 解析数据并渲染页面 28 var info = document.getElementById('info'); 29 if(data.flag == 0){ 30 info.innerHTML = '没有这本书'; 31 }else{ 32 var tag = '<ul><li>书名：'+data.bookname+'</li><li>作者：'+data.author+'</li><li>描述：'+data.desc+'</li></ul>'; 33 info.innerHTML = tag; 34 } 35 36 }); 37 } 38 } 39 </script> 40 </head> 41 <body> 42 <div id="container"> 43 <div> 44 图书编码：<input type="text" name="code" id="code"> 45 <input type="button" value="查询" id="btn"> 46 </div> 47 <div id="info"></div> 48 </div> 49 </body> 50 </html>
ajax.js封装内容
1 function ajax(obj){ 2 // 默认参数 3 var defaults = { 4 type : 'get', 5 data : {}, 6 url : '#', 7 dataType : 'text', 8 async : true, 9 success : function(data){console.log(data)} 10 } 11 // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数 12 for(var key in obj){ 13 defaults[key] = obj[key]; 14 } 15 // 1、创建XMLHttpRequest对象 16 var xhr = null; 17 if(window.XMLHttpRequest){ 18 xhr = new XMLHttpRequest(); 19 }else{ 20 xhr = new ActiveXObject('Microsoft.XMLHTTP'); 21 } 22 // 把对象形式的参数转化为字符串形式的参数 23 /* 24 {username:'zhangsan','password':123} 25 转换为 26 username=zhangsan&password=123 27 */ 28 var param = ''; 29 for(var attr in obj.data){ 30 param += attr + '=' + obj.data[attr] + '&'; 31 } 32 if(param){ 33 param = param.substring(0,param.length - 1); 34 } 35 // 处理get请求参数并且处理中文乱码问题 36 if(defaults.type == 'get'){ 37 defaults.url += '?' + encodeURI(param); 38 } 39 // 2、准备发送（设置发送的参数） 40 xhr.open(defaults.type,defaults.url,defaults.async); 41 // 处理post请求参数并且设置请求头信息（必须设置） 42 var data = null; 43 if(defaults.type == 'post'){ 44 data = param; 45 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 46 } 47 // 3、执行发送动作 48 xhr.send(data); 49 // 处理同步请求，不会调用回调函数 50 if(!defaults.async){ 51 if(defaults.dataType == 'json'){ 52 return JSON.parse(xhr.responseText); 53 }else{ 54 return xhr.responseText; 55 } 56 } 57 // 4、指定回调函数（处理服务器响应数据） 58 xhr.onreadystatechange = function(){ 59 if(xhr.readyState == 4){ 60 if(xhr.status == 200){ 61 var data = xhr.responseText; 62 if(defaults.dataType == 'json'){ 63 // data = eval("("+ data +")"); 64 data = JSON.parse(data); 65 } 66 defaults.success(data); 67 } 68 } 69 } 70 71 }
php代码
1 <?php 2 // $code = $_GET['code']; 3 $code = $_POST['code']; 4 5 $books = array(); 6 $books['sgyy'] = array('bookname'=>'三国演义','author'=>'罗贯中','desc'=>'一个杀伐纷争的年代'); 7 $books['shz'] = array('bookname'=>'水浒传','author'=>'施耐庵','desc'=>'108条好汉的故事'); 8 $books['xyj'] = array('bookname'=>'西游记','author'=>'吴承恩','desc'=>'佛教与道教的斗争'); 9 $books['hlm'] = array('bookname'=>'红楼梦','author'=>'曹雪芹','desc'=>'一个封建王朝的缩影'); 10 // 这里的array_key_exists用来判断数组中没有对应键 11 if(array_key_exists($code,$books) == 1){ 12 $book = $books[$code];//这里根据参数获取一本书的信息 13 echo json_encode($book); 14 }else{ 15 echo '{"flag":0}'; 16 } 17 18 // echo $qq; 19 ?>
4、jsonp
4.1实现原理
jsonp的本质：动态创建script标签，然后通过它的src属性发送跨域请求，然后服务器端响应的数据格式为【函数调用（foo(实参)）】，所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段js代码-函数调用）来调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/*
动态创建script标签发出去的请求是异步请求
服务器响应的内容是【函数调用】 foo(实参)
*/
function foo(data) {
console.log(data);
console.log(data.username, data.password);
}
var flag = 1;
var script = document.createElement('script');
script.src = 'http://tom.com/data.php?flag=' + flag;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
// 这里的foo函数由谁调用？实际上有服务器响应的内容（这里的内容就是js代码-函数调用foo(123)）调用
// console.log(data);
// foo({"username":"zhangsan","password":"123456"})
/*
hello就是回调函数
这就是jsonp的本质：动态创建script标签，然后通过它的src属性发送跨域请求，然后服务器端响应的数据格式为【函数调用（foo(实参)）】，所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段js代码-函数调用）来调用
*/
function hello(data) {
console.log(data);
}
var script = document.createElement('script');
script.src = 'http://tom.com/data.php?_cb=hello&username=zhangsan&password=123';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
</script>
</head>
<body>
</body>
</html>
data.php
<?php
// $arr = array("username"=>"zhangsan","password"=>"123456");
// echo 'var data ='.json_encode($arr);
$arr = array("username"=>"zhangsan","password"=>"1234560");
echo 'foo('.json_encode($arr).')';
// echo $_GET['flag'];
?>
4.2 jsonp的封装
function ajax(obj){
// jsonp仅仅支持get请求
var defaults = {
url : '#',
dataType : 'jsonp',
jsonp : 'callback',
data : {},
success:function(data){console.log(data);}
}
for(var key in obj){
defaults[key] = obj[key];
}
// 这里是默认的回调函数名称
// expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
if(defaults.jsonpCallback){
cbName = defaults.jsonpCallback;
}
// 这里就是回调函数，调用方式：服务器响应内容来调用
// 向window对象中添加了一个方法，方法名称是变量cbName的值
window[cbName] = function(data){
defaults.success(data);//这里success的data是实参
}
var param = '';
for(var attr in defaults.data){
param += attr + '=' + defaults.data[attr] + '&';
}
if(param){
param = param.substring(0,param.length-1);
param = '&' + param;
}
var script = document.createElement('script');
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
// abc({"username":"zhangsan","password":"123"})
}
4.2 jsonp与Ajax的封装
function ajax(obj) {
var defaults = {
type: 'get',
async: true,
url: '#',
dataType: 'text',
jsonp: 'callback',
data: {},
success: function(data) { console.log(data); }
}
for (var key in obj) {
defaults[key] = obj[key];
}
if (defaults.dataType == 'jsonp') {
ajax4Jsonp(defaults);
} else {
ajax4Json(defaults);
}
}
function ajax4Json(defaults) {
// 1、创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 把对象形式的参数转化为字符串形式的参数
/*
{username:'zhangsan','password':123}
转换为
username=zhangsan&password=123
*/
var param = '';
for (var attr in defaults.data) {
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
}
// 处理get请求参数并且处理中文乱码问题
if (defaults.type == 'get') {
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送（设置发送的参数）
xhr.open(defaults.type, defaults.url, defaults.async);
// 处理post请求参数并且设置请求头信息（必须设置）
var data = null;
if (defaults.type == 'post') {
data = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// 3、执行发送动作
xhr.send(data);
// 处理同步请求，不会调用回调函数
if (!defaults.async) {
if (defaults.dataType == 'json') {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
// 4、指定回调函数（处理服务器响应数据）
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == 'json') {
// data = eval("("+ data +")");
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
function ajax4Jsonp(defaults) {
// 这里是默认的回调函数名称
// expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime());
if (defaults.jsonpCallback) {
cbName = defaults.jsonpCallback;
}
// 这里就是回调函数，调用方式：服务器响应内容来调用
// 向window对象中添加了一个方法，方法名称是变量cbName的值
window[cbName] = function(data) {
defaults.success(data); //这里success的data是实参
}
var param = '';
for (var attr in defaults.data) {
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
param = '&' + param;
}
var script = document.createElement('script');
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
4.3 jsonp与Ajax的封装-使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./ajax3.js"></script>
<script type="text/javascript">
// ajax({
// type:'get',
// // url:'http://tom.com/jsonp.php',
// url:'http://localhost/cross/data.php',
// dataType:'json',
// success:function(data){
// console.log(data.username,data.password);
// }
// });
ajax({
type:'get',
url:'http://tom.com/jsonp.php',
// url:'http://localhost/cross/data.php',
dataType:'jsonp',
data:{username:'zhangsan',password:'123'},
jsonp:'cb',
jsonpCallback:'abc',
success:function(data){
console.log(data.username,data.password);
}
});
</script>
</head>
<body>
</body>
</html>
5、ajax jsonp的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
type:'get',
url:'http://tom.com/jsonp.php',
dataType:'jsonp',
jsonp:'cb',//jsonp属性的作用就是自定义参数名字（callback=abc 这里的名字指的是等号前面的键，后端根据这个键获取方法名，jquery的默认参数名称是callback）
jsonpCallback:'abc',//这个属性的作用就是自定义回调函数的名字（callback=abc ，这里的名字指的是等号后面的值）
data:{},
success:function(data){
console.log(data.username,data.password);
},
error:function(data){
console.dir(data);
console.log('error');
}
});
});
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
</body>
</html>
jsonp.php
<?php
echo 123456;
?>
案例：模拟快递查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container{
width: 400px;
min-height: 300px;
background-color: lightgreen;
margin: auto;
padding: 10px;
text-align: center;
}
#container li{
list-style: none;
text-align: left;
}
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var code = $("#code").val();
$.ajax({
// url : 'https://sp0.baidu.com/9_Q4sjW91Qh3otqbppnN2DJv/pae/channel/data/asyncqury',
url : 'http://localhost/cross/ems.php',
data : {code:code},
jsonp:'cb',
dataType:'jsonp',
success:function(data){
if(data.data.info.status == 0){
$("#info").html(data.msg);
return ;
}
var ems = data.data.info.context;
var tag = '<ul>';
$.each(ems,function(i,e){
var time = e.time;
// 2015年12月12日 上午10:39:20
var t = new Date();
t.setTime(time + '000');
var date = t.getFullYear() + '年' + (t.getMonth()+1) + '月' + t.getDay() + '日' + (t.getHours() > 12?' 下午':' 上午') + (t.getHours()%12) + ':' + t.getMinutes() + ':' + t.getSeconds();
tag += '<li><div>'+date+'</div><div>'+e.desc+'</div></li>'
});
tag += '</ul>';
$("#info").html(tag);
}
});
});
});
</script>
</head>
<body>
<div id="container">
快递单号：<input type="text" name="code" id="code">
<input type="button" value="查询" id="btn">
<div id="info"></div>
</div>
</body>
</html>
ems.php
<?php
$sData = '{"msg":"","status":"0","error_code":"0","data":{"info":{"status":"1","com":"ems","state":"3","context":[{"time":"1450252800","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u5df2\u7b7e\u6536,\u4ed6\u4eba\u6536\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011"},{"time":"1449887960","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u8f6c\u4ed6\u5c40\u5904\u7406,\u539f\u56e0:\u975e\u672c\u7ad9\u8bd5\u4ed6\u5c40\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011"},{"time":"1449886219","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011\u6b63\u5728\u6295\u9012"},{"time":"1449871677","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u5230\u8fbe\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011"},{"time":"1449866125","desc":"\u3010\u5317\u4eac\u3011 \u79bb\u5f00\u3010\u5317\u4eac\u3011\uff0c\u4e0b\u4e00\u7ad9\u3010\u4eac\u5929\u901a\u897f\u3011"},{"time":"1449838500","desc":"\u3010\u5317\u4eac\u5e02\u3011 \u3010\u5317\u4eac\u5e02\u3011\u5df2\u7ecf\u5c01\u53d1"},{"time":"1449827400","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 \u79bb\u5f00\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011\uff0c\u4e0b\u4e00\u7ad9\u3010\u5317\u4eac\u5e02\u3011"},{"time":"1449820658","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 \u3010\u5317\u4eac\u5e02\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011\u5df2\u7ecf\u6536\u5bc4"}],"_source_com":""},"com":"ems","company":{"url":"http:\/\/www.kuaidi100.com\/all\/ems.shtml?from=openv","fullname":"EMS","shortname":"EMS","icon":{"id":"2","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,944","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,828","normal":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=295567570,1377797753&fm=58"},"icon249":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=2482145894,2699292432&fm=58","website":{"title":"www.ems.com.cn","url":"http:\/\/www.ems.com.cn\/"},"tel":"11183","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.ems.com.cn\/serviceguide\/tong_da_fan_wei.html"},{"title":"\u7f51\u4e0a\u5bc4\u4ef6","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_biao_zhun.html"}],"timecost":{"btn_show":"1","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_cha_xun.html"},"onlineorder":{"btn_show":"1","url":"http:\/\/www.11183.com.cn\/ec-web\/"}},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"},"kuaidiSource":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"}}}';
$fData = '{"msg":"\u8be5\u5355\u53f7\u6682\u65e0\u7269\u6d41\u8fdb\u5c55\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff0c\u6216\u68c0\u67e5\u516c\u53f8\u548c\u5355\u53f7\u662f\u5426\u6709\u8bef\u3002","status":"-3","error_code":"3","data":{"info":{"status":"0","msg":"EMS \u5355\u53f799711213460851\uff0c\u6ca1\u6709\u67e5\u5230\u76f8\u5173\u4fe1\u606f\u3002\u5355\u53f7\u6682\u672a\u6536\u5f55\u6216\u5df2\u8fc7\u671f","_source_com":""},"com":"ems","company":{"url":"http:\/\/www.kuaidi100.com\/all\/ems.shtml?from=openv","fullname":"EMS","shortname":"EMS","icon":{"id":"2","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,944","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,828","normal":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=295567570,1377797753&fm=58"},"icon249":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=2482145894,2699292432&fm=58","website":{"title":"www.ems.com.cn","url":"http:\/\/www.ems.com.cn\/"},"tel":"11183","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.ems.com.cn\/serviceguide\/tong_da_fan_wei.html"},{"title":"\u7f51\u4e0a\u5bc4\u4ef6","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_biao_zhun.html"}],"timecost":{"btn_show":"1","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_cha_xun.html"},"onlineorder":{"btn_show":"1","url":"http:\/\/www.11183.com.cn\/ec-web\/"}},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"},"kuaidiSource":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"}}}';
$cbName = $_GET['cb'];
$code = $_GET['code'];
if($code == '9971121346085'){
echo $cbName.'('.$sData.')';
}else{
echo $cbName.'('.$fData.')';
}
?>
function ajax(obj) {
var defaults = {
type: 'get',
async: true,
url: '#',
dataType: 'text',
jsonp: 'callback',
data: {},
success: function(data) { console.log(data); }
}
for (var key in obj) {
defaults[key] = obj[key];
}
if (defaults.dataType == 'jsonp') {
ajax4Jsonp(defaults);
} else {
ajax4Json(defaults);
}
}
function ajax4Json(defaults) {
// 1、创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 把对象形式的参数转化为字符串形式的参数
/*
{username:'zhangsan','password':123}
转换为
username=zhangsan&password=123
*/
var param = '';
for (var attr in defaults.data) {
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
}
// 处理get请求参数并且处理中文乱码问题
if (defaults.type == 'get') {
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送（设置发送的参数）
xhr.open(defaults.type, defaults.url, defaults.async);
// 处理post请求参数并且设置请求头信息（必须设置）
var data = null;
if (defaults.type == 'post') {
data = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// 3、执行发送动作
xhr.send(data);
// 处理同步请求，不会调用回调函数
if (!defaults.async) {
if (defaults.dataType == 'json') {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
// 4、指定回调函数（处理服务器响应数据）
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == 'json') {
// data = eval("("+ data +")");
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
function ajax4Jsonp(defaults) {
// 这里是默认的回调函数名称
// expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime());
if (defaults.jsonpCallback) {
cbName = defaults.jsonpCallback;
}
// 这里就是回调函数，调用方式：服务器响应内容来调用
// 向window对象中添加了一个方法，方法名称是变量cbName的值
window[cbName] = function(data) {
defaults.success(data); //这里success的data是实参
}
var param = '';
for (var attr in defaults.data) {
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
param = '&' + param;
}
var script = document.createElement('script');
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
