ajax初识

最新推荐文章于 2025-09-11 22:10:09 发布

转载最新推荐文章于 2025-09-11 22:10:09 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/infernoyy/p/7247947.html

文章标签：

#json #javascript #ViewUI

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
　　window.onload = function() {
　　//1:获取a节点，并对其添加onclick（）相应函数
　　document.getElementsByTagName("a")[0].onclick = function() {
　　// 2:创建一个XMLHttpRequest对象
　　　　var request = new XMLHttpRequest();
　　　　// 3:准备发送请求的数据:url
　　　　var url = this.href;
　　　　//4:调用XMLHttpRequest对象的open方法
　　　　request.open("GET", url);
　　　　//5:调用XMLHttpRequest对象的send方法

　　　　request.send(null);
　　　　//6:为XMLHttpRequest对象添加Onreadystatechange响应函数
　　　　request.onreadystatechange = function() {
　　　　　　//判断响应是否完成:XMLHttpRequest的readyState的属性值为4的时候
　　　　　　// alert(request.readyState);
　　　　　　if(request.readyState == 4) {
　　　　　　// 判断响应是否可用，XMLHttpRequest的status的属性值为200的时候

　　　　　　　　　if(request.status == 200 || request == 304){
　　　　　　　　　　//8:打印响应结果
　　　　　　　　　　alert(request.responseText);
　　　　　　　　}

　　　　　　}
　　　　}
　　return false; //保证不会调转啊，取消点击的默认行为
　　};
}
</script>
</head>

<body>
<a href="helloAjax.txt">helloAjax</a>
</body>

</html>

上述实现默认a链接不跳转，get方法读取hello_world.txt内部内容

*POST：加 request.setRequestHeader("ContentType","application/x-www-form-urlencoded");

1、读取html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
　　<title>显示名人信息</title>
　　<style type="text/css">
　　　　*{ font-family:"微软雅黑"; font-size:15pt; } a{ color:#ABABAF; } h2,h3{ color:green; }
　　</style>
<script type="text/javascript">
　　window.onload=function(){
　　　　var aNodes=document.getElementsByTagName("a");
　　　　for(var i=0;i<aNodes.length;i++){
　　　　　　aNodes[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){ //直接将返回的数据插入到页面
　　　　　　　　　　　　document.getElementById( "details").innerHTML=request.responseText;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　　　return false;
　　　　}
　　}
</script>
</head>

</html>

2、读取xml

if(request.status==200){
/*
当数据传输格式变为xml的时候，我们应该先接收到数据，再解析数据，然后将解析到的数据，动态的创建
html元素，再将这些html元素加在div中
*/
var result=request.responseXML;

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

var name_h2=document.createElement("h2");
name_h2.appendChild(document.createTextNode(name));
var studentId_h3=document.createElement("h3");
studentId_h3.appendChild(document.createTextNode(studentId));
var param_h3=document.createElement("h3");
param_h3.appendChild(document.createTextNode(param));

var details=document.getElementById("details");
details.innerHTML="";
details.appendChild(name_h2);
details.appendChild(studentId_h3);
details.appendChild(param_h3);
}