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
分享到:
相关推荐
在Web应用开发中,这种集成技术极大地提升了用户体验,因为它们允许部分页面更新而不是整个页面刷新,同时利用JSON作为数据交换格式,提供了高效的服务器与客户端通信。 Struts框架是Apache软件基金会的一个开源...
在IT行业中,Ajax(异步JavaScript和XML)与JSON(JavaScript Object Notation)是Web开发中的核心技术,尤其在创建交互式、动态网页时扮演着重要角色。本资源"Ajax-json.rar"显然是一份关于如何利用AJAX和JSON进行...
在现代Web开发中,Ajax和JSON经常结合使用,以高效地传输和处理数据。 **一、Ajax基础** 1. **创建XMLHttpRequest对象**:在JavaScript中,Ajax的核心是XMLHttpRequest对象,它是浏览器提供的一个内置对象,用于与...
总结起来,使用Ajax向PHP服务端发送请求并接收JSON数据涉及的主要步骤包括创建XMLHttpRequest对象、设置回调函数、打开连接、设置请求头、发送请求以及在服务端处理请求和返回JSON数据。理解这些步骤对于Web开发中的...
#### JSON与服务器通信 在本篇文章中,重点转移到了服务器端如何处理JSON数据。当Ajax应用程序向服务器发送请求时,通常是以JSON格式发送数据。服务器端接收到这些数据后,可以轻易地将其解析为本地对象,从而进行...
1. **异步性**:AJAX的核心是XMLHttpRequest对象,它可以在后台与服务器通信,无需刷新整个页面。 2. **流程**:用户触发事件 -> 创建XMLHttpRequest对象 -> 打开连接 -> 发送请求 -> 处理服务器响应。 **JSON与...
`xe-ajax`是一个JavaScript库,专门用于处理AJAX(Asynchronous JavaScript and XML)请求,提供了一种简洁的方式来发送和接收JSON、XML或其他数据类型。在实际开发中,前端开发人员通常会使用AJAX与服务器进行通信...
客户端可能有一个HTML页面,通过JavaScript调用AJAX发送请求,服务器端使用.NET处理请求,将数据以JSON格式返回。例如,一个简单的获取用户信息的接口: ```javascript // 客户端AJAX请求 function getUserInfo() {...
可以通过`onerror`或`onreadystatechange`事件来捕获和处理错误。 在实际应用中,开发者通常会使用jQuery、axios、fetch等库来简化AJAX操作,它们提供了更简洁的API,可以更方便地处理异步请求。 综上所述,JSON和...
总结来说,"Ajax返回JSON对象"涉及到的技术点包括Ajax的基本使用、JSON数据格式、Ajax发送和接收JSON数据的流程、jQuery对Ajax的支持、跨域请求以及安全性和错误处理。这些都是Web开发中不可或缺的知识点,理解和...
**基于JSON的AJAX请求案例** ...通过创建XMLHttpRequest对象、设置请求参数和处理响应,以及在服务器端处理请求,我们可以实现在客户端和服务器之间的无刷新数据交换。这个过程对于实现动态网页和实时应用至关重要。
在JavaScript中,XMLHttpRequest对象是实现AJAX的核心,它允许在后台与服务器进行异步通信。 **2. JSON**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它是基于JavaScript的一...
在“php-curl+ajax+json数据传输2.0版本”中,通过PHP-cURL在服务器端处理AJAX的跨域请求,可以避免前端需要复杂的跨域设置。 `JSON` (JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写...
本示例将探讨如何利用jQuery的Ajax功能向Struts2框架发送请求,并以JSON格式接收响应数据。下面我们将详细讨论这些技术以及它们在实际应用中的交互过程。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作...
AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术,它结合了 AJAX(Asynchronous JavaScript and XML)和 JSON(JavaScript Object Notation)的优势,使得网页可以在不刷新整个页面的情况下与服务器进行...
总结来说,本实例的核心是利用AJAX技术从服务器获取复杂的JSON数据,并对其进行解析和处理。理解AJAX的工作原理、JSON的结构以及如何在JavaScript中操作JSON是Web开发者必备的技能。在实际应用中,你可能还需要处理...
Ajax Interceptor 是一款专为谷歌浏览器(Chrome)设计的插件,它允许开发者在Ajax请求发送后和响应返回前进行干预,从而实现对AJAX请求数据的修改。这款插件对于前端开发、调试以及测试来说是一个强大的工具,特别...
服务器处理请求后,将响应数据返回,AJAX通过onreadystatechange事件监听响应,并使用responseText或responseXML获取数据。 在JSON和AJAX的结合中,通常JSON用于数据交换格式,因为它更简洁、直观,且与JavaScript...
学习和理解Ajax-B项目,可以深入掌握AJAX的基本工作原理,包括异步请求、数据交换格式、以及客户端和服务器之间的通信机制。这对于开发高效、用户体验良好的Web应用至关重要。同时,也可以从中了解到如何在实际项目...
Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器通信。使用Ajax的基本步骤包括创建XMLHttpRequest对象、打开连接、发送请求以及处理服务器的响应。下面我们将深入探讨这些步骤和相关的...