网上有比较多的教程来将如何实现ajax与servlet的交互了,这里这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题。

整个思路是:写个js函数,在里面使用XHR(ajax的教程)的open和send方法与服务器进行交互

我遇到的问题是将setRequestHeader的第二个参数设置错了,导致send发送的数据服务器没有接收到。正确的形式如下:

xmlHttp.open("POST","newProject",true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("newProjectName=" + project_name);

在服务器端使用servlet处理接收到的数据:

@WebServlet("/newProject")
public class ProjectNewServlet extends HttpServlet {
private static final long serialVersionUID = 1L; …… protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8"); String projectName = request.getParameter("newProjectName"); String fileContent = "";
……
}
}

然后就可以对接收到的数据进行处理了,处理完后还可以使用response发送数据给客户端,客户端在onreadystatechange绑定的函数里对数据进行处理,这些东西上面的教程有详解。servlet返回数据的部分代码如下:

response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(fileContent);
out.close();

fileContent为xml数据

事实上,这种使用原始的javascript和ajax有点麻烦,如果直接用jquery的.post或者.get或者.ajax方法,更方便更简单,js代码如下:

$.post("./newProject",{newProjectName:project_name},
function(data,status){
//alert("data:" + data + "status:" + status);
if(status == "success"){
var nodes = data.getElementsByTagName("project");
//alert(nodes[0].getAttribute("name"));
for(var i = 0;i < nodes.length;i ++){
$("#project_items").append("<option value=\"" + (i+1) + "\">" + nodes[i].getAttribute("name") + "</option>");
}
} });

"newProject"为上面的servlet的注解路径,data为servlet返回的xml数据。使用jquery省事很多。

ajax和servlet交互的更多相关文章

  1. ajax和servlet交互,表单日历插件,表单验证,form.js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

  2. ajax与servlet交互(通过JSON),JAVA的arraylist传到前端的方法

    所实现的效果:首先从前端(ajax)传参数给servlet,然后servlet经过处理,把arraylist类型的参数以JSON字符串的形式返回给前端(ajax),然后前端经过解析,把JSON字符串解 ...

  3. 实现AJAX的异步交互的步骤

    <input type="button" value="异步请求"id="btn"> <script> 实现ajax ...

  4. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  5. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  6. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  7. Servlet交互【重定向 与 请求分派】详解

    Servlet交互 在serlvet中,需要调用另外一个资源来对浏览器的请求进行响应,两种方式实现: 调用HttpServletResponse.sendRedirect 方法实现 重定向 调用Req ...

  8. SpringMVC之Ajax与Controller交互

    前面学习了拦截器,通过拦截器我们可以拦截请求,做进一步处理之后再往下进行,这里我们使用Ajax的时候会有一个问题就是会把js.css这些静态资源文件也进行了拦截,这样在jsp中就无法引入的静态资源文件 ...

  9. Ajax+Jsp+servlet+json技术的使用

    Ajax+Jsp+servlet+json技术的使用 在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...

随机推荐

  1. visual studio 2013 中常用的一些快捷键

    在编辑代码或者复制网上的代码段到VS2013中时,代码会显示的非常乱,这里便可以通过 vs2013中的快捷键进行自动对齐操作[ctrl+k+f],类似的快捷操作还有很多,在这里给大家总结一下,以提高编 ...

  2. tcp-ip-状态详解(转)

    TCP正常建立和关闭的状态变化     TCP连接的建立可以简单的称为三次握手,而连接的中止则可以叫做 四次握手.   建立连接   在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建 ...

  3. JMM & synchronized概述(转)

    根据Java语言规范中的说明,JVM系统中存在一个主内存(Main Memory),Java中所有的变量存储在主内存中,对于所有的线程是共享的(相当于黑板,其他人都可以看到的).每个线程都有自己的工作 ...

  4. Codeforces Round #366 (Div. 2) C Thor(模拟+2种stl)

    Thor 题意: 第一行n和q,n表示某手机有n个app,q表示下面有q个操作. 操作类型1:app x增加一条未读信息. 操作类型2:一次把app x的未读信息全部读完. 操作类型3:按照操作类型1 ...

  5. 0814JavaScript简介、基本语法、运算符、转换

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  6. 如何修改tomcat的端口

    <Connector port="8485" protocol="HTTP/1.1" connectionTimeout="20000" ...

  7. 给Mac下的iTerm2增加配色

    iterm2就不说了,Mac下非常好用的终端,这里就先谈谈如何给其增加配色,效果如下图 可以来这下载theme : http://iterm2colorschemes.com/ 1.先编辑你的prof ...

  8. 如何让python程序运行得更快

    原则1:不优化 原则2:不要优化那些不重要的部分(否则会降低可读性) 解决方案: 1. 使用函数,局部变量比全局变量快很多.尽量使用函数,如main() 2. 有选择性的消除属性访问. 如多用 fro ...

  9. 当月 当年sql

    本文转自:http://jophy.javaeye.com/blog/337321 当月数据 Java代码 select * from table t where t.create_time > ...

  10. javascript 传递引用类型参数

    JavaScript代码如下: function setName(obj){ obj.name = "test1"; obj = new Object(); obj.name = ...