今天公司要求尝试一下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,希望可以帮助到一些朋友尽快搞定,因为自己也是费了点功夫才搞出来的,而工作中没有多少时间可以给我们学习,所以,码农们一起共勉吧。
分享到:
相关推荐
**Ajax+JSON 实例详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object ...
在 AJAX 中,我们通常使用 JSON 格式作为数据传输的载体,因为它比 XML 更快、更简洁。 AjaxJson 实例通常包括以下步骤: 1. **创建 XMLHttpRequest 对象**:这是 AJAX 的基础,用于与服务器进行通信。在 ...
总之,这个"jquery ajax用json传值实例 asp.net"是一个很好的学习资源,可以帮助初学者快速掌握如何在客户端和服务器之间使用AJAX和JSON进行数据交换。通过实践和理解这些基础概念,你可以进一步提升你的Web开发技能...
本实例主要关注如何使用AJAX处理复杂的JSON(JavaScript Object Notation)数据。JSON是一种轻量级的数据交换格式,因其易于人阅读和编写,同时也易于机器解析和生成,因此在Web服务中广泛使用。 首先,我们需要...
在这个“Json+ajax简单实例”中,我们将深入理解这两者如何协同工作,以及如何使用它们来创建交互式Web应用。 JSON是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript...
在这个"JSON Servlet实例 Ajax应用"中,我们将探讨如何使用Servlet与客户端进行JSON数据交互,并结合Ajax实现异步通信。 首先,了解JSON的基本结构至关重要。JSON由键值对组成,键必须是字符串,且用双引号包围,值...
5. 客户端通过AJAX请求获取JSON数据,然后使用JavaScript的`JSON.parse()`方法解析为JavaScript对象。 通过这个实例,你可以学习到如何在ASP环境中处理JSON数据,以及如何利用AJAX进行前后端的数据交互。这在现代...
理解Ajax和JSON的结合使用是现代Web开发的基础,这有助于开发者创建更具交互性和响应性的网页。通过实际的代码练习和案例分析,你可以深入理解这两个技术的工作原理,并能更好地将它们应用于实际项目中。
在本实例中,我们将深入探讨如何使用Java生成JSON数据,并通过AJAX请求获取并解析这些数据。 1. JSON基础知识: JSON由键值对组成,键必须是字符串,用双引号包围,值可以是字符串、数字、布尔值、数组、对象或...
**JS使用AJAX实例** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在JavaScript中,我们通常使用`XMLHttpRequest`对象或者jQuery库来实现AJAX请求。 1...
在"Struts+Jquery+Ajax+Json应用实例"中,前端使用jQuery库来监听用户事件,比如点击按钮。当事件触发时,jQuery通过Ajax发送一个HTTP请求到后端的Struts Action。在Struts框架中,这个Action会处理请求,执行必要的...
在`.net(C#) ajax+json实例`中,开发者可能创建了一个Web应用,该应用使用C#后端处理业务逻辑,并通过Ajax请求与前端进行通信。前端可能使用JavaScript或者jQuery等库来发送Ajax请求,请求的数据格式为JSON。服务器...
**datatables与Ajax结合使用详解** `datatables`是一个强大的jQuery插件,它能够将HTML表格转化为功能丰富的数据展示和操作界面。而`Ajax`则是异步JavaScript和XML的缩写,是Web开发中用于创建动态网页的关键技术。...
`ajax返回json格式数据`是指客户端使用AJAX技术向服务器发送异步请求,服务器接收到请求后处理数据,然后返回JSON格式的响应。在JavaScript中,可以使用`XMLHttpRequest`对象或现代浏览器的`fetch` API实现这一过程...
在本实例中,我们将探讨如何利用Struts2、jQuery、Ajax和JSON技术实现一个用户登录功能。 首先,我们需要理解Ajax的核心概念,即在不刷新整个页面的情况下,向服务器发送异步请求并获取数据。这极大地提升了用户...
在实际应用中,当后端服务器处理完请求后,可以创建一个`AjaxJson`实例,设置相应的状态码和消息,如果有必要,还可以将处理结果封装到"data"属性中,然后将这个对象转换为JSON字符串,通过HTTP响应发送给前端。...
标签“json”进一步强调了这个压缩包文件可能包含与JSON相关的示例代码、库或者工具,可能帮助开发者更好地理解和使用JSON进行AJAX通信。 至于压缩包中的文件“json”,可能是JSON的示例文件、教程文档,或者是用于...
此项目实例"Javaweb项目ajax请求Json实例"旨在演示如何将服务器端的数据以JSON(JavaScript Object Notation)格式发送到客户端,并在JSP页面上进行解析和展示。JSON是一种轻量级的数据交换格式,因其简洁性和易读性...
本实例将深入探讨如何利用jQuery的AJAX功能与JSON数据格式进行交互,以实现异步数据加载和更新,从而提高网页的用户体验。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和...