`

[转]Ajax---通过JSON与服务器通信(发送请求和处理响应)

阅读更多
Ajax---通过JSON与服务器通信(发送请求和处理响应)
好久没有做过关于AJAX的东西了,平时做的也无非就是通过XHP要么用GET(请求部分是追加到URL中的并且浏览器对其长度有会有限制)方法要么通过POST(请求参数内容可以放到请求体中并且无量的限制)方法。传递的无非是些参数值(以名=值的方式出现as : name=jkallen)要么就是DOM对象了。再发到到服务端后做些处理再返回到客户端显示对应结果。

今天看到了一个好东东,就是通过JSON(JavaScript Object Notation)向服务器发送数据。它是一种轻量级的数据交换格式,使用了类似于C语言家族的习惯。



JSON具有以下这些形式:


a : 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。


b:   数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。


c:   值(value)可以是双引号括起来的字符串(string)、数值(number)、 ture、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。


d:   字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。


不多说了,关于JSON其实在 www.json.org 上讲得太好了!上面不但有每个JAVA的源文件,而且每个文件都有与之对应的JAVA DOC!还有不少实例!

我就选了json in java and json in javascript 二个链接 ,从这二个地方可以下到JSON的javascript包和Java包。

Javascript 包的应用如下:

首先创建一个符合json的对象,并通过XHP发送到sever


< 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 >

那个json.js就是我们下下来的包啦!

我们再看看在server端的处理
package ajaxbook.chap3;

import java.io. * ;
import java.net. * ;
import java.text.ParseException;
import javax.servlet. * ;
import javax.servlet.http. * ;
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);
    }
      catch (ParseException pe)   {
        System.out.println( " ParseException: "   + pe.toString());
    }
   
    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);
  }

    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();
  }
}

那个不起眼的org.json.JSONObject就是我们从JSON.ORG上下下来的JAVA包!它上面也有JSONObject的JAVA DOC所以不用担心不知道用啦!

OK到此全部搞定啦!

可以看到这样比我们平时通过XHP传递一个DOM对象(通过连接串来创建XML串)要方便些!再说通过连接串来处理也不是生成XML数据结构的健壮技术!

参考资料: foundations-of-ajax
              www.json.org

分享到:
评论

相关推荐

    struts-ajax-json-struts包

    在Web应用开发中,这种集成技术极大地提升了用户体验,因为它们允许部分页面更新而不是整个页面刷新,同时利用JSON作为数据交换格式,提供了高效的服务器与客户端通信。 Struts框架是Apache软件基金会的一个开源...

    Ajax-json.rar_JSON_ajax json_java Jquery ajax_javascript_json aj

    在IT行业中,Ajax(异步JavaScript和XML)与JSON(JavaScript Object Notation)是Web开发中的核心技术,尤其在创建交互式、动态网页时扮演着重要角色。本资源"Ajax-json.rar"显然是一份关于如何利用AJAX和JSON进行...

    Ajax 使用JSON向服务器发送数据

    在现代Web开发中,Ajax和JSON经常结合使用,以高效地传输和处理数据。 **一、Ajax基础** 1. **创建XMLHttpRequest对象**:在JavaScript中,Ajax的核心是XMLHttpRequest对象,它是浏览器提供的一个内置对象,用于与...

    使用Ajax向PHP服务端发送请求并返回JSON数据

    总结起来,使用Ajax向PHP服务端发送请求并接收JSON数据涉及的主要步骤包括创建XMLHttpRequest对象、设置回调函数、打开连接、设置请求头、发送请求以及在服务端处理请求和返回JSON数据。理解这些步骤对于Web开发中的...

    掌握 Ajax第 11 部分--服务器端的 JSON.pdf

    #### JSON与服务器通信 在本篇文章中,重点转移到了服务器端如何处理JSON数据。当Ajax应用程序向服务器发送请求时,通常是以JSON格式发送数据。服务器端接收到这些数据后,可以轻易地将其解析为本地对象,从而进行...

    json-servlet-ajax

    1. **异步性**:AJAX的核心是XMLHttpRequest对象,它可以在后台与服务器通信,无需刷新整个页面。 2. **流程**:用户触发事件 -&gt; 创建XMLHttpRequest对象 -&gt; 打开连接 -&gt; 发送请求 -&gt; 处理服务器响应。 **JSON与...

    xe-ajax-mock1.4.5.js

    `xe-ajax`是一个JavaScript库,专门用于处理AJAX(Asynchronous JavaScript and XML)请求,提供了一种简洁的方式来发送和接收JSON、XML或其他数据类型。在实际开发中,前端开发人员通常会使用AJAX与服务器进行通信...

    ajax+json实例

    客户端可能有一个HTML页面,通过JavaScript调用AJAX发送请求,服务器端使用.NET处理请求,将数据以JSON格式返回。例如,一个简单的获取用户信息的接口: ```javascript // 客户端AJAX请求 function getUserInfo() {...

    7、使用JSON向服务器发送数据——ajax基础笔记

    可以通过`onerror`或`onreadystatechange`事件来捕获和处理错误。 在实际应用中,开发者通常会使用jQuery、axios、fetch等库来简化AJAX操作,它们提供了更简洁的API,可以更方便地处理异步请求。 综上所述,JSON和...

    ajax返回json对象.zip

    总结来说,"Ajax返回JSON对象"涉及到的技术点包括Ajax的基本使用、JSON数据格式、Ajax发送和接收JSON数据的流程、jQuery对Ajax的支持、跨域请求以及安全性和错误处理。这些都是Web开发中不可或缺的知识点,理解和...

    基于JSON的AJAX请求案例

    **基于JSON的AJAX请求案例** ...通过创建XMLHttpRequest对象、设置请求参数和处理响应,以及在服务器端处理请求,我们可以实现在客户端和服务器之间的无刷新数据交换。这个过程对于实现动态网页和实时应用至关重要。

    平台java前端ajax,json请求

    在JavaScript中,XMLHttpRequest对象是实现AJAX的核心,它允许在后台与服务器进行异步通信。 **2. JSON**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它是基于JavaScript的一...

    php-curl+ajax+json数据传输2.0版本

    在“php-curl+ajax+json数据传输2.0版本”中,通过PHP-cURL在服务器端处理AJAX的跨域请求,可以避免前端需要复杂的跨域设置。 `JSON` (JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写...

    JQuery发送Ajax请求Struts2,并返回JSON的例子

    本示例将探讨如何利用jQuery的Ajax功能向Struts2框架发送请求,并以JSON格式接收响应数据。下面我们将详细讨论这些技术以及它们在实际应用中的交互过程。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作...

    AjaxJson 实例 AjaxJson

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

    ajax请求复杂的json数据实例

    总结来说,本实例的核心是利用AJAX技术从服务器获取复杂的JSON数据,并对其进行解析和处理。理解AJAX的工作原理、JSON的结构以及如何在JavaScript中操作JSON是Web开发者必备的技能。在实际应用中,你可能还需要处理...

    谷歌浏览器插件—— Ajax Interceptor

    Ajax Interceptor 是一款专为谷歌浏览器(Chrome)设计的插件,它允许开发者在Ajax请求发送后和响应返回前进行干预,从而实现对AJAX请求数据的修改。这款插件对于前端开发、调试以及测试来说是一个强大的工具,特别...

    ajax-json实现的例子

    服务器处理请求后,将响应数据返回,AJAX通过onreadystatechange事件监听响应,并使用responseText或responseXML获取数据。 在JSON和AJAX的结合中,通常JSON用于数据交换格式,因为它更简洁、直观,且与JavaScript...

    ajax-B.rar

    学习和理解Ajax-B项目,可以深入掌握AJAX的基本工作原理,包括异步请求、数据交换格式、以及客户端和服务器之间的通信机制。这对于开发高效、用户体验良好的Web应用至关重要。同时,也可以从中了解到如何在实际项目...

    ajax--测试

    Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器通信。使用Ajax的基本步骤包括创建XMLHttpRequest对象、打开连接、发送请求以及处理服务器的响应。下面我们将深入探讨这些步骤和相关的...

Global site tag (gtag.js) - Google Analytics