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()
{
&& xmlhttp.status==)
{
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>')
})
})
})