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])
输出结果：
实例：
无标题文档
百度输入框实例：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("")
$.each(data,function(index,content){
document.write("- "+index+"
")
$.each(content,function(i,c){
document.write("- "+c+"
")
})
})
document.write("
")
})
//实例二
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+"
");
$.each(con2,function(index,con3){
document.write(con3.name+" "+con3.sex+" "+con3.age+"
")
})
})
})
//js实现 for...in遍历对象 for遍历数组
for(var i=0;i//遍历年级所在对象（数组）
for(var x in data[i]){ //输出对象属性名（对象）
document.write(x+"
");
for(var a=0;a//遍历对象属性值（数组）
document.write(data[i][x][a].name+""+data[i][x][a].sex+""+data[i][x][a].age+"
")
}
}
}
//$("").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 += ';
})
$('#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>')
})
})
})
' + comment['username'] + ':
' + comment['content'] + '