ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ajax</title>
</head>
<body>
<h1>Ajax</h1>
<div id="new"></div>
<script src="scripts/getHTTPObject.js"></script>
<script src="scripts/getNewContent.js"></script>
</body>
</html>
example.txt
This was loaded asynchronously!
getHTTPObject.js
//创建XMLHTTP对象
function getHTTPObject() {
if (typeof XMLHttpRequest == "undefined") {
XMLHttpRequest = function () {
try {
return new ActiveXObject("Msxml.XMLHTTP.6.0");
} catch (e) {}
try {
return new ActiveXObject("Msxml.XMLHTTP.3.0");
} catch (e) {}
try {
return new ActiveXObject("Msxml.XMLHTTP");
} catch (e) {}
return false;
}
}
return new XMLHttpRequest();
}
getNewContent.js
function getNewContent() {
var request = getHTTPObject();
if (request) {
request.open( "GET", "example.txt", true);//true 是否异步处理
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById("new").appendChild(para);
}
}
request.send(null);
} else {
alert("Sorry! Your browser doesn't support XMLHttpRequest");
}
}
window.onload = getNewContent;