SitePoint Blogs XMLHttpRequest and Javascript Closures

karoc 2006-04-21

展開全文

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2	<html>
3	<head>
4	<script type="text/javascript">
5	<!--
6	// Mozilla only implementation!
7
8	// Constructor for generic HTTP client
9	function HTTPClient() {};
10
11	// Add methods and properties as array
12	HTTPClient.prototype = {
13	url: null,
14
15	// Instance of XMLHttpRequest
16	xmlhttp: null,
17
18	// Used to make sure multiple calls are not placed
19	// with the same client object while another in progress
20	callinprogress: false,
21
22	// The user defined handler - see MyHandler below
23	userhandler: null,
24
25	init: function(url) {
26	this.url = url;
27	this.xmlhttp = new XMLHttpRequest();
28	},
29
30	// handler argument is a user defined object to be called
31	asyncGET: function (handler) {
32
33	// Prevent multiple calls
34	if (this.callinprogress) {
35	throw "Call in progress";
36	};
37
38	this.userhandler = handler;
39
40	// Open an async request - third argument makes it async
41	this.xmlhttp.open(‘GET‘,this.url,true);
42
43	// Have to assign "this" to a variable - not sure why can‘t use directly
44	var self = this;
45
46	// Assign a closure to the onreadystatechange callback
47	this.xmlhttp.onreadystatechange = function() {
48	self.stateChangeCallback(self);
49	}
50
51	// Send the request
52	this.xmlhttp.send(null);
53	},
54
55	stateChangeCallback: function(client) {
56	switch (client.xmlhttp.readyState) {
57
58	// Request not yet made
59	case 1:
60	try {
61	client.userhandler.onInit();
62	} catch (e) { /* Handler method not defined */ }
63	break;
64
65	// Contact established with server but nothing downloaded yet
66	case 2:
67	try {
68	// Check for HTTP status 200
69	if ( client.xmlhttp.status != 200 ) {
70	client.userhandler.onError(
71	client.xmlhttp.status,
72	client.xmlhttp.statusText
73	);
74
75	// Abort the request
76	client.xmlhttp.abort();
77
78	// Call no longer in progress
79	client.callinprogress = false;
80	}
81	} catch (e) {
82	/* Handler method not defined */
83	}
84	break;
85
86	// Called multiple while downloading in progress
87	case 3:
88	// Notify user handler of download progress
89	try {
90	// Get the total content length
91	// -useful to work out how much has been downloaded
92	try {
93	var contentLength =
94	client.xmlhttp.getResponseHeader("Content-Length");
95	} catch (e) {
96	var contentLength = NaN;
97	}
98
99	// Call the progress handler with what we‘ve got
100	client.userhandler.onProgress(
101	client.xmlhttp.responseText,
102	contentLength
103	);
104
105	} catch (e) { /* Handler method not defined */ }
106	break;
107
108	// Download complete
109	case 4:
110	try {
111	client.userhandler.onLoad(client.xmlhttp.responseText);
112	} catch (e) {
113	/* Handler method not defined */
114	} finally {
115	// Call no longer in progress
116	client.xmlhttp.callinprogress = false;
117	}
118	break;
119	}
120	}
121	}
122
123	// A user defined handler to response to the XMLHTTPRequest
124	var MyHandler = {
125	onInit: function() {
126	echo("About to send request<br>");
127	},
128	onError: function(status,statusText) {
129	echo("Error: "+status+": "+statusText+"<br>");
130	},
131	onProgress: function(responseText,length) {
132	echo("Downloaded "+responseText.length+" of "+length+"<br>");
133	},
134	onLoad: function(result) {
135	echo("<pre>"+result+"</pre>");
136	},
137	}
138
139	// Just a function to help display results
140	function echo(string) {
141	document.getElementById("results").innerHTML += string;
142	}
143
144	// Invoke the client
145	function getPage() {
146	// Modify this to some page
147	var url = "http://localhost/test/test.txt";
148	var client = new HTTPClient();
149	client.init(url);
150
151	try {
152	client.asyncGET(MyHandler);
153	} catch (e) {
154	alert(e);
155	}
156	echo("Async request so still able to do stuff here<br>");
157	}
158	</script>
159	</head>
160	<body>
161	<a href="javascript:getPage();">getPage</a>
162	<div id="results">
163	</div>
164	</body>
165	</html>