Ajax解决聊天室问题

前端之家收集整理的这篇文章主要介绍了Ajax解决聊天室问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax的核心是JavaScript对象的XMLHttpRequest。它提供了异步发送请求的能力。简而言之,使用XMLHttpRequest,可以通过JavaScript向服务器发送请求,并能够处理服务器响应,避免阻塞用户的动作。通过使用XMLHttpRequest对象,浏览器通过客户端脚本与服务器交换数据,而Web页面无须频繁的重新加载,Web页面内容也由客户端脚本动态更新。

整个Ajax应用的工作过程如下:

1、JavaScript脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时,既可以发送GET请求,也可以发送POST请求。

2、JavaScript脚本使用XMLHttpRequest对象解析服务器响应数据。

3、JavaScript脚本通过DOM动态更新HTML页面。也可以为服务器响应数据增加CSS样式表,在当前网页中的某个部分加以显示

下面一个小的例子显示登录信息使用Ajax完成:

首页聊天室代码

<h3>聊天页面</h3>
<p>
<textarea id="chatArea" name="chatArea" cols="90"
	rows="30" readonly="readonly"></textarea>
</p>
<div align="center">
	<input id="chatMsg" name="chatMsg" type="text"	size="90" onkeypress="enterHandler(event);"/>
	<input type="button" name="button" value="提交"	onclick="sendRequest();"/>
</div>
首先要创建XMLHttpRequest对象,使用XMLHttpRequest对象,必须先创建XMLHttpRequest对象,创建XMLHttpRequest的代码如下:
var input = document.getElementById("chatMsg");
input.focus();
var XMLHttpReq;
// 创建XMLHttpRequest对象
function createXMLHttpRequest()
{
	if(window.XMLHttpRequest)
	{ 
		// DOM 2浏览器
		XMLHttpReq = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// IE浏览器
		try
		{
			XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
			}
		}
	}
}

上面的程序中的代码可以在Internet Explorer、Firfox、Opera等浏览器中创建XMLHttpRequest对象。因为XMLHttpRequest对象在不同的浏览器中实现方式不同,因而在不同的浏览器中创建XMLHttpRequest对象的方式也略有不同。

一旦XMLHttpRequest对象创建成功,系统可以使用XMLHttpRequest发送请求,XMLHttpRequest请求与传统的请求不同,传统的发送请求是提交表单,或者请求新的网络页面——浙江导致浏览器重新发送请求,重新加载新的页面

而在XMLHttpRequest发送请求则通过JavaScript代码完成,这就避免了页面的刷新——这也是异步发送请求的核心。

XMLHttpRequest对象包含send方法用于发送请求。在发送请求之前,应先于请求的URL取得连接,XMLHttpRequest通过open方法打开与请求的URL连接,下面是使用XMLHttpRequest发送请求的JavaScript代码

// 发送请求函数
function sendRequest()
{
	// input是个全局变量,就是用户输入聊天信息的单行文本框
	var chatMsg = input.value;
	// 完成XMLHttpRequest对象的初始化
	createXMLHttpRequest();
	// 定义发送请求的目标URL
	var url = "chat.do";
	// 通过open方法取得与服务器的连接
	// 发送POST请求
	XMLHttpReq.open("POST",url,true);
	// 设置请求头-发送POST请求时需要该请求头
	XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	// 指定XMLHttpRequest状态改变时的处理函数
	XMLHttpReq.onreadystatechange = processResponse;
	// 清空输入框的内容
	input.value = "";
	// 发送请求,send的参数包含许多的key-value对。
	// 即以:请求参数名=请求参数值 的形式发送请求参数。
	XMLHttpReq<span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);">.send("chatMsg=" + chatMsg);</span>
<span style="font-family: Arial,255);"> }</span>
 
 

上面的程序第一行粗体字代码使用open方法打开与请求资源的连接,因为本系统采用POSt方式发送请求参数,因此在请求里增加了Content-Type请求头,并将该发送的请求头的值设为application/x-www-form-urlencoded,这是为了保证请求参数采用合适的格式发送。程序中的代码是发送POST请求的完整过程。

一般而言,使用XMLHttpRequest发送请求应按如下步骤进行:

1、使用open方法连接服务器URL

2、调用setRequestHeader方法为请求设置合适的请求头。根据不同的请求,可能需要设置不同的请求头。

3、制定回调函数。所谓回调函数就是用于检测XMLHttpRequest状态的函数(类似于事件监听器),当XMLHttpRequest的状态发生改变时,该回调函数将被触发而自动执行。

4、调用send方法发送请求。

通过上面的 程序中我们发现,在采用Ajax发送请求时,发送请求比传统的Web应用略显复杂。传统的Web应用发送请求有两种形式:

1、在浏览器的地址栏中输入请求的地址后按回车键发送GET请求。

2、提交表单发送POST或GET请求,具体发送何种请求取决于表单元素的method属性

上面的发送请求的方式都比较简单,基本无须编写任何程序代码。在改为使用Ajax请求后,需要先创建XMLHttpRequest对象。再使用该对象来发送异步请求。

// 处理返回信息函数
function processResponse()
{
	// 当XMLHttpRequest读取服务器响应完成
	if (XMLHttpReq.readyState == 4)
	{
		// 服务器响应正确(当服务器响应正确时,返回值为200的状态码)
		if (XMLHttpReq.status == 200)
		{
			// 使用chatArea多行文本域显示服务器响应的文本
			document.getElementById("chatArea").value 
				= XMLHttpReq.responseText;
		}
		else
		{
			// 提示页面不正常
			window.alert("您所请求的页面有异常。");
		}
	}
}

跳转到 chat.do的URL其实为Servlet页面代码如下:

@WebServlet(urlPatterns={"/chat.do"}) public class ChatServlet extends HttpServlet { public void service(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException { // 设置使用GBK字符集来解析请求参数 request.setCharacterEncoding("utf-8"); String msg = request.getParameter("chatMsg"); if ( msg != null && !msg.equals("")) { // 取得当前用户 String user = (String)request.getSession(true) .getAttribute("user"); // 调用ChatService的addMsg来添加聊天消息 ChatService.instance().addMsg(user,msg); } // 设置响应内容的类型 response.setContentType("text/html;charset=GBK"); // 获取页面输出流 PrintWriter out = response.getWriter(); // 直接生成响应 out.println(ChatService.instance().getMsg()); } }

整个Ajax过程就如上面所述,遇到具体问题,即可修改部分代码 原文链接:https://www.f2er.com/ajax/163377.html

猜你在找的Ajax相关文章