jsonp 原理
ajax请求
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/ajax/test1.txt",true); xmlhttp.send();
jsonp请求原理
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <script> function fn(data){ alert(data) }; </script> <script src="data.js"></script> </body> </html>
data.js 的内容是 fn([1,2,3,4,5])
输出结果：
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery1.8.3.min.js"></script>
</head>
<body>
<dl id="Dl1">
</dl>
<script>
function fn(data) {
var oDl1 = $('#Dl1');
var html = '';
$.each(data,function(index,content){
$.each(content,function(i,c){
html += '<dt>'+c['title']+'</dt>';
html += '<dd>'+c['summary']+'</dd>';
})
})
oDl1.html(html)
};
var oScript = document.createElement('script');
oScript.src = 'https://api.douban.com/v2/book/search?q=javascript&count=10&callback=fn';
document.body.appendChild(oScript);
document.body.removeChild(oScript);
</script>
</body>
</html>
百度输入框实例：http://457375608.github.io/liujin/jsonp/百度输入框.html
豆瓣搜索框实例：http://457375608.github.io/liujin/jsonp/豆瓣输入框.html
处理数据：
//遍历数组 第一个参数是索引 第二个是内容
$.each( [0,1,2], function(i, n){
console.log( "索引：" + i + " 内容: " + n );
});
//遍历对象 第一个参数是key 第二个参数value
$.each( {name:"liujin","age":"24","sex":"boy"}, function(i, n){
console.log( "key："+ i + " value: " + n );
});
//实例一 $(function(){ var data={ "HTML":["html 1","html 2","html 3"] , "CSS":["css 1","css 2","css 3"] , "JAVASCRIPT":["javascript 1","javascript 2","javascript 3"] }; document.write("<dl>") $.each(data,function(index,content){ document.write("<dt>"+index+"</dt>") $.each(content,function(i,c){ document.write("<dd>"+c+"</dd>") }) }) document.write("</dl>") }) //实例二 var data=[{ 小学生:[ {name:'小学生一 ',sex:'boy ',age:24}, {name:'小学生二 ',sex:'boy ',age:24}, {name:'小学生三 ',sex:'boy ',age:24} ] }, { 中学生:[ {name:'中学生一 ',sex:'girl ',age:24}, {name:'中学生二 ',sex:'girl ',age:24}, {name:'中学生三 ',sex:'girl ',age:24} ] }, { 大学生:[ {name:'大学生一 ',sex:'boy ',age:24}, {name:'大学生二 ',sex:'boy ',age:24}, {name:'大学生三 ',sex:'boy ',age:24} ] }]; //jQuery实现 $.each(data,function(index,con1){ $.each(con1,function(index,con2){ document.write(index+"<br>"); $.each(con2,function(index,con3){ document.write(con3.name+" "+con3.sex+" "+con3.age+"<br>") }) }) }) //js实现 for...in遍历对象 for遍历数组 for(var i=0;i<data.length;i++){ //遍历年级所在对象（数组） for(var x in data[i]){ //输出对象属性名（对象） document.write(x+"<br>"); for(var a=0;a<data[i][x].length;a++){ //遍历对象属性值（数组） document.write(data[i][x][a].name+""+data[i][x][a].sex+""+data[i][x][a].age+"<br>") } } } //$("").load(url,data,function(response,status,xhr)) $("#result").load("ajax/test.html"); //加载整个页面 $("#result").load("ajax/test.html #container"); //加载页面的一部分 $("#result").load("ajax/test.html", function() { //回调函数 alert("Load was performed."); }); //$.get(URL,function(数据，状态){}); //等价于 $.ajax({ type:GET, url: url, success: function(data,status){ } }); //$.post(url,data,function(数据，状态){}) //等价于 $.ajax({ type: 'POST', url: url, data: {key1:value1,key2:value2}, success:function(data,status){ } }); $.ajax({ url:"", //string 请求地址 type:"", //string 请求方式（post/get） timeout:"", //number 超时时间（毫秒） data:"", //json 发送数据 {key:valut,key:value} dataType:"", //string xml,html,script,json,text beforeSent:"", //function 请求之前 function(XMLHttpRequest) complete:"", //function 请求完成 function(XMLHttpRequest,textStatus) seccess:"", //function 请求成功 function(data,textStatus) error:"" //function 请求失败 function(XMLHttpRequest,textStatus,errorThrown) }); //实例 $.ajax({ type: "GET", url: "test.json", dataType: "json", success : function(data){ $('#resText').empty(); var html = ''; $.each( data , function(Index, comment) { //处理json html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); } });
name:小学生一 sex:boy age:24
name:小学生二 sex:boy age:24
name:小学生三 sex:boy age:24
name:中学生一 sex:girl age:24
name:中学生二 sex:girl age:24
name:中学生三 sex:girl age:24
name:大学生一 sex:boy age:24
name:大学生二 sex:boy age:24
name:大学生三 sex:boy age:24
$.each(data,function(i,n){ $.each(n,function(k,v){ $.each(v,function(i,n){ $.each(n,function(a,b){ document.write(a+':'+b) }) document.write('<br>') }) }) })