AJAX基础学习4之JSON
2014-07-29 15:08
351 查看
1、解析JSON
JSON只是一种文本字符串。它被存储在responseText属性中
为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。函数eval会把一个字符串当做他的参数。然后这个字符串会被当做JavaScript代码来执行。因为JSON的字符串就是有JavaScript代码构成的。所以它本身是可执行的
具体代码：
JSP
web.xml
AccessServlet.java
ajaxutil.js
运行结果：
注：
①使用eval函数将传过来的JSON数据转换成对象，之后再根据转换成的对象属性获取值
②在自己写的JSON字符串是注意格式不要写错。在字符转值使用' ' 隔开，以免将字符串与属性混，造成浏览器无法解析
2、获取多个JSON对象
JSP
AccessServlet.java
ajaxutil.js
注：
获取多个对象时在用数组方式进行获取
3、
JSON只是一种文本字符串。它被存储在responseText属性中
为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。函数eval会把一个字符串当做他的参数。然后这个字符串会被当做JavaScript代码来执行。因为JSON的字符串就是有JavaScript代码构成的。所以它本身是可执行的
具体代码：
JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="./js/ajaxutil.js"></script> <title>My JSP 'index.jsp' starting page</title> </head> <body> <form action="" enctype="application/x-www-form-urlencoded"> <input type="button" value="提交" name="ok" id="ok"/> </form> </body> </html>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>AccessServlet</servlet-name> <servlet-class>com.servlet.AccessServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AccessServlet</servlet-name> <url-pattern>/accessServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
AccessServlet.java
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AccessServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// request.setCharacterEncoding("UTF-8");
// response.setContentType("html/text,charset=UTF-8");
// PrintWriter out = response.getWriter();
//
// System.out.println("****************************");
// System.out.println("a:"+request.getParameter("a"));
// System.out.println("b:"+request.getParameter("b"));
// System.out.println("c:"+request.getParameter("c"));
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("html/text,charset=UTF-8");
PrintWriter out = response.getWriter();
// System.out.println("**post***********************");
// System.out.println("a:"+request.getParameter("a"));
// System.out.println("b:"+request.getParameter("b"));
// System.out.println("c:"+request.getParameter("c"));
System.out.println("*******1************");
String str = "{pid:10,pname:'zhutianpeng'}";
out.println(str);
System.out.println("***********2*********");
}
}ajaxutil.js
/**
* 创建XMLHttpRequest对象
* @returns
*/
function ajaxFunction(){
var httpRequest;
try{
//Firefox,Opera 8.0+ ,Safari
httpRequest = new XMLHttpRequest();
}catch(e){
try{
//Internet Explorer
httpRequest = new ActionXObject("Msxm12.XMLHTTP");
}catch(e){
try{
httpRequest = new ActionXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return httpRequest;
}
window.onload = function(){
//<input type="button" name="ok" id="ok" value="测试服务器连接">
/**
* GET方法
*/
// document.getElementById("ok").onclick=function(){
//
// //1.获取XMLHttpRequest对象
// var xmlRequest = ajaxFunction();
//
// xmlRequest.onreadystatechange=function(){
// if(xmlRequest.readyState==4){
// if(xmlRequest.status==200||xmlRequest.statue==304){
// //接收服务器返回的数据
// var date = xmlRequest.responseText;
//
// }
// }
// }
// //2.打开连接
// xmlRequest.open("get","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
// //3.发送数据
// xmlRequest.send(null);
// //4.接收数据
//
// }
/**
* POST方法
*/
document.getElementById("ok").onclick=function(){
//1.获取XMLHttpRequest对象
var xmlRequest = ajaxFunction();
xmlRequest.onreadystatechange=function(){
if(xmlRequest.readyState==4){
if(xmlRequest.status==200||xmlRequest.statue==304){
//接收服务器返回的数据
var data = xmlRequest.responseText;
var dataObj = eval("("+data+")");
alert("pid:"+dataObj.pid+" pname:"+dataObj.pname);
}
}
}
//2.打开连接
// xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
// xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// //3.发送数据
// xmlRequest.send("b= 00&c=9");
// //4.接收数据
xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime(),true);
xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.发送数据
xmlRequest.send(null);
//4.接收数据
}
}运行结果：
注：
①使用eval函数将传过来的JSON数据转换成对象，之后再根据转换成的对象属性获取值
②在自己写的JSON字符串是注意格式不要写错。在字符转值使用' ' 隔开，以免将字符串与属性混，造成浏览器无法解析
2、获取多个JSON对象
JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="./js/ajaxutil.js"></script> <title>My JSP 'index.jsp' starting page</title> </head> <body> <form action="" enctype="application/x-www-form-urlencoded"> <input type="button" value="提交" name="ok" id="ok"/> </form> </body> </html>
AccessServlet.java
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AccessServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// request.setCharacterEncoding("UTF-8");
// response.setContentType("html/text,charset=UTF-8");
// PrintWriter out = response.getWriter();
//
// System.out.println("****************************");
// System.out.println("a:"+request.getParameter("a"));
// System.out.println("b:"+request.getParameter("b"));
// System.out.println("c:"+request.getParameter("c"));
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("html/text,charset=UTF-8");
PrintWriter out = response.getWriter();
// System.out.println("**post***********************");
// System.out.println("a:"+request.getParameter("a"));
// System.out.println("b:"+request.getParameter("b"));
// System.out.println("c:"+request.getParameter("c"));
System.out.println("*******1************");
String str = "[{pid:10,pname:'zhutianpeng'},{pid:11,pname:'zhutianpeng1'},{pid:12,pname:'zhutianpeng2'}]";
out.println(str);
System.out.println("***********2*********");
}
}ajaxutil.js
/**
* 创建XMLHttpRequest对象
* @returns
*/
function ajaxFunction(){
var httpRequest;
try{
//Firefox,Opera 8.0+ ,Safari
httpRequest = new XMLHttpRequest();
}catch(e){
try{
//Internet Explorer
httpRequest = new ActionXObject("Msxm12.XMLHTTP");
}catch(e){
try{
httpRequest = new ActionXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return httpRequest;
}
window.onload = function(){
//<input type="button" name="ok" id="ok" value="测试服务器连接">
/**
* GET方法
*/
// document.getElementById("ok").onclick=function(){
//
// //1.获取XMLHttpRequest对象
// var xmlRequest = ajaxFunction();
//
// xmlRequest.onreadystatechange=function(){
// if(xmlRequest.readyState==4){
// if(xmlRequest.status==200||xmlRequest.statue==304){
// //接收服务器返回的数据
// var date = xmlRequest.responseText;
//
// }
// }
// }
// //2.打开连接
// xmlRequest.open("get","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
// //3.发送数据
// xmlRequest.send(null);
// //4.接收数据
//
// }
/**
* POST方法
*/
document.getElementById("ok").onclick=function(){
//1.获取XMLHttpRequest对象
var xmlRequest = ajaxFunction();
xmlRequest.onreadystatechange=function(){
if(xmlRequest.readyState==4){
if(xmlRequest.status==200||xmlRequest.statue==304){
//接收服务器返回的数据
var data = xmlRequest.responseText;
var dataObj = eval("("+data+")");
// alert("pid:"+dataObj.pid+" pname:"+dataObj.pname);
for(var i=0;i<dataObj.length;i++){
alert("pid:"+dataObj[i].pid+" pname:"+dataObj[i].pname);
}
}
}
}
//2.打开连接
// xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
// xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// //3.发送数据
// xmlRequest.send("b= 00&c=9");
// //4.接收数据
xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime(),true);
xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.发送数据
xmlRequest.send(null);
//4.接收数据
}
}运行结果：注：
获取多个对象时在用数组方式进行获取
3、
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX基础学习4之JSON
- AJAX基础学习3之JSON
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
- Ajax基础教程学习(5)_读取响应首部
- Ajax基础学习（一）——学号验证
- Ajax - 基础教程第八章例子学习四
- Ajax - 基础教程第八章例子学习五
- Ajax - JSON （JavaScript Object Notation）学习
- Ajax基础教程学习(3)_创建自动刷新页面
- 转载--Ajax学习---使用 JSON 进行数据传输
- JSON基础学习
- 【AJAX学习笔记】JSON数据编码解码技术
- 实例学习AJAX－基础1
- Ajax学习——JSON
- ArcGIS客户端开发学习笔记（三）——JSON基础
- AJAX学习之序列二：struts2 jquery json 实现AJAX 注册ID验证
- AJAX学习基础：简单介绍数据岛使用方法
- 实例学习AJAX－基础1
- 实例学习AJAX－基础1