ajax、json笔记

来源：互联网发布：maya 2018 mac arnold 编辑：程序博客网时间：2024/06/05 15:18

1.XMLHttpRequest的方法
open("method","url")建立对服务器的调用
send（content）向服务器发送请求

2.XMLHttpRequest属性
onReadyStateChange：每个状态改变都会触发这个事件处理器，通常调用js函数
readyState : 请求的状态，5个，0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。
responseText: 服务器的响应，表示为一个串
responseXML: 服务器响应，表示xml，这个对象可以解析为DOM对象
status:服务器的http状态码（200=ok,404=not found）
statusText:http状态码的响应文本（ok或not found）

3.ajax的html格式数据传输：

<script type="text/javascript">
window.onload=function(){
var anode=document.getElementsByTagName("a");
for(var i=0;i<anode.length;i++){
anode[i].onclick=function(){
var request=null;
var request=new XMLHttpRequest();
var method="GET";
var url=this.href+"?time="+new Date();
request.open(method,url,true);
request.send(null);
request.onreadystatechange=function(){
if(request.readyState==4){
if(request.status==200 || request.status==304){
document.getElementById("d1").innerHTML=request.responseText;//html格式
}
}
}
return false;
}
}
}
</script>

4.xml格式的ajax数据传输
xml文件:
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>pp</name>
<website>www.baidu.com</website>
<email>123@qq.com</email>
</details>
<script type="text/javascript">
window.onload=function(){
var anode=document.getElementsByTagName("a");
for(var i=0;i<anode.length;i++){
anode[i].onclick=function(){
var request=null;
var request=new XMLHttpRequest();
var method="GET";
var url=this.href+"?time="+new Date();
request.open(method,url,true);
request.send(null);
request.onreadystatechange=function(){
if(request.readyState==4){
if(request.status==200 || request.status==304){
//1.结果为xml格式，需要使用responseXML来获取
var result=request.responseXML;
//2.结果不能直接使用，必须先创建节点，再把节点加到div中
//目标格式如下
/*
<h2><a href="mailto:123@qq.com">pp</a></h2>
<a href="www.baidu.com">www.baidu.com</a>
*/
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
var anode=document.createElement("a");
anode.appendChild(document.creteTextNode(name));
anode.href="mailto:"+email;
var h2node=document.createElement("h2")；
h2node.appendChild(anode);
var anode2=document.createElement("a");
anode2.appendChild(document.creteTextNode(website));
anode2.href=website;
var d1=document.getElementById("d1");
d1.innerHTML="";
d1.appendChild(h2node);
d1.appendChild(anode2);
}
}
}
return false;
}
}
}
</script>
<html>
<a href="www.baidu.com"></a>
<a href="www.taobao.com"></a>
<a href="www.jindong.com"></a>
<div id="d1"></div>
</html>
5.json格式
<script>
var person={
"name" :"李青",
"age" :"22",
"address"：{"city":"黑色玫瑰","id":"盲僧"},
"work":{
{"teacher":"math"},
{"teacher":"PE"},
},
"teaching":function(){
alert("如何构造几何踢");
}
}；
alert(person.name);
alert(person.address.city);
alert(person.work[0].teacher);
alert(person.work[1].teacher);
person.teaching();
</script>

解析json
eval（）：可以把一个字符串转换为本地js代码来执行
<script>
var jsonStr="{'name':'pp'}";
//把json字符串转为json对象
var testStr=eval("("+jsonStr+")");
alert(testStr.name);
</script>

例子：
｛"person":{
"name":"pp";
"website":"www.baidu.com";
"email":"123@qq.com";
}
｝

<script type="text/javascript">
window.onload=function(){

var anode=document.getElementsByTagName("a");

for(var i=0;i<anode.length;i++){

anode[i].onclick=function(){
var request=null;
var request=new XMLHttpRequest();

var method="GET";

var url=this.href+"?time="+new Date();

request.open(method,url,true);

request.send(null);

request.onreadystatechange=function(){

if(request.readyState==4){

if(request.status==200 || request.status==304){
//1.结果为json格式，用eval把json字符串转为json对象jsonob
var result=request.responseText;
var jsonob=eval("("+result+")");
//2.结果不能直接使用，必须先创建节点，再把节点加到div中
//目标格式如下
/*
<h2><a href="mailto:123@qq.com">pp</a></h2>
<a href="www.baidu.com">www.baidu.com</a>
*/
var name=jsonob.person.name;
var website=jsonob.person.website;
var email=jsonob.person.email;

var anode=document.createElement("a");
anode.appendChild(document.creteTextNode(name));
anode.href="mailto:"+email;

var h2node=document.createElement("h2")；
h2node.appendChild(anode);

var anode2=document.createElement("a");
anode2.appendChild(document.creteTextNode(website));
anode2.href=website;

var d1=document.getElementById("d1");
d1.innerHTML="";

d1.appendChild(h2node);
d1.appendChild(anode2);
}
}
}
return false;
}
}
}
</script>
<html>
<a href="www.baidu.com"></a>
<a href="www.taobao.com"></a>
<a href="www.jindong.com"></a>
<div id="d1"></div>
</html>

如何选择ajax处理格式
1.如果应用不需要与其他应用程序共享数据的时候，使用html片段返回数据最简单
2.如果数据需要重用，json文件首选，因为在性能和文件大小方面具有优势
3.当远程应用程序未知时，xml文档首选，因为xml是web服务器领域的"世界语"，都能解读。

jquery如何使用ajax
1.load()
<html>
<script>
$(function(){
$("a").click(function(){
//使用load方法处理ajax
var url=this.href;
var args={"time":new Date()};
$("#d1").load(url,args);//args为json格式的对象
return false;
});
});
</script>
<a href="www.baidu.com">123</a>
<div id="d1"></div>
</html>

2.get()
<html>
<script>
$(function(){
$("a").click(function(){
//使用load方法处理ajax
var url=this.href;
var args={"time":new Date()};
$.get(url,args,function(data){
var name=$(data).find("name").text();
var website=$(data).find("website").text();
var email=$(data).find("email").text();

$("#d1").empty().append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
.append("<a href='"+website+"'>"+website+"</a>");
});
return false;
});
});
</script>
<a href="www.baidu.com">123</a>
<div id="d1"></div>
</html>
3.post()
将上面的get改为post

1.基本使用
url:ajax请求目标url
args：传递参数json格式
data:ajax响应成功后的数据，可能是xml,html,json
$.get(url,args,function(data){
})

2.请求json数据
$.get(url,args,function(data){
},"json")

$.post(url,args,function(data){
},"json")

$.getJSON(url,args,function(data){
})

阅读全文

0 0