index.php

ajax修炼之道源代码。很难下到的。现在奉献给大家。

							<option style="color: #87CEEB; background-color: #87CEEB;">SkyBlue</option>
							<option style="color: #6A5ACD; background-color: #6A5ACD;">SlateBlue</option>
							<option style="color: #708090; background-color: #708090;">SlateGray</option>
							<option style="color: #FFFAFA; background-color: #FFFAFA;">Snow</option>
							<option style="color: #00FF7F; background-color: #00FF7F;">SpringGreen</option>
							<option style="color: #4682B4; background-color: #4682B4;">SteelBlue</option>
							<option style="color: #D2B48C; background-color: #D2B48C;">Tan</option>
							<option style="color: #008080; background-color: #008080;">Teal</option>
							<option style="color: #D8BFD8; background-color: #D8BFD8;">Thistle</option>
							<option style="color: #FF6347; background-color: #FF6347;">Tomato</option>
							<option style="color: #40E0D0; background-color: #40E0D0;">Turquoise</option>
							<option style="color: #EE82EE; background-color: #EE82EE;">Violet</option>
							<option style="color: #D02090; background-color: #D02090;">VioletRed</option>
							<option style="color: #F5DEB3; background-color: #F5DEB3;">Wheat</option>
							<option style="color: #FFFFFF; background-color: #FFFFFF;">White</option>
							<option style="color: #F5F5F5; background-color: #F5F5F5;">WhiteSmoke</option>
							<option style="color: #FFFF00; background-color: #FFFF00;">Yellow</option>
							<option style="color: #9ACD32; background-color: #9ACD32;">YellowGreen</option>
					</select>
				</td>
			</tr>
		</table>

		<script type="text/javascript">

		<?= NAJAX_Client::register('Chat', 'index.php') ?>


		var chatCache = null;

		var chatRefresh = false;

		window.onload = function() {

			var userNick = document.getElementById('userNick');

			var userTime = new Date();

			userNick.value += userTime.getHours();
			userNick.value += userTime.getMinutes();
			userNick.value += userTime.getSeconds();

			var message = document.getElementById('message');

			message.onkeydown = function(e) {

				if (typeof(e) == 'undefined') {

					e = event;
				}

				var key = (e.keyCode ? e.keyCode : e.which);

				if (key == 13) {

					var userNick = document.getElementById('userNick');

					var userColor = document.getElementById('userColor');

					var body = this.value.replace(/^\s+/i, '').replace(/\s+$/i, '');

					if (body.length < 1) {

						return false;
					}

					var nick = userNick.value.replace(/^\s+/i, '').replace(/\s+$/i, '');

					if (nick.length < 1) {

						nick = 'Guest';
					}

					var color = userColor.options[userColor.selectedIndex].text;

					message.value = '';

					message.focus();

					var chatServer = new Chat();

					chatServer.addMessage(body, nick, color, function(result) {

						refresh();
					});
				}

				return true;
			}

			message.focus();

			refresh();

			setInterval('refresh()', 1000);
		}

		function refresh()
		{
			if (chatRefresh) {

				return false;
			}

			chatRefresh = true;

			var chatServer = new Chat();

			chatServer.getContents(function(result) {

				if (result != false) {

					var newContent = false;

					if (chatCache == null) {

						newContent = true;

					} else {

						if (result.length != chatCache.length) {

							newContent = true;

						} else {

							for (var iterator = 0; iterator < result.length; iterator ++) {

								if (result[iterator] != chatCache[iterator]) {

									newContent = true;

									break;
								}
							}
						}
					}
				}

				if (newContent) {

					chatCache = result;

					var chatBox = document.getElementById('chatBox');

					var content = '';

					for (var iterator = 0; iterator < result.length; iterator ++) {

						content += result[iterator];
					}

					chatBox.innerHTML = content;

					chatBox.scrollTop = iterator * 100;
				}

				chatRefresh = false;
			});
		}

		najax.setErrorHandler(function(error) {

			alert('Error:\n' + error.message);

			chatRefresh = false;
		});

		</script>
	</body>
</html>