获取XMLHttpRequest的步骤
step 1: trigger an event to call a javascript function
step 2. create XMLHttpRequest Object
step 3. open a web resource
step 4. register a callback on xhr
step 5. send request
举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Ajax Program Using XHR</title>
<script type="text/javascript">
var xhr = null;
function getData(){
//step 2. create XMLHttpRequest Object
xhr = createXhr();
//step 3. open a web resource
xhr.open("GET","data.txt");
//step 4. register a callback on xhr
xhr.onreadystatechange = display;
//step 5. send request
xhr.send(null);
}
//handle response
function display(){
if(xhr.readyState == 4){
if(xhr.status == 200){ //end in success
document.getElementById("data").innerHTML
= xhr.responseText;
}else{
alert("Error: " + xhr.status + " " + xhr.statusText);
}
}else{
document.getElementById("data").innerHTML
= "loading...";
}
}
function createXhr(){
if(window.ActiveXObject){ //IE browser
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //other browsers support ajax
return new XMLHttpRequest();
}else{ //browsers don't support ajax
throw new Error("Does not support ajax program");
}
}
</script>
</meta></head>
<!--step 1: trigger an event to call a javascript function -->
<body onload="getData()">
<div id="data"></div>
</body>
</html> |
Recent Comments