`
evilwicker
  • 浏览: 63375 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类

Ajax 与 服务器的集中传递数据以及解析的格式

阅读更多
传递数据的方式
1.普通的文本的方式
2.XML方式
3.JSon方式

特别要注意的是xml传递方式和Json传递方式的各自的优缺点,可以说是各有用武之地。本人刚学不久,废话不说了,直接代码贴上了。哈哈,有兴趣的朋友可以下载下去看看。

1.普通的文本的方式

login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>

<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/ajax.js">
</script>
  </head>
 
  <body>
  <div>
  用户名:<input type="text" id="name" size="15"/><br/>
  密&nbsp; &nbsp;&nbsp;码:<input type="password" id="password" size="16"/><br/>
<input type="button" value="登录" onclick="return verifyUser()"/><br/>
<span id="result"></span>
</div>
  </body>
</html>


ajax.js

//XMLHttpRequest Object
var xhr ;

//create XMLHttpRequest Object
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你的浏览器不支持Ajax");
}
}

}
}

//发送请求
function sendRequest(name,password){
//返回的结果
var result;
createXMLHttpRequest();
xhr.open("GET","LoginServlet?name="+name+"&password="+password,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
result = xhr.responseText;
//alert(result);
//write the result to web page
var spanResult = document.getElementById("result");
spanResult.innerHTML = result;
}else{
alert("error");
}
}
}
xhr.send(null);
}

function verifyUser(){
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;

if(name.trim() == '' || password.trim()==''){
alert("用户名或者密码为空")
return false;
}

//发送用户名和密码到服务器进行校验
sendRequest(name,password);

}

//为String添加trim 方法
String.prototype.trim = function () {
    return   this .replace(/^\s+|\s+$/g, '' );
}


LoginServlet.java

package com.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {


public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

String result = "";
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
if("admin".equals(name) && "admin".equals(password)){
result = "登录成功";
}else{
result = "用户名或者密码错误";
}

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//返回处理的结果
out.println(result);
out.close();
}


public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doGet(request, response);
}

}

呵呵,简单吧,唉!哥们可是搞了好长时间啊。主要是javascript的基础不大好 ,调试还有找资料花了好长时间。
至于xml,json的我就不贴代码了,可以从下面的附件下载。
























分享到:
评论

相关推荐

    ajax中使用xml传递数据

    在dwr框架和ajax中,使用xml传递数据,与服务器解析xml

    JSON客户端与服务器端生成JSON数据及传递方法

    JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。...

    大名鼎鼎的IBM公司 Ajax 培训资料

    然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可 以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。 JavaScript 代码甚至...

    JSON传递bool类型数据的处理方式介绍

    ajax中使用json传递数据时,其它数据类型都不是问题,但是如果服务器端生成的JSON中有bool类型的数据时,到客户端解析时出现了小小的问题,总结如下: 服务器返回的JSON为: 代码如下: {“TypeID”:[1037],”Title”...

    通过实例解析json与jsonp原理及使用方法

    1.json与jsonp的引入 在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。 备注:跨域也可以通过服务器端代理来解决;... 3) 轻量级数据格式,占用字符数量极少,特别适合互联网传递; 4) 可读性较强,虽然比不上

    基于javaScript开发最实用的书管理系统+源码+开发文档+项目代码解析+数据库(毕业设计&课程设计&项目开发)

    基于javaScript开发最实用的书管理系统+源码+开发文档+项目代码解析+数据库,适合毕业设计、课程设计、项目开发。...自己封装了数据库连接池的接口,利用Java项目MVC的思想组织后台,用Ajax传递前后台数据。

    基于j2ee的ajax宝典

    2.3.3 解析服务器响应··············· 47 2.3.4 何时发送请求··················· 48 2.3.5 Ajax聊天室的特点··········· 52 2.4 传统Web应用与Ajax的对比····· ...

    Velox:Web服务器客户端数据库交互的低代码HTML5 AJAX PHP SQL框架

    客户端组件通过API端点与服务器端组件进行通信,该API端点解析请求并动态包含适当的查询定义文件,可以使用提供的模板(仅替换示例SQL)来设置该查询定义文件。 这使后端开发人员几乎可以完全使用SQL进行工作,并...

    jQuery 1.6 API 中文版

    如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器(即使没有数据要发送)。数据将总是使用UTF-8字符集传递给服务器;你必须译码这适当的在服务器端。 contextObject 这个对象用于设置...

    .NET中JSON的序列化和反序列化的几种方式

    一、什么是JSON ...是JavaScript用来处理数据的一种格式,大部分是用来处理JavaScript和web服务器端之间的数据交换,把后台web服务器的数据传递到前台,然后使用JavaScript进 行处理,例如ajax等,

    PHP和MySQL Web开发第4版pdf以及源码

    第2章 数据的存储与检索 2.1 保存数据以便后期使用 2.2 存储和检索Bob的订单 2.3 文件处理 2.4 打开文件 2.4.1 选择文件模式 2.4.2 使用fopen()打开文件 2.4.3 通过FTP或HTTP打开文件 2.4.4 解决打开文件时...

    js中传递特殊字符(+,)的方法

    js后自动解析特殊字符,如+号为连接符,解析为空格,&为变量连接符,服务器端接受数据时&以后的数据不显示等等。 解决办法: 1、将字符放到form中,然后用js提交form表单到服务器。 2、将字符中的特殊字符替换成十六...

    xml浅学笔记

    XML的宗旨是做数据传递的,而非数据显示 2、XML的语法规范 XML可以保存成独立的 ***.xml 的文件,也可以以字符串的形式出现(服务器端生产) 1、XML的最顶端是XML的声明 &lt;?xml version="1.0" encoding="utf...

    PHP和MySQL WEB开发(第4版)

    第2章 数据的存储与检索 2.1 保存数据以便后期使用 2.2 存储和检索Bob的订单 2.3 文件处理 2.4 打开文件 2.4.1 选择文件模式 2.4.2 使用fopen()打开文件 2.4.3 通过FTP或HTTP打开文件 2.4.4 解决打开文件时可能遇到...

    亮剑.NET深入体验与实战精要3

    此次将长期的思考、感悟,多年的系统开发、设计和团队管理经验,以及深入分析众多项目实战的宝贵成果和盘托出,力求将编程思想与具体实践融为一体,提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...

    PHP和MySQL Web开发第4版

    第2章 数据的存储与检索 2.1 保存数据以便后期使用 2.2 存储和检索Bob的订单 2.3 文件处理 2.4 打开文件 2.4.1 选择文件模式 2.4.2 使用fopen()打开文件 2.4.3 通过FTP或HTTP打开文件 2.4.4 解决打开文件时...

    亮剑.NET深入体验与实战精要2

    此次将长期的思考、感悟,多年的系统开发、设计和团队管理经验,以及深入分析众多项目实战的宝贵成果和盘托出,力求将编程思想与具体实践融为一体,提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...

    jquery基础教程高清版PDF.part5.rar

     6.3 向服务器传递数据   6.3.1 执行GET请求   6.3.2 执行POST请求   6.3.3 序列化表单   6.4 关注请求   6.5 AJAX和事件   6.5.1 限定事件绑定函数的作用域   6.5.2 利用事件冒泡   6.6 ...

Global site tag (gtag.js) - Google Analytics