随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日.

首先需要创建一个Servlet类,命名为JSONTest.java. 然后配置下web.xml文件,我的是自动生成的,也就没改动.web.xml的内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>JSONTest</servlet-name>
<servlet-class>servlet.ajax.JSONTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JSONTest</servlet-name>
<url-pattern>/servlet/JSONTest</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

接下来,就是创建JS文件了,命名为yulei.js,其中的url是访问上面的servlet的路劲.js内容如下:

function Car(make,model,year,color){      
    this.make=make;  
    this.model=model;  
    this.year=year;  
    this.color=color;  
}   function sendRequest(){  
    var car=new Car('Dodge','Cornet R\T',2009,'yellow');  
 //   var pars="car="+car.toJSONString();  
      var pars="car="+Object.toJSON(car);
    var url="servlet/JSONTest";  
    var mailAjax= new Ajax.Request(  
           url,  
           {   
             method:'get',  
             parameters:pars,  
             onComplete:jsonResponse,  
             onException: function(x, e) { alert(e) }
           }  
        );  
}  
  
function jsonResponse(originalRequest){  
    alert(originalRequest.responseText);  
    var myObj=originalRequest.responseText.parseJSON();  
    alert(myObj.name);  
}  

然后,新建一个jsonTest.jsp文件,里面主要是加载一些js文件,和一个按钮,内容如下:

<%@ 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 'jsonTest.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
      <script type="text/javascript" src="js/prototype.js"></script>  
<!--      <script type="text/javascript" src="js/json.js"></script>  
 -->      <script type="text/javascript" src="js/yulei.js"></script>  
  </head>
  
  <body>
        This is my JSP page. <br>  
       <input type="button" value="测试" onclick="sendRequest()"/>  
  </body>
</html>

最后,我们就编写Servlet类的内容:

package servlet.ajax;

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; import org.json.JSONException;
import org.json.JSONObject; public class JSONTest extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter(); String s3=request.getParameter("car");
System.out.println(s3);
try {
JSONObject jsonObject=new JSONObject(s3);
System.out.println(jsonObject.getString("model"));
System.out.println(jsonObject.getString("year"));
} catch (JSONException e) {
e.printStackTrace();
} JSONObject resultJSON=new JSONObject();
try {
resultJSON.append("name", "violet");
resultJSON.append("occupation", "developer");
resultJSON.append("age", new Integer(22));
} catch (JSONException e) {
e.printStackTrace();
} out.print(resultJSON.toString());
}
}

这个Servlet的功能是:首先获取前台JS ajax请求传来的JSON数据,将其中的某些属性打印出来(你也可以Debug查看),然后重新新建一个JSON对象,并将其以字符串的形式传到前台,我们就可以获取到这个新建的JSON数据.

这就是简单的JSON在AJAX请求中数据传输的作用.

JSON 在Ajax数据交换中的简单运用的更多相关文章

  1. JQuery + JSON作为前后台数据交换格式实践

    JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...

  2. Ajax-06 Ajax数据交换格式

    1.数据交换格式 服务端返回的数据,在本质上都是字符串,只是原生Ajax 或jQuery Ajax将这些字符串转换为容易理解的各种常用格式. a. Text 文本字符串 b.  XML JavaScr ...

  3. 二维码与json都是数据交换格式

    二维码与json都是数据交换格式: UI数据是人机数据交换格式.

  4. servlet与ajax数据交换(json格式)

    JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...

  5. XML和JSON两种数据交换格式的比较

    在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...

  6. Android之使用json进行网络数据交换

    JSON作为一种轻量级的数据交换格式,凭借其易于阅读和编写.易于解析.传输速度快等优点流行了起来.最近正好在学习Android端从服务端端取数据,Json便派上了用场.好,下面开始切入主题. 1.准备 ...

  7. android之JSON 进行网络数据交换

    什么是JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写,同一时候也易于机器解析和生成,很适合于server与client的交互. J ...

  8. AJAX在VS2005中的简单应用 使用ajaxpro.2.dll[点击按钮执行事件不刷新]

    原文发布时间为:2008-10-21 -- 来源于本人的百度文章 [由搬家工具导入] 1.下載ajaxpro.dll或AjaxPro.2.dll 放在Bin文件夹中2.配置web.config 3.u ...

  9. 【学习】006数据交换格式与SpringIOC底层实现

    课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...

随机推荐

  1. 15 ActionBar 总结

    ActionBar 一, 说明 是一个动作栏 是窗口特性 提供给用户动作 导航模式 可以适配不同的屏幕 二, ActionBar 提供的功能 1. 显示菜单项 always:总是展示到ActionBa ...

  2. 自定义圆角透明的Dialog

    自定义圆角透明的Dialog 说明 系统默认的Dialog默认是背景不透明的,有时候项目需要Dialog为圆角透明,这个时候的解决方案就是---重写Dialog - 系统样式 - 自定义以后的样式 自 ...

  3. linux下字节对齐

    一,内存地址对齐的概念    计算机内存中排列.访问数据的一种方式,包含基本数据对齐和结构体数据对齐.    32位系统中,数据总线宽度为32,每次能够读取4字节数据.地址总线为32,最大寻址空间为4 ...

  4. iOS中 喷枪打字动画的实现

    实现原理比较简单,这里不做过多介绍. #import "ViewController.h" @interface ViewController () @property (weak ...

  5. 四大组件之Service小结

    总结提高,与君共勉! 1.Service是什么 Service 是看不到界面的,,就是一个没有界面的Activity, 并且长期在后台运行的一个组件.. 由于ANR对Activity和Broadcas ...

  6. Android Studio 1.0RC1版发布

    Android Studio 1.0RC1 版本发布. 以下是官网该版本说明: Android Studio 1.0 Release Candidate 1 November 20th, 2014:  ...

  7. Android图片色彩变幻

    最近在做图片相关的应用,所以就各方积累到一些常用的操作,一般来说会有多种方式来实现这一功能,比如 采用色度变换 采用ColorMatrix颜色矩阵 采用对像素点的直接操作 等等,今天就复习一下第一种方 ...

  8. Android Studio集成Genymotion

    Android Studio集成Genymotion比在Eclipse中集成简单多了.主要以下几个步骤: 1.官网先下载Genymotion:http://www.genymotion.com/,下载 ...

  9. StoreType.java 存储方式

    StoreType.java 存储方式 http://injavawetrust.iteye.com package com.iteye.injavawetrust.miner; /** * 存储方式 ...

  10. Dynamics CRM OData方式进行增删改查时报错的问题

    今天在通过OData终结点update记录的时候报"Error processing request stream. The request should be a valid top-le ...