Ajax解决多余刷新的两种方法(总结)
控制器Servlet则提供了简单的改变：
对于Ajax系统而言，服务器响应无须是整个页面内容，可以仅是
必需的数据，控制器不能将数据请求转发到jsp页面。
此时控制器有两个选择：
1、直接生成简单的响应数据。
在这种模式下，Servlet直接通过response获取页面输出流，通过
输出流生成字符响应。
package pers.zkr.chat.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import pers.zkr.chat.service.ChatService;
@WebServlet(urlPatterns={"/chat.do"})
public class ChatServlet extends HttpServlet {
@Override
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String msg=request.getParameter("chatMsg");
System.out.println(msg);
if(msg!=null&&!msg.equals("")){
String user=(String)request.getSession().getAttribute("user");
System.out.println(user+"user");
ChatService.instance().addMsg(user, msg);
}
//设置响应内容的类型
<strong>response.setContentType("text/html;charset=utf-8");
// 获取页面输出流
PrintWriter out = response.getWriter();
//直接生成响应
out.println(ChatService.instance().getMsg());</strong>
request.setAttribute("msg",ChatService.instance().getMsg());
forward("/chat.jsp", request , response);
}
private void forward(String url, HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.getRequestDispatcher(url)
.forward(request , response);
}
}
2、转向一个简单的jsp使用JSP页面生成简单的响应。
控制器将请求转发到另外的JSP页面，而JSP页面仅仅负责输出聊天信息
在这里需要一个jsp页面来接收控制器发来的数据，也是服务器的响应文本，而在
原来的页面，只需：
1）创建XMLHttpRequest对象
2) 发送请求
3）接收服务器的响应
package org.crazyit.chat.web;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import org.crazyit.chat.service.*;
/**
* Description:
* <br/>网站: <a href=http://www.jb51.net>我们</a>
* <br/>Copyright (C), 2001-2014, Yeeku.H.Lee
* <br/>This program is protected by copyright laws.
* <br/>Program Name:
* <br/>Date:
* @version 1.0
*/
@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);
}
// 将全部聊天信息设置成request属性
<strong>request.setAttribute("chatList" ,
ChatService.instance().getMsg());</strong>
// 转发到chatreply.jsp页面
forward("/chatreply.jsp" , request , response);
}
// 执行转发请求的方法
private void forward(String url , HttpServletRequest request,
HttpServletResponse response)throws ServletException,IOException
{
// 执行转发
request.getRequestDispatcher(url)
.forward(request,response);
}
}
接收数据的页面
<%@ page contentType="text/html;charset=GBK" errorPage="error.jsp"%>
<%-- 输出当前的聊天信息 --%>
${requestScope.chatList}
html页面
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>聊天页面</title>
</head>
<body onload="sendEmptyRequest();">
<div style="width:780px;border:1px solid black;text-align:center">
<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>
</div>
<script type="text/javascript">
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)
{
}
}
}
}
// 发送请求函数
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.send("chatMsg=" + chatMsg);
}
//定时请求服务器
function sendEmptyRequest()
{
// 完成XMLHttpRequest对象的初始化
createXMLHttpRequest();
// 定义发送请求的目标URL
var url = "chat.do";
// 发送POST请求
XMLHttpReq.open("POST", url, true);
// 设置请求头-发送POST请求时需要该请求头
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定XMLHttpRequest状态改变时的处理函数
XMLHttpReq.onreadystatechange = processResponse;
// 发送请求,，不发送任何参数
XMLHttpReq.send(null);
// 指定0.8s之后再次发送请求
setTimeout("sendEmptyRequest()" , 800);
}
// 处理返回信息函数
function processResponse()
{
// 当XMLHttpRequest读取服务器响应完成
if (XMLHttpReq.readyState == 4)
{
// 服务器响应正确（当服务器响应正确时，返回值为200的状态码）
if (XMLHttpReq.status == 200)
{
// 使用chatArea多行文本域显示服务器响应的文本
document.getElementById("chatArea").value
= XMLHttpReq.responseText;
}
else
{
// 提示页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
function enterHandler(event)
{
// 获取用户单击键盘的“键值”
var keyCode = event.keyCode ? event.keyCode
: event.which ? event.which : event.charCode;
// 如果是回车键
if (keyCode == 13)
{
sendRequest();
}
}
</script>
</body>
</html>
以上这篇Ajax解决多余刷新的两种方法(总结)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
纯JS实现AJAX局部刷新功能
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. //
-
AJAX如何实现无刷新登录功能
最近学习了如何实现无刷新登录,大体的效果如下(界面比较丑,请自行忽略....): 点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名. 第一步: 首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用. 打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-m
-
ajax无刷新评论功能
这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的"没有填写留言内容"都会弹出 请填写留言内容,当用户填写信息的会在右下角显示当前留言的字数. 下面是javascript的代码 //去掉左右尖括号 并用去掉空格后的字符串替代显示 function replaceBrackets(id) { var inputValue = $("#" + id).val(); while (inputValue.indexOf(&quo
-
ajax的分页查询示例（不刷新页面）
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 <div> <input type="text" id="key" /> //输入查询字的文本框 <input type="but
-
Ajax解决多余刷新的两种方法(总结)
控制器Servlet则提供了简单的改变: 对于Ajax系统而言,服务器响应无须是整个页面内容,可以仅是 必需的数据,控制器不能将数据请求转发到jsp页面. 此时控制器有两个选择: 1.直接生成简单的响应数据. 在这种模式下,Servlet直接通过response获取页面输出流,通过 输出流生成字符响应. package pers.zkr.chat.web; import java.io.IOException; import java.io.PrintWriter; import javax.s
-
jQuery+ajax实现局部刷新的两种方法
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(). 第一种: 当某几个页面都有相同的头部.导航.底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载.上代码. jq-load.html: <!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </h
-
jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'
-
JqueryMobile动态生成listView并实现刷新的两种方法
JqueryMobile动态生成listView并实现刷新的两种方法 复制代码 代码如下: function queryEntfernungen(tx, results) alert("This Hello works"); var len = results.rows.length; // This For works fine for (var i = 0; i < len; i++) { $("div[data-role=content
-
django ajax发送post请求的两种方法
django ajax发送post请求的两种方法,具体内容如下所述: 第一种:将csrf_token放在from表单里 <script> function add_competion_goods() { $.ajax({ url: "{% url 'add_competition_goods' %}", type: "POST", dataType: "json", data: $('#add_competition_goods_fr
-
apache+php完美解决301重定向的两种方法
幸好有301重定向能有效解决这样的问题.正如月光博客这篇文章中说的, 301重定向可促进搜索引擎优化效果 从搜索引擎优化角度出发,301重定向是网址重定向最为可行的一种办法.当网站的域名发生变更后,搜索引擎只对新网址进行索引,同时又会把旧地址下原有的外部链接如数转移到新地址下,从而不会让网站的排名因为网址变更而收到丝毫影响.同样,在使用301永久性重定向命令让多个域名指向网站主域时,亦不会对网站的排名产生任何负面影响. 关于301重定向的更多内容,大家不妨Google一下.本文只介绍实现方法啦!
-
Ajax中解析Json的两种方法对比分析
eval(); //此方法不推荐 JSON.parse(); //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name":"周星驰","age":23 }' var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法 var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方
-
压缩aspx页面删除多余空格的两种方法
两种方法实现: 1)一行一行的读取aspx文件然后处理 2)一次性读取aspx文件然后处理 处理逻辑: 替换" "为" "(将两个空格替换为一个空格),将所有的换行符替换为空字符(极限压缩) 注意事项: 1)一行一行处理在极限压缩的情况下需要额外的处理服务端控件换行的情况,比如 复制代码 代码如下: Line 1:<asp:Label runat="server" Line 2: ID="lb1" .... L
-
django中使用jquery ajax post数据出现403错误的解决办法(两种方法)
在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;
-
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是否为空 $("#dg").datagrid