Ajax入门

发布时间：2020-12-15 21:39:03 所属栏目：百科来源：网络整理

导读：第一个测试程序： htmltitle完整的使用XMLHttpRequest加载文档的例子/titleheadscript 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_INTERACT

第一个测试程序：

<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>

学会重构：

/*
 *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,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,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!"
	    +"nnreadyState:"+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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!