ajax与phpweb开发(chat)03.docVIP

（12）讲述完这些之后，现在看一下这个应用程序的运行情况。在浏览器地址栏中输入http://localhost/ajax/chat/index.html，看一下聊天窗口开始时的样子，如图5.3所示。 图5.3 聊天窗口 可以观察到默认情况下消息的颜色是黑色（RGB代码为#000000）。在图5.3所示中，可以看到默认的随机名字是Guest91。当初始加载这个聊天窗口时，所有先前发送的消息都会显示出来。可以简单地在调色板图片上单击一下喜欢的颜色，就可以改变消息的颜色。 程序说明 从技术上讲，这个应用程序是分成两个小程序来构建最终解决方案的： · 聊天应用程序； · 选择颜色应用程序。 聊天应用程序实现了发送和接收消息的基本功能。每个用户可以选择昵称并发送消息。包含所有发送消息的聊天窗口是通过从服务器异步接收的消息来更新的。 使用调色板来让用户为他们写的文本选择颜色，这个调色板容纳了整个色谱。当单击调色板时，鼠标坐标被发送到服务器，即可获取颜色代码。 如果分析一下代码，细节就会变得很明了。先来看一下index.html文件。这个脚本惟一让人感兴趣的就是用DHTML实现了滚动区。关于滚动的一些信息可以在http://www.dyn- / dhtml/scroll/中找到。基本上，让页面的一部分带一个滚动条在旁边的方法就是一层嵌套在另一层里面。在我们的示例中，div scroll和它的内层就使用了这个技巧。 外层是scroll，它有固定的宽度和高度，而且最有用的属性就是overflow。一般来说，一个大块框的内容受该框内容边缘的限制。在某些情况下，一个框会溢出，即它的内容部分或者整个位于框外。在CSS中，这个属性说明了当一个元素溢出它的范围后会发生什么。要获取更多细节，请访问/TR/REC-CSS2/visufx.html，以查看overflow的定义。 现在已经定义了大块框以及当其内容超出范围时会发生什么，我们可以轻松地猜测到大块框的内部内容最终会超出框的大小。内部内容包括了聊天中写的消息。 下一步，我们转移到包含了应用程序的JavaScript部分的文件chat.js。 整个文件可以被分成两部分：一部分处理选择颜色，另一部分处理聊天消息。 我们先由选择颜色开始。这部分作为开始，也许看起来很难证明它是比较容易实现的。我们要先有一个整体处理过程的全局概念。首先我们得有一个调色板图片，它包含了可见颜色的整个色谱。PHP有两个帮助我们寻找所选颜色RGB代码的函数——imagecreatefrompng和imagecolorat。当讲到get_color.php页时我们将看到更多关于这两个函数的内容。现在只需要知道这两个函数允许我们获得图片上坐标x和y位置上的像素的RGB代码。像素的位置是通过getMouseXY函数获取的。 getColor函数获取用户单击调色板图片时所选颜色的RGB代码。首先它从事件中获取鼠标的坐标，然后计算已经产生的单击事件的坐标在图片上的相对值。它是这样做到的：从getMouseXY函数获取的位置减去窗口中td元素和td位置里的图片的相对位置。在计算出相对坐标作为offsetx和offsety后，服务器页将会返回被选颜色的RGB代码。HTTP请求对象状态的改变是由handleGettingColor函数处理的。 handleGettingColor函数检查到发往服务器的请求完成且没有发生错误时，调用changeColor函数。这个函数将把从服务器返回的RGB代码置于文本域并用给定代码着色样例文本。 现在来看看聊天应用程序是如何工作的。 默认情况下，当页初始化并且onblur事件发生时，checkUsername函数被调用。这个函数生成一个强制的用户名确保它不为空。 按下发送按钮时，sendMessage函数被调用。这个函数将当前消息增加到要发送到服务器的消息队列中。在加到队列前通过调用trim函数先把消息头尾空格去掉，并用encodeURIComponent来编码消息，确保它成功进入队列。 当keydown事件发生时调用handleKey函数。当按下Enter键时，sendMessage函数被调用，这样就能确保按下发送按钮和在消息框控制内按下Enter键有同样的效果。 deleteMessage函数将删除加入发送到服务器的消息。requestNewMessages函数负责发送聊天消息。它从队列中获取一个消息然后发送给服务器。HTTP请求对象状态的改变由handleReceivingMessages函数处理。 handleReceivingMessages检查到发往服务器的请求完成并且没有错误发生时，readMessages函数会调用。 readMessages函数检查是否其他人删除了所有聊天消息，如果是这样，客户