\黑马程序员_超全面的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="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='/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,
/*服务器响应数据转换成什么类型*/type function 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 = 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);
}
};
};

ajaxutils.js

<%@ 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="styles.css">
-->
<script type="text/javascript" src="<c:url value='/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='/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>

json3.jsp 调用简化的Ajax

Ajax原生请求和java对象转成json的更多相关文章

  1. Java对象转换成xml对象和Java对象转换成JSON对象

    1.把Java对象转换成JSON对象 apache提供的json-lib小工具,它可以方便的使用Java语言来创建JSON字符串.也可以把JavaBean转换成JSON字符串. json-lib的核心 ...

  2. 将java对象转成json字符串

    如果要将数组.对象.Map.List转换成JSON数据,那我们需要一些jar包: json-lib-2.4-jdk15.jar ezmorph-1.0.6.jar commons-logging.ja ...

  3. Java对象转换成Json字符串是无法获得对应字段名

    问题: 代码中已经标注 @JSONField(name = "attrs") private String abc; public String getA() { return a ...

  4. 如何将java对象转换成json数据

    package cn.hopetesting.com.test;import cn.hopetesting.com.domain.User;import com.fasterxml.jackson.c ...

  5. java对象转换成json

    package com.bjs.acrosstime.utils; import java.util.ArrayList; import java.util.Date; import java.uti ...

  6. FastJson将Java对象转换成json

    确保环境依赖都配置好! 1.在pom.xml导入依赖 <dependency> <groupId>com.alibaba</groupId> <artifac ...

  7. java对象转化为json字符串并传到前台

    package cc.util; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; import ...

  8. 用Delphi的TIdHttp控件发起POST请求和Java的Servlet响应

    http://blog.csdn.net/panjunbiao/article/details/8615880   用Delphi的TIdHttp控件发起POST请求和Java的Servlet响应

  9. json 字符串转换成对象,对象转换成json字符串

    json   字符串转换成对象,对象转换成json字符串 前端: 方法一: parseJSON方法:   [注意jquery版本问题] var str = '{"name":&qu ...

随机推荐

  1. bzoj 2002: [Hnoi2010]Bounce 弹飞绵羊(分块算法)

    传送门 题意: 中文题意,不再赘述. 题解: 下午在补分块算法的相关知识,看到某大神博客推荐的这道题目,就试着做了做: TLE了一下午可还行: 我的思路: 将这 n 个点分成 sqrt(n) 块: i ...

  2. Traffic Management Gym - 101875G

    题意: 有n辆车,在一条直线上运动,给定位置和速度.如果后车追上前车,则后车不会超车,而已变成前车的速度前进,问最后一次上述车速变化发生在何时. 思路: 假设有一下车辆,数字代表移动速度,具体位置未知 ...

  3. MySQL准备

    目录 数据库管理软件的由来 什么是数据? 什么是数据库管理系统/软件? 数据库管理的三个阶段 MySQL 概述SQL语句 安装MySQL(在命令行的操作全要用管理员权限) 将MySQL服务制作为win ...

  4. python自动化开发-[第三天]-编码,函数,文件操作

    今日概要 - 编码详解 - 文件操作 - 初识函数 一.字符编码 1.代码执行过程 代码-->解释器翻译-->机器码-->执行 2.ASCII ASCII:一个Bytes代表一个字符 ...

  5. MongoDB硬件及开发标准规范

    大数据平台部 运维研发组 MongoDB硬件及开发标准规范             说明:   无特殊情况,均以此文档为参考文件搭建,如有特殊情况,需与运维研发组和开发组商议后进行更改. MongoD ...

  6. Hbase记录-HBase性能优化指南

    垃圾回收优化当region服务器处理大量的写入负载时,繁重的任务会迫使JRE默认的内存分配策略无法保证程序的稳定性 所以我们可能需要对region服务器的垃圾回收机制进行一些参数调整(因为master ...

  7. ES6checker ES6浏览器检测

    检测地址如下: http://ruanyf.github.io/es-checker/index.cn.html Chrome 44检测结果如下:

  8. CRM项目之RBAC权限组件-day26

    写在前面 上课第26天,打卡: 世间安得双全法 不负如来不负卿 s17day26 CRM项目 项目概要:XX公司CRM - 权限管理,公共组件,app ***** - 熟悉增删改查,Low *** - ...

  9. python模块之自定义模块

    模块概述 到此之前,我们都是在一个py文件里操作,接下来,我们学习模块的内容,可以从其他文件引入内容(如函数等) 1. 什么是模块 一个py文件就是一个模块,模块是一些相似功能的集合体 2. 为什么要 ...

  10. Kibana 搜索语法

    Kibana 搜索语法 Kibana 支持三种搜索语法, 分别是 Lucene query 语法, 基于 json 的 ES query语法, 以及 Kuery 语法. 前两种语法可以直接使用, Ku ...