1.数据源为text
test1.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax Demo</title>
<script>
window.onload = function(){
//1.获取a1节点,并注册其绑定事件
document.getElementById("a1").onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求数据:url
var url = this.href + "?time=" + new Date(); //加上时间戳可以有效避免缓存,让每一次请求所得的url唯一
var method = "GET";
//5.调用XMLHttpRequest对象 open方法
request.open(method,url);
//6.调用XMLHttpRequest对象 send方法
request.send(null);
//7.为XMLHttpRequest对象 添加onreadystatechange事件
request.onreadystatechange = function(){
//8.判断响应是否完成:XMLHttpRequest对象的readyState属性为4的时候
if(request.readyState == 4){
//9.判断响应是否可用:XMLHttpRequest对象的status属性为200的时候
if(request.status == 200 ||request.status == 304){
//10.打印响应结果:responseText
alert(request.responseText);
}
}
}
//2.取消a1节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href = "hello.txt" id = "a1">hello ajax</a>
</body>
</html>
2.数据源为html
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>htmlDemo</title>
<script>
window.onload = function()
{
var aNodes = document.getElementsByTagName("a");
for(var i = 0 ; i < aNode.length;++i)
{
aNodes[i].onclick = function()
{
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href + "?time" + new Date();
request.open(method,url);
request.send(null);
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200 || request.status == 304)
{
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>HTML</h1>
<ul>
<li>
<a href = "files/1.html">1.html</a>
</li>
<li>
<a href = "files/2.html">2.html</a>
</li>
<li>
<a href = "files/3.html">3.html</a>
</li>
</ul>
<div id = "details"></div>
</body>
</html>
3.数据源为json
test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonDemo</title>
<script>
window.onload = function()
{
document.getElementById("a1").onclick = function()
{
var request = new XMLHttpRequest();
var url = this.href + "?time" + new Date();
var method = "GET";
request.open(method, url);
request.send(null);
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200 ||request.status ==304)
{
var result = request.responseText;
var obj = eval("("+ result+")"); //json必须这样解析
var pNode1 = document.createElement("p");
pNode1.appendChild(document.createTextNode(obj.person.name));
var pNode2 = document.createElement("p");
pNode2.appendChild(document.createTextNode(obj.person.password));
var pNode3 = document.createElement("p");
pNode3.appendChild(document.createTextNode(obj.person.website));
var div = document.getElementById("details");
div.innerHTML = "";
div.appendChild(pNode1);
div.appendChild(pNode2);
div.appendChild(pNode3);
}
}
}
return false;
}
}
</script>
</head>
<body>
<h1>JSON</h1>
<a href = "files/1.js" id = "a1" >1.js</a>
<div id = "details"></div>
</body>
</html>
4.数据源为XML
test4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xmlDemo</title>
<script type="text/javascript">
window.onload = function()
{
document.getElementById("a1").onclick = function()
{
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href + "?time" + new Date();
request.open(method, url);
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.结果不能直接使用,必须先创建节点,再加入节点
/*目标格式为<h1>xixixixixixix</h1>
<p>yoyoyoyoyoyo</p>*/
var name = result.getElementsByTagName("name")[0].childNodes[0].nodeValue;
var password = result.getElementsByTagName("password")[0].childNodes[0].nodeValue;
var website = result.getElementsByTagName("website")[0].childNodes[0].nodeValue;
var h1Node = document.createElement("h1");
h1Node.appendChild(document.createTextNode(name));
var pNode = document.createElement("p");
pNode.appendChild(document.createTextNode(password));
var pNode2 = document.createElement("p");
pNode2.appendChild(document.createTextNode(website));
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h1Node);
detailsNode.appendChild(pNode);
detailsNode.appendChild(pNode2);
}
}
}
return false;
}
}
</script>
</head>
<body>
<h1>XML</h1>
<a href = "files/1.xml" id = "a1">1.xml</a>
<div id = "details"></div>
</body>
</html>
5.jQuery使用ajax
$.ajax({
url: "http://www.hzhuti.com", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
$.get(url, param, function(dom) { $('div.get').append(dom) }) ;
$.post('Server.aspx', { id: idValue }, function (text, status) { alert(text); });