第一个测试程序：
<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,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>
分享到：
相关推荐
在这个"Ajax入门例子项目"中，我们将深入探讨Ajax的基础概念、工作原理以及如何创建简单的Ajax应用。 1. Ajax基础概念： - 异步：Ajax的主要特性是异步通信，意味着用户在请求发送后可以继续浏览网页，而无需等待...
**Ajax入门经典源代码概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交互，结合XML或其他...
### AJAX入门知识点详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一点，从而为用户...
《ASP.NET 2.0 AJAX入门经典》这本书很可能包含了多个示例，演示如何使用AJAX技术来增强ASP.NET 2.0应用程序的交互性。这些实例可能涵盖用户界面改进、数据异步加载、实时验证等多个场景，帮助读者掌握实际开发技巧...
ASP.NET_AJAX入门系列：概述.doc ASP.NET_AJAX_在Web开发中的应用.doc ASP.NET_AJAX入门系列：Timer控件简单使用.doc ASP.NET_AJAX入门系列：UpdateProgress控件简单介绍.doc ASP.NET_AJAX入门系列：使用...
**Ajax入门：无刷新技术与JavaScript中的Ajax** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面，使得用户...
ASP.NET AJAX是一个完整的开发框架，其服务器端编程模型相对于客户端编程模型较为简单，而且容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外...
Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax允许网页与服务器之间进行交互，实现数据的动态加载，提高了用户体验。 在...
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个...通过阅读这份"ajax入门教程PDF"，初学者将能够快速理解Ajax的工作方式，掌握基本的Ajax编程技能，从而在实际项目中提升网页的交互性和动态性。
总的来说，这个"AJAX入门实例"旨在帮助初学者理解AJAX的基本概念和工作流程，以及如何在ASP.NET环境中实现它。通过学习这个实例，你可以掌握创建异步Web应用的基本技巧，提高用户体验，并为后续更复杂的AJAX应用场景...
**Ajax入门**通常涉及以下几个关键概念： 1. **XMLHttpRequest对象**：它是Ajax的核心，用于在后台与服务器进行通信。创建XMLHttpRequest对象后，可以通过它的open()方法设置请求类型（GET或POST）、URL以及是否异步...
**Ajax 入门经典——掌握Ajax核心技术** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，极大地...
在《Ajax入门教程》中，可能包含了一系列经典的小例子，比如： 1. **实时搜索建议**：用户在输入框中输入字符时，利用Ajax动态向服务器发送请求，获取匹配的搜索建议，并即时显示在下拉框中。 2. **无刷新分页**：...
通过这个简单的Ajax入门实例，你可以理解如何利用Ajax实现页面内容的异步加载。随着经验的增长，还可以学习更高级的技巧，如使用jQuery的$.ajax()函数、Promise或现代的fetch API，以及错误处理和进度回调等。
**Ajax入门视频教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过XMLHttpRequest对象与服务器进行异步数据交互，从而实现...
### 前端技术AJAX入门精讲 #### 一、AJAX概述 **AJAX**（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现...
**Ajax入门视频教程详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得Web应用程序能够更快、更高效地运行，提升了用户体验，因为它允许...
ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典
ajax入门书籍 ajax入门到精通 好用又源码