首页 > 代码库 > Ajax原生请求和java对象转成json
Ajax原生请求和java对象转成json
\黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3
本代码中有模拟 jquery里面的对Ajax的简化封装：
json2.jsp Ajax原生请求
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP ‘json2.jsp‘ starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css"> --><script type="text/javascript">function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) { alert("哥们儿，您用的是什么浏览器啊？"); throw e; } } }}window.onload = function() { // 获取btn元素 var btn = document.getElementById("btn"); btn.onclick = function() {//给按钮的点击事件上添加监听 // 使用ajax得到服务器端响应，把结果显示到h3中 //1. 得到request var xmlHttp = createXMLHttpRequest(); //2. 连接 xmlHttp.open("GET", "<c:url value=http://www.mamicode.com/‘/AServlet‘/>", true); //3. 发送 xmlHttp.send(null); //4. 给xmlHttp的状态改变事件上添加监听 xmlHttp.onreadystatechange = function() { //双重判断 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { var text = xmlHttp.responseText;//它是一个json串 // 执行json串 var person = eval("(" + text + ")"); var s = person.name + ", " + person.age + ", " + person.sex; document.getElementById("h3").innerHTML = s; } }; };};</script> </head> <body> <%-- 点击按钮后，把服务器响应的数据显示到h3元素中 --%><button id="btn">点击这里</button><h1>JSON之Hello World</h1><h3 id="h3"></h3> </body></html>
package cn.itcast.demo1;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import org.junit.Test;/** * 演示JSON-LIB小工具 * @author cxf * */public class Demo1 { /* * 当map来用 */ @Test public void fun1() { JSONObject map = new JSONObject(); map.put("name", "zhangSan"); map.put("age", 23); map.put("sex", "male"); String s = map.toString(); System.out.println(s); } /* * 当你已经有一个Person对象时，可以把Person转换成JSONObject对象 */ @Test public void fun2() { Person p = new Person("liSi", 32, "female"); // 把对象转换成JSONObject类型 JSONObject map = JSONObject.fromObject(p); System.out.println(map.toString()); } /** * JSONArray */ @Test public void fun3() { Person p1 = new Person("zhangSan", 23, "male"); Person p2 = new Person("liSi", 32, "female"); JSONArray list = new JSONArray(); list.add(p1); list.add(p2); System.out.println(list.toString()); } /** * 原来就有一个List，我们需要把List转换成JSONArray */ @Test public void fun4() { Person p1 = new Person("zhangSan", 23, "male"); Person p2 = new Person("liSi", 32, "female"); List<Person> list = new ArrayList<Person>(); list.add(p1); list.add(p2); System.out.println(JSONArray.fromObject(list).toString()); }}
// 创建request对象function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) { alert("哥们儿，您用的是什么浏览器啊？"); throw e; } } }}/* * option对象有如下属性 */ /*请求方式*/method, /*请求的url*/ url, /*是否异步*/asyn, /*请求体*/params, /*回调方法*/callback, /*服务器响应数据转换成什么类型*/typefunction ajax(option) { /* * 1. 得到xmlHttp */ var xmlHttp = createXMLHttpRequest(); /* * 2. 打开连接 */ if(!option.method) {//默认为GET请求 option.method = "GET"; } if(option.asyn == undefined) {//默认为异步处理 option.asyn = true; } xmlHttp.open(option.method, option.url, option.asyn); /* * 3. 判断是否为POST */ if("POST" == option.method) { xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } /* * 4. 发送请求 */ xmlHttp.send(option.params); /* * 5. 注册监听 */ xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断 var data; // 获取服务器的响应数据，进行转换！ if(!option.type) {//如果type没有赋值，那么默认为文本 data =http://www.mamicode.com/ xmlHttp.responseText; } else if(option.type == "xml") { data = xmlHttp.responseXML; } else if(option.type == "text") { data = xmlHttp.responseText; } else if(option.type == "json") { var text = xmlHttp.responseText; data = eval("(" + text + ")"); } // 调用回调方法 option.callback(data); } };};
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP ‘json3.jsp‘ starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css"> --><script type="text/javascript" src="<c:url value=http://www.mamicode.com/‘/ajax-lib/ajaxutils.js‘/>"></script><script type="text/javascript">window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { /* 1. ajax */ ajax( { url:"<c:url value=http://www.mamicode.com/‘/AServlet‘/>", type:"json", callback:function(data) { document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex; } } ); };};</script> </head> <body><%-- 点击按钮后，把服务器响应的数据显示到h3元素中 --%><button id="btn">点击这里</button><h1>显示自己封装的ajax小工具</h1><h3 id="h3"></h3> </body></html>
Ajax原生请求和java对象转成json
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。