第一个测试程序：
<html>
<title>完整的使用XMLHttpRequest加载文档的例子</title>
<head>
<script type='text/javascript'>
var req=null;
var console=null;
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;
function sendRequest(_url,_params,_httpMethod){
_httpMethod = _httpMethod || 'GET';
req = initXMLHTTPRequest();
if(req){
req.onreadystatechange = onReadyState;
req.open(_httpMethod,_url,true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.send(_params);
}
}
function initXMLHTTPRequest(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function onReadyState(){
var ready=req.readyState;
var data=null;
if (ready==READY_STATE_COMPLETE){
data=req.responseText;
}else{
data="loading...["+ready+"]";
}
toConsole(data);
}
function toConsole(data){
if (console!=null){
var newline=document.createElement("div");
console.appendChild(newline);
var txt=document.createTextNode(data);
newline.appendChild(txt);
}
}
window.onload=function(){
console=document.getElementById('console');
sendRequest("data.txt");
}
</script>
</head>
<body>
<div id='console'></div>
</body>
</html>
学会重构：
ContentLoader .js
/*
*url-loading object and a request queue built on top of it
*/
/* namespacing object */
var Darkness = new Object();
Darkness.READY_STATE_UNINITIALIZED=0;
Darkness.READY_STATE_LOADING=1;
Darkness.READY_STATE_LOADED=2;
Darkness.READY_STATE_INTERACTIVE=3;
Darkness.READY_STATE_COMPLETE=4;
/*--- content loader object for cross-browser requests ---*/
Darkness.ContentLoader = function(url,onload,onerror,method,params,contentType){
//this.url = url;
this.req=null;
this.onload = onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadXMLDoc(url,method,params,contentType);
}
Darkness.ContentLoader.prototype = {
initXMLHTTPRequest:function(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
},
onReadyState: function(){
var req = this.req;
var ready = req.readyState;
if (ready == Darkness.READY_STATE_COMPLETE){
var httpStatus = req.status;
if (httpStatus==200 || httpStatus==0){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
},
loadXMLDoc: function(url,method,params,contentType){
method = method ||"GET";
if (!contentType && method=="POST"){
contentType='application/x-www-form-urlencoded';
}
this.req = this.initXMLHTTPRequest();
if (this.req){
try{
var loader = this;
this.req.onreadystatechange = function(){
loader.onReadyState.call(loader);
}
this.req.open(method,url,true);
if (contentType){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}catch (err){
this.onerror.call(this);
}
}
},
defaultError:function(){
alert("error fetching data!"
+"\n\nreadyState:"+this.req.readyState
+"\nstatus: "+this.req.status
+"\nheaders: "+this.req.getAllResponseHeaders());
}
}
接着来看一下重构后页面中的代码，优点自己领悟哦：
<html>
<title>完整的使用XMLHttpRequest加载文档的例子-Refactor</title>
<head>
<script src="ContentLoader.js" type="text/javascript"></script>
<script type='text/javascript'>
var console=null;
function toConsole(){
var data = this.req.responseText;
if (console!=null){
var newline=document.createElement("div");
console.appendChild(newline);
var txt=document.createTextNode(data);
newline.appendChild(txt);
}
}
window.onload=function(){
console=document.getElementById('console');
// 仅使用这一行代码，传入请求的url及回调函数，
// 就可完成一个简单的Ajax操作，重构真的可以带来很多好处哦
new Darkness.ContentLoader('data.txt',toConsole);
}
</script>
</head>
<body>
<div id='console'></div>
</body>
</html>data.txt
Welcome to the sky of darkness!
