`

Json Ajax小例子【转】

    博客分类:
  • json
阅读更多
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式, 易于人阅读和编写,
JSON建构于两种结构:
(1)“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
(2)值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。
ajax已成为一种热门的js异步执行的技术,但是在前端页面传递参数时,一般有两种方式,一种是将参数组装成字符串,通过Get或者Post方式发送除去,这种方式适合于参数不多,内容不丰富的情况。另外一种是要传递丰富的参数,一般就要使用连接字符串的方式将它组装成一定格式的xml内容,既不方便阅读,也很麻烦,这时,JSON就体现出它的优势,结合JSON-Java library,在后台服务可以很容易的解析请求的参数值。下面就实现一个从前台页面发送一些json格式的字符串给后台,后台解析后返回一些信息在前台页面展示的功能。

1 创建前台页面index.jsp里调用ajax请求,js如下
Js代码 
<script type="text/javascript" src="js/json.js"></script> 
<script type="text/javascript"> 
//创建xmlhttp对象 
var xmlHttp; 
function  createXMLHttpRequest()  { 
  if  (window.ActiveXObject)  { 
     xmlHttp  =   new  ActiveXObject("Microsoft.XMLHTTP"); 
  }   
  else   if  (window.XMLHttpRequest)  { 
     xmlHttp  =   new  XMLHttpRequest(); 
  }  
}  
//创建Person类有参构造器 
function Person(name,age,gender,birthday){ 
    this.age = age; 
    this.gender = gender; 
    this.name = name; 
    this.birthday = birthday; 

//创建一个Person的对象 
function getPerson(){ 
    return new Person("coco",25,true,"1988-08-08"); 

//发起ajax请求 
function doJSON(){ 
   var  person  =  getPerson(); 
    
   //使用json.js库里的stringify()方法将person对象转换成Json字符串  
   var  personAsJSON  =  JSON.stringify(person); 
   alert( " Car object as JSON:\n  "   +  personAsJSON); 
    
   var url = "JSONExample?timeStamp="+new Date().getTime(); 
    
   createXMLHttpRequest(); 
   xmlHttp.open("POST",url,true ); 
   xmlHttp.onreadystatechange  =  handleStateChange; 
   xmlHttp.setRequestHeader("Content-Type" ,"application/x-www-form-urlencoded");     
   xmlHttp.send(personAsJSON); 

 
function  handleStateChange()  { 
    if (xmlHttp.readyState  ==   4 )  { 
        if (xmlHttp.status  ==   200 )  { 
            parseResults(); 
        }  
    }  

 
function  parseResults()  { 
    var  responseDiv  =  window.document.getElementById("responseDiv"); 
    var content = xmlHttp.responseText 
    responseDiv.value = content; 

</script> 
在这段js中,构造了一个Person对象,然后调用Json.js库的stringify方法,将person对象组装成Json格式的字符串发送到后台处理的servlet,当收到后台处理后返回的数据时,在页面里进行展示。

2 后台处理的Servlet,内容如下:
Java代码 
public class JSONExample extends HttpServlet{ 
 
    @Override 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException { 
        // TODO Auto-generated method stub 
        doPost(req,resp); 
    } 
 
    @Override 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException { 
        String json  =  readJSONStringFromRequestBody(req); 
         
        // Use the JSON-Java binding library to create a JSON object in Java  
        JSONObject jsonObject  =   null ; 
        String responseText = null; 
        try{ 
           //将json字符串转化为JsonObject对象 
           jsonObject  =   new  JSONObject(json); 
           String gender = jsonObject.getBoolean("gender")?"男":"女"; 
           responseText  =   "You name is  "   +  jsonObject.getString( "name" )  +   " age is  "  
           +  jsonObject.getInt( "age" )  +   "  gender is "   + gender 
           +  "  birthday is  "   +  jsonObject.getString( "birthday" ); 
           System.out.println("responseText="+responseText); 
        }  
         catch (Exception pe)  { 
           System.out.println( " ParseException:  "   +  pe.toString()); 
        }  
        //设置字符集,和页面编码统一,否则有可能乱码 
        resp.setCharacterEncoding("utf-8"); 
        resp.setContentType( "text/xml" ); 
        resp.getWriter().print(responseText); 
    } 
 
    //读取前段post方法传递过来的信息 
    private  String readJSONStringFromRequestBody(HttpServletRequest request) { 
        StringBuffer json  =   new  StringBuffer(); 
        String line  =   null ; 
        try   { 
            BufferedReader reader  =  request.getReader(); 
            while ((line  =  reader.readLine())  !=   null )  { 
                json.append(line); 
            }  
        }  
          catch (Exception e)  { 
            System.out.println( "Error reading JSON string:  "   +  e.toString()); 
        }  
         return  json.toString(); 
    }  

在这个java类里,主要就是将从前端页面里得到的json字符串转换成JSONObject,然后调用它相应的方法,根据key值得到value值。

3 servlet在web.xml里注册
Xml代码 
<servlet>   
        <servlet-name>JSONExample</servlet-name>   
        <servlet-class>   
        com.sinye.json.JSONExample</servlet-class>   
    </servlet> 
     
    <servlet-mapping>   
        <servlet-name>JSONExample</servlet-name>   
        <url-pattern>/JSONExample</url-pattern>   
    </servlet-mapping> 

这样,就完成了一个结合json的ajax简单例子,更多内容可以去json的官网:http://www.json.org/。另外,在这里面使用的json.js和json.jar都可以从官网招到,如果闲麻烦,可以直接在这里下载












分享到:
评论

相关推荐

    AjaxJson应用小例子

    在这个"AjaxJson应用小例子"中,我们将深入探讨如何在Java环境下,结合Struts1.3框架,使用Ajax和JSON进行数据交互。 首先,我们需要了解Struts1.3框架。Struts是Apache组织开发的一个MVC(Model-View-Controller)...

    ajax调用java传送json的小例子

    主要是用到jquery的ajax,java中的hibernate4的调用mysql数据和struts2地址重定向,并把数据转换成json数据,经过html页面中的javascript调用后台数据,有添加,修改,删除,查询等简单功能,适用于有ajax初学者,...

    ajax,jQuery 例子大全,json例子

    这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用,从简单的GET请求到复杂的异步数据交互,对于初学者来说是非常宝贵的资源。通过学习和实践这些例子,你可以更好地理解和掌握如何使用Ajax和jQuery来创建...

    ajax+json实例

    在这个例子中,服务器端通过`JsonResult`返回JSON格式的用户信息,客户端通过AJAX请求获取这些信息并解析显示。 **五、总结** AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率,减少了不必要的...

    struts2+jquery+json+ajax例子

    总结起来,"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作,实现一个无刷新的登录界面,提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证,jQuery和Ajax负责前后端的通信,JSON作为数据...

    json+AJAX例子

    在本例子中,“json+AJAX例子”展示了如何结合两者来实现动态的数据交互。 首先,让我们了解AJAX的工作原理。AJAX的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行通信,无需用户进行任何操作。在...

    AjaxJson 实例 AjaxJson

    AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术,它结合了 AJAX(Asynchronous JavaScript and XML)和 JSON(JavaScript Object Notation)的优势,使得网页可以在不刷新整个页面的情况下与服务器进行...

    struts2+json+ajax整合例子(导入即可运行,附带详细教程)

    总的来说,"Struts2+json+ajax整合例子"是一个实用的教学资源,帮助开发者了解如何在实际项目中利用这些技术进行高效的Web开发。通过学习和实践这个例子,开发者可以提升其在Web应用程序开发中的技能。

    AJAX+JQuery+JSON的综合例子

    总结来说,这个综合例子展示了如何结合使用AJAX、jQuery和JSON,实现从服务器获取数据并在客户端动态呈现,尤其适合实时更新数据的场景,例如实时股票报价、天气预报等。熟练掌握这些技术对于任何Web开发者来说都是...

    JSON AJAX例子

    在这个例子中,我们创建了一个新的XMLHttpRequest对象,设置了请求类型为GET,请求的URL指向'data.json',然后定义了一个回调函数来处理响应。当服务器返回响应且状态为200时,我们将响应文本解析为JSON对象,并打印...

    Ajax小例子源码

    本Ajax小例子源码提供了对这一技术的基础应用,非常适合初学者学习和理解Ajax的工作原理。下面我们将详细解析Ajax的几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的核心,它是JavaScript内置的对象,用于...

    Ajax中使用JSON传输数据

    在服务器端处理JSON数据的例子如下: ```java import org.json.JSONObject; public void handleRequest(String jsonData) { JSONObject jsonObject = new JSONObject(jsonData); String name = jsonObject....

    jquery ajax json 的例子

    在这个“jquery ajax json”的例子中,我们将探讨如何结合这三者实现动态的数据加载。 首先,`display.html`是主页面,它包含HTML结构以及调用jQuery AJAX函数的JavaScript代码。在这个HTML文件中,通常会有一个...

    ssi框架,ajax,json项目小例子

    在描述中,"ajax的json数据交互"指的是使用AJAX技术与服务器进行通信,交换的数据格式是JSON。JSON是一种轻量级的数据交换格式,它以JavaScript语法为基础,易于人阅读和编写,同时也易于机器解析和生成。在Web开发...

    asp.net使用jquery ajax 小例子

    ASP.NET与jQuery AJAX的结合是Web开发中常见的一种技术组合,它使得页面的异步更新成为可能,提高用户体验。在本教程中,我们将探讨如何在ASP.NET中...这个小例子提供了一个起点,你可以根据项目需求进一步扩展和优化。

    Ajax小例子

    本篇文章将通过一个简单的Ajax小例子来深入理解其工作原理。 首先,我们需要明白Ajax的基本组成部分: 1. **XMLHttpRequest对象**:这是Ajax的核心,它是浏览器提供的API,用于在后台与服务器进行通信。即使名称中...

    ajax-json实现的例子

    在本例子中,我们将深入探讨如何结合AJAX和JSON来实现异步数据传输。 首先,了解AJAX的基本工作原理。AJAX的核心是XMLHttpRequest对象,它在后台与服务器进行通信。当用户触发一个AJAX请求时,如点击按钮,...

    一个简单的JSON+AJAX

    在"一个简单的JSON+AJAX"的例子中,我们可以推测这个压缩包可能包含了一个名为`json.js`的文件,该文件可能是实现了一个简单的AJAX请求,以JSON格式交换数据的示例。以下是一个可能的`json.js`实现: ```javascript...

    前台ajax与后台json传递

    在这个例子中,我们创建了一个新的XMLHttpRequest对象,设置请求方法为POST,目标URL为'/api/data',并指定了Content-Type为'application/json',表示我们将发送Json格式的数据。当请求状态改变时,我们检查...

    jquery+ajax+json例子

    在Web开发中,jQuery、Ajax和JSON是三个非常重要的技术,它们共同构成了高效、动态的用户界面的基础。本文将深入探讨这些技术,并结合一个名为"TestJQuery"的示例来展示它们如何协同工作。 首先,jQuery是一个...

Global site tag (gtag.js) - Google Analytics