`
zranye
  • 浏览: 26576 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用Json的Ajax实例

    博客分类：
  • JAVA
AjaxJson 
阅读更多

今天公司要求尝试一下Ajax的学习，作为新人，学习新东西是一个任务，也是很乐意做的一件事情。那么就记录一下学到的内容。

首先是我还很不熟悉的html页面的前端的代码（用json封装数据的方式）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>JSON Example</title>  
  
<script type="text/javascript" src="json.js"></script>  
<script type="text/javascript">  
  
var xmlHttp;   
  
function createXMLHttpRequest() {   
    if (window.ActiveXObject) {   
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
    }    
    else if (window.XMLHttpRequest) {   
        xmlHttp = new XMLHttpRequest();   
    }   
}   
       
function doJSON() {   
    var car = getCarObject();   
       
    //Use the JSON JavaScript library to stringify the Car object   
    var carAsJSON = JSON.stringify(car);   
    alert("Car object as JSON:\n " + carAsJSON);   
       
    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(carAsJSON);
}   
       
function handleStateChange() {   
    if(xmlHttp.readyState == 4) {   
        if(xmlHttp.status == 200) {   
            parseResults();   
        }   
    }   
}   
  
function parseResults() {   
    var responseDiv = document.getElementById("serverResponse");   
    if(responseDiv.hasChildNodes()) {   
        responseDiv.removeChild(responseDiv.childNodes[0]);   
    }   
       
    var responseText = document.createTextNode(xmlHttp.responseText);   
    responseDiv.appendChild(responseText);   
}   
  
function getCarObject() {   
    return new Car("Dodge", "Coronet R/T", 1968, "yellow");   
}   
  
function Car(make, model, year, color) {   
    this.make = make;   
    this.model = model;   
    this.year = year;   
    this.color = color;
}   
  
</script>  
</head>  
  
<body>  
  
  <br/><br/>  
  <form action="#">  
      <input type="button" value="Click here to send JSON data to the server" onclick="doJSON();"/>  
  </form>  
  <h2>Server Response:</h2>  
  
  <div id="serverResponse"></div>  
  
</body>  
</html>

    这里有用到json的jar包。Json在我看来是一个封装了很多键值对的一些数据的集合（暂时就这么理解吧），用Json再加上Post的请求方式来对服务器请求数据，可以有效地服务器的负担。

      这里有必要对html代码中异步请求的一些核心功能进行解释，就算是为以后忘记了这一方法的我和还没学会Ajax的新手写的吧。button点击之后，触发doJSON()的事件，通过var car = getCarObject();调用了测试数据function Car()里面的数据，然后创建一个xmlHttp的对象--createXMLHttpRequest();然后再通过xmlHttp对象的open()和send()方法，就算是往服务器传输了数据。就本人理解，所谓异步，是指在open()和send()之间，xmlHttp对象开启了一个onreadystagechange这样一个监听器，负责监听工作的代码块是function handleStageChange()方法。这样开启了一个请求状态的监听器之后，就可以对服务器的响应以parseResult()的方法作出回应，而不是通过刷新来响应服务器的返回的请求。在parseResult()的方法里，做了很简单的用js改变文本的动作，以观察是否有变化。

       在java代码这块，我们只需要写一个简单的Servlet就可以扑捉到在前台通过send()发送过来的请求。代码如下:

 

package com.servlet;

import java.io.*;   
import java.net.*;   
import java.text.ParseException;   
import javax.servlet.*;   
import javax.servlet.http.*;    

import org.json.JSONException;
import org.json.JSONObject;

  
public class JSONExample extends HttpServlet {   
       
    protected void doPost(HttpServletRequest request, HttpServletResponse response)   
    throws ServletException, IOException {   
        String json = readJSONStringFromRequestBody(request);   
           
        //Use the JSON-Java binding library to create a JSON object in Java   
        JSONObject jsonObject = null;   
        try {   
            jsonObject = new JSONObject(json);  
            String responseText = "You have a " + jsonObject.getInt("year") + " "  
            + jsonObject.getString("make") + " " + jsonObject.getString("model")   
            + " " + " that is " + jsonObject.getString("color") + " in color.";   
            response.setContentType("text/xml");   
            response.getWriter().print(responseText);   
        }    catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}   
           
           
    }   
  
    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();   
    }
}

 一些包结构也直接复制上来了，可以自己做一些改动，有用到的jar包，在下面可以找到。做后台的，对java这一块应该很容易理解，就不多作解释。

      根据我的文件系统也贴上我的web.xml吧。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<servlet>
		<servlet-name>JSONExample</servlet-name>
		<servlet-class>com.servlet.JSONExample</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>JSONExample</servlet-name>
		<url-pattern>/JSONExample</url-pattern>
	</servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 一个简单的Demo，希望可以帮助到一些朋友尽快搞定，因为自己也是费了点功夫才搞出来的，而工作中没有多少时间可以给我们学习，所以，码农们一起共勉吧。

分享到：
| 关于java的死锁DeadLock
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object ...

    AjaxJson 实例 AjaxJson

    在 AJAX 中，我们通常使用 JSON 格式作为数据传输的载体，因为它比 XML 更快、更简洁。 AjaxJson 实例通常包括以下步骤： 1. **创建 XMLHttpRequest 对象**：这是 AJAX 的基础，用于与服务器进行通信。在 ...

    jquery ajax用json传值实例asp.net

    总之，这个"jquery ajax用json传值实例 asp.net"是一个很好的学习资源，可以帮助初学者快速掌握如何在客户端和服务器之间使用AJAX和JSON进行数据交换。通过实践和理解这些基础概念，你可以进一步提升你的Web开发技能...

    ajax请求复杂的json数据实例

    本实例主要关注如何使用AJAX处理复杂的JSON（JavaScript Object Notation）数据。JSON是一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，因此在Web服务中广泛使用。 首先，我们需要...

    Json+ajax简单实例

    在这个“Json+ajax简单实例”中，我们将深入理解这两者如何协同工作，以及如何使用它们来创建交互式Web应用。 JSON是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript...

    JSON servlet实例 Ajax应用

    在这个"JSON Servlet实例 Ajax应用"中，我们将探讨如何使用Servlet与客户端进行JSON数据交互，并结合Ajax实现异步通信。 首先，了解JSON的基本结构至关重要。JSON由键值对组成，键必须是字符串，且用双引号包围，值...

    asp输出json对象实例

    5. 客户端通过AJAX请求获取JSON数据，然后使用JavaScript的`JSON.parse()`方法解析为JavaScript对象。 通过这个实例，你可以学习到如何在ASP环境中处理JSON数据，以及如何利用AJAX进行前后端的数据交互。这在现代...

    Ajax、json实例学习代码

    理解Ajax和JSON的结合使用是现代Web开发的基础，这有助于开发者创建更具交互性和响应性的网页。通过实际的代码练习和案例分析，你可以深入理解这两个技术的工作原理，并能更好地将它们应用于实际项目中。

    ajax解析json实例

    在本实例中，我们将深入探讨如何使用Java生成JSON数据，并通过AJAX请求获取并解析这些数据。 1. JSON基础知识： JSON由键值对组成，键必须是字符串，用双引号包围，值可以是字符串、数字、布尔值、数组、对象或...

    JS使用AjAX实例,JQUERY使用AJAX实例

    **JS使用AJAX实例** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在JavaScript中，我们通常使用`XMLHttpRequest`对象或者jQuery库来实现AJAX请求。 1...

    Struts+Jquery+Ajax+Json应用实例

    在"Struts+Jquery+Ajax+Json应用实例"中，前端使用jQuery库来监听用户事件，比如点击按钮。当事件触发时，jQuery通过Ajax发送一个HTTP请求到后端的Struts Action。在Struts框架中，这个Action会处理请求，执行必要的...

    .net(C#) ajax+json实例

    在`.net(C#) ajax+json实例`中，开发者可能创建了一个Web应用，该应用使用C#后端处理业务逻辑，并通过Ajax请求与前端进行通信。前端可能使用JavaScript或者jQuery等库来发送Ajax请求，请求的数据格式为JSON。服务器...

    datatables使用ajax实例

    **datatables与Ajax结合使用详解** `datatables`是一个强大的jQuery插件，它能够将HTML表格转化为功能丰富的数据展示和操作界面。而`Ajax`则是异步JavaScript和XML的缩写，是Web开发中用于创建动态网页的关键技术。...

    asp输出json实例，json.asp

    `ajax返回json格式数据`是指客户端使用AJAX技术向服务器发送异步请求，服务器接收到请求后处理数据，然后返回JSON格式的响应。在JavaScript中，可以使用`XMLHttpRequest`对象或现代浏览器的`fetch` API实现这一过程...

    struts2使用jquery整合ajax、json用户登录实例源码

    在本实例中，我们将探讨如何利用Struts2、jQuery、Ajax和JSON技术实现一个用户登录功能。 首先，我们需要理解Ajax的核心概念，即在不刷新整个页面的情况下，向服务器发送异步请求并获取数据。这极大地提升了用户...

    AjaxJson实体类与依赖包

    在实际应用中，当后端服务器处理完请求后，可以创建一个`AjaxJson`实例，设置相应的状态码和消息，如果有必要，还可以将处理结果封装到"data"属性中，然后将这个对象转换为JSON字符串，通过HTTP响应发送给前端。...

    下载json，ajax传送对象的好帮手

    标签“json”进一步强调了这个压缩包文件可能包含与JSON相关的示例代码、库或者工具，可能帮助开发者更好地理解和使用JSON进行AJAX通信。 至于压缩包中的文件“json”，可能是JSON的示例文件、教程文档，或者是用于...

    Javaweb项目ajax请求Json实例

    此项目实例"Javaweb项目ajax请求Json实例"旨在演示如何将服务器端的数据以JSON（JavaScript Object Notation）格式发送到客户端，并在JSP页面上进行解析和展示。JSON是一种轻量级的数据交换格式，因其简洁性和易读性...

    jquery_ajax_json简单实例

    本实例将深入探讨如何利用jQuery的AJAX功能与JSON数据格式进行交互，以实现异步数据加载和更新，从而提高网页的用户体验。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和...

Magicbox
Global site tag (gtag.js) - Google Analytics