您的位置：首页 > 其它

Ajax简单实例

2014-11-05 01:20 190 查看

html文件数据传输

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<script>

window.onload = function(){

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

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

nodes[i].onclick = function(){

var request = new XMLHttpRequest();

var method = "GET";

var url = this.href;

request.open(method,url);

request.send(null);

request.onreadystatechange = function(){

if(request.readyState == 4){

alert(request.status);

if(request.status == 200||request.status == 304){

document.getElementById("show").innerHTML = request.responseText;

}

}

}

return false;

}

}

}

</script>

<ul>

<li><a href="andy.html">andy.html</a>

<li><a href="hatty.html">hatty.html</a>

<li><a href="jone.htnl">jone.html</a>

</ul>

<div id="show">

</div>

</body>

</html>

与XML格式的数据进行交换，源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<script>

window.onload = function(){

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

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

nodes[i].onclick = function(){

var request = new XMLHttpRequest();

var method = "GET";

var url = this.href;

request.open(method,url);

request.send(null);

request.onreadystatechange = function(){

if(request.readyState == 4){

if(request.status == 200||request.status == 304){

//结果为xml格式，所以需要使用responseXML

var result = request.responseXML;

//结果为xml格式，不能直接使用，必须进行解析后使用

var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;

var address = result.getElementsByTagName("address")[0].firstChild.nodeValue;

var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;

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

anode.appendChild(document.createTextNode(name));

anode.href = "mailto "+email;

var hnode = document.createElement("h2");

hnode.appendChild(anode);

var nn = document.getElementById("show");

show.innerHTML="";

nn.appendChild(hnode);

}

}

}

return false;

}

}

}

</script>

<ul>

<li><a href="andy.xml">andy.xml</a>

<li><a href="hatty.html">hatty.html</a>

<li><a href="jone.htnl">jone.html</a>

</ul>

<div id="show">

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航