第三部分:AJAX 异步 JavaScript和 XML ---- 不是一种新的编程语言
AJAX = DHTML + XHR (在HTML、CSS、JS 基础上 添加 XMLHttpRequest )
传统web方式:浏览器直接将请求发送给服务器,提交请求后,客户端需要等待响应 (用户无法进行任何操作),当响应回来后,整个页面都需要刷新
Ajax web方式:浏览器将请求提交 Ajax 引擎(XMLHttpRequest), 由引擎负责将请求提交给服务器,服务器产生响应也会发回给引擎,引擎更新页面,与传统方式区别是,当浏览器提交请求给Ajax 引擎后,浏览器可以继续操作,当响应回来后,局部刷新页面 ------- 用户的感受非常好
(预加载和懒加载 )
预加载:访问百度,主页非常简洁,在点击搜索前,将搜索结果页面必要数据,通过Ajax加载 ,点击搜索,因为部分搜索结果页面的数据已经加载,结果页面打开非常快
访问商品信息页面,浏览器上面商品信息时,通过Ajax 将下面评论提前加载,用户查看评论时,显示非常快 。
懒加载:访问网易、新浪,主页中信息量非常大 --- 先加载看到部分内容,其它没有第一时间看到内容,通过点击时再进行加载或者使用预加载
编写第一个Ajax程序 (必须存在服务器端)---- 创建Dynamic web project ajaxweb
1.创建XMLHttpRequest对象
属性:onreadystatechange 回调函数、responseText/responseXML 结果数据、status 状态码、readyState Ajax访问状态0 = 未初始化 1 = 正在加载
2 = 已加载3 = 交互中4 = 完成
方法:open(method,url, asynch) :建立对服务器的调用、send(content) :向服务器发送请求
var xmlHttp;
function createXMLHttpRequest() {
try {
xmlHttp = new XMLHttpRequest();
} catch (tryMS) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = null;
// 这里可以报一个错误,无法获得 XMLHttpRequest对象
}
}
}
return xmlHttp;
}
2.将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = callback;
3.使用open方法建立与服务器的连接
open("GET",url?拼接参数); ----- send参数可以为null
open("POST",url) ----- 这时参数要通过send来发送
4.向服务器端发送数据
1)GET方式提交
数据在URL上
xmlHttp.send(null);
2)POST方式提交
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");// 必须写
xmlHttp.send("name=xxx&pwd=xxx");
5.在回调函数中对返回数据进行处理
xmlHttp.readyState == 4
xmlHttp.status == 200
通过 responseText/responseXML 获取结果数据
案例一:采用Ajax校验用户名是否合法(是否存在)
思考:服务器如何将用户名校验结果 通知客户端 ???
<script type="text/javascript">
// Ajax编程第一步 ,创建 XMLHttpRequest
var xmlHttp;
function createXMLHttpRequest() {
try {
xmlHttp = new XMLHttpRequest();
} catch (tryMS) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = null;
// 这里可以报一个错误,无法获得 XMLHttpRequest对象
}
}
}
return xmlHttp;
}
// 采用异步方式 访问服务器,获取用户名是否有效信息
function validateUsername(){
// 第一步
createXMLHttpRequest();
// 第二步 绑定状态触发器 到 函数上
xmlHttp.onreadystatechange = callback;// 会自动调用 callback
// 第三步 建立与服务器目标资源连接
var username = document.getElementById("username").value;
xmlHttp.open("GET","/ajaxweb/checkUsername?username="+username);
// 第四步 发送请求参数
xmlHttp.send(null);
}
// 第五步 回调函数的编写
function callback(){
// 响应完成后 才对数据进行处理
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200) {// 判断响应状态码为200
var data = xmlHttp.responseText ;
// alert(data);
// 接收的是一个HTML代码片段,将片段直接通过 innerHTML 插入指定位置
document.getElementById("showmsg").innerHTML = data;
}
}
}
</script>
</head>
<body>
<!-- 采用Ajax 校验用户名是否已经存在 -->
<h1>注册表单</h1>
<form>
用户名 <input type="text" name="username" id="username" onblur="validateUsername();"/><span id="showmsg"></span><br/>
密码 <input type="password" name="password" id="password" /><br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
常用的服务器返回数据格式
1)HTML片段
2)JSON格式的数据
3)XML格式的数据
HTML代码片段返回值,直接通过innerHTML 插入指定位置显示
案例二:table的数据抓取
product.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
try {
xmlHttp = new XMLHttpRequest();
} catch (tryMS) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = null;
// 这里可以报一个错误,无法获得 XMLHttpRequest对象
}
}
}
return xmlHttp;
}
// 显示商品信息
function showProductInfo(){
// AJAX 编程
createXMLHttpRequest();
xmlHttp.onreadystatechange = callback;
xmlHttp.open("GET","/ajaxweb/listproducts");
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var data = xmlHttp.responseText;// 回写table 数据
document.getElementById("showinfo").innerHTML = data;
}
}
}
</script>
</head>
<body>
<a href="javascript:showProductInfo();">显示商品信息</a>
<hr/>
<div id="showinfo">还没有选择数据</div>
</body>
</html>
/**
* 显示商品信息
*/
public class ListproductsServlet extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 伪造商品数据
List<Product> products = new ArrayList<Product>();
Product p1 = new Product();
p1.setName("冰箱");
p1.setPrice(2000);
Product p2 = new Product();
p2.setName("洗衣机");
p2.setPrice(3000);
products.add(p1);
products.add(p2);
// 返回HTML ,Servlet生成HTML 不方便 --- 使用JSP
request.setAttribute("products", products);
request.getRequestDispatcher("/list.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
list.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- 回写 HTML片段 -->
<table border="1">
<tr>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<c:forEach var="p" items="${products }">
<tr>
<td>${p.name }</td>
<td>${p.price }</td>
</tr>
</c:forEach>
</table>
===================================================================================================================
第四部分:JSON和 XML的数据生成
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。
官网 http://www.json.org/
1、JSON存在两种结构
第一种 {key:value,key:value,... key:value} --- 相当于map
第二种 [value,value,...value] ---- 相当于数组
2、为什么要学JSON ? AJAX 需要从服务器向客户端 返回JSON格式的数据
服务器需要将数据转换为JSON 格式 ------ Json-lib
下载jar包 ---- 导入6个jar包到工程
1) 使用JSONArray.fromObject 将 数组、集合对象 转换为JSON 格式
2) 使用JSONObject.fromObject 将javabean 、map 转换为JSON格式
** 使用JsonConfig 配置不需要转换的属性
将json格式转换为对象
JSONObject jsonObject = JSONObject.fromObject(json格式string);
JsonObject.toBean(jsonObject,Product.class);
@Test public void demo3() { // 使用JsonConfig 配置不需要转换到json 格式的属性 Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); Product product2 = new Product(); product2.setName("洗衣机"); product2.setPrice(2000); List<Product> list = new ArrayList<Product>(); list.add(product); list.add(product2); // 定义JSONConfig用于过滤不需要过滤可以不写 JsonConfig jsonConfig = new JsonConfig(); jsonConfig.setExcludes(new String[] { "price" }); JSONArray jsonArray = JSONArray.fromObject(list, jsonConfig); System.out.println(jsonArray); }
@Test public void demo1() { // 转换对象 到json格式 Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); JSONObject jsonObject = JSONObject.fromObject(product); System.out.println(jsonObject); }
@Test public void demo2() { // 将List集合转换 json格式 Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); Product product2 = new Product(); product2.setName("洗衣机"); product2.setPrice(2000); List<Product> list = new ArrayList<Product>(); list.add(product); list.add(product2); JSONArray jsonArray = JSONArray.fromObject(list); System.out.println(jsonArray); }
3、Xstream将java对象转换 xml文档
转换 java - xml 不需要导入 xpp3_min-1.1.4c
转换 xml - java 需要导入 xpp3_min-1.1.4c
toXML 转换 java对象到 XML
通过Xstream的注解 配置转换过程
Xstream Annotation
@XStreamAlias(别名) 对类和变量设置别名
@XStreamAsAttribute 设置变量生成属性
@XStreamOmitField 设置变量 不生成到XML
@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量 别名
eg:
@XStreamAlias("product") // 别名 public class Product { // 作为属性 @XStreamAsAttribute private String name; // 不想price到xml中 @XStreamOmitField private double price; public String getName() { return name; } public void setName(String name) { this.name = name; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; } }
在Xstream生成XML时使用注解
xStream.autodetectAnnotations(true);//使用注解必须写这句
@Test public void demo3() { // 注解 进行转换 Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); Product product2 = new Product(); product2.setName("洗衣机"); product2.setPrice(2000); List<Product> list = new ArrayList<Product>(); list.add(product); list.add(product2); XStream xStream = new XStream(); xStream.autodetectAnnotations(true); System.out.println(xStream.toXML(list)); }
@Test public void demo1() { // 转换java对象 到xml Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); XStream xStream = new XStream(); //为product.class起个别名 xStream.alias("product", Product.class); System.out.println(xStream.toXML(product)); }
@Test public void demo2() { // 转换 list到xml Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); Product product2 = new Product(); product2.setName("洗衣机"); product2.setPrice(2000); List<Product> list = new ArrayList<Product>(); list.add(product); list.add(product2); XStream xStream = new XStream(); xStream.alias("product", Product.class); xStream.alias("products", List.class); System.out.println(xStream.toXML(list)); }
============================================================================================
Ajax返回客户端三种数据格式 HTML JSON XML ------ 最优是JSON (数据最少)
如果服务器返回客户端JSON 字符串,客户端必须通过 eval() 将json字符串 转换为 JSON对象
* 语法 : eval("("+json+")");
例如:
var json = "{'name':'zhangsan','age':18}";
// 需要将json字符串 转换 js对象
var jsonObj = eval("("+json+")");
alert(jsonObj.name);
alert(jsonObj.age);
重做AJAX案例二 : table数据抓取 ,返回json格式数据
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ }) var xmlHttp; function createXMLHttpRequest(){ try { xmlHttp = new XMLHttpRequest(); } catch (tryMS) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMS) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlHttp = null; // 这里可以报一个错误,无法获得 XMLHttpRequest对象 } } } return xmlHttp; } function listproduct(){ createXMLHttpRequest(); xmlHttp.onreadystatechange=list; xmlHttp.open("GET","/ajax01/AddProduct"); xmlHttp.send(null); } function list(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var data=xmlHttp.responseText; var product=eval('('+data+')') var buf="" buf+="<table border='1'><tr><th>商品名称</th><th>商品价格</th></tr>" for(var i=0;i<product.length;i++){ buf+="<tr><td>"+product[i].name+"</td><td>"+product[i].price+"</td></tr>" } buf+="</table>" $("#div0").html(buf); } } } </script> </head> <body> <a href="javascript:listproduct();">显示商品</a> <div id='div0'> </div> </body> </html>
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Product> list = new ArrayList<Product>(); Product product = new Product(); product.setName("冰箱"); product.setPrice(3000); Product product2 = new Product(); product2.setName("洗衣机"); product2.setPrice(2000); list.add(product); list.add(product2); JSONArray json = JSONArray.fromObject(list); response.setContentType("text/plain;charset=utf-8"); response.getWriter().print(json); }
AJAX案例三:省市 select 联动 ---- 服务器回送XML 片段
xmlHttp.responseXML 接收返回 xml ,直接得到dom 对象
相关推荐
JSON格式通常用于服务器向Web客户端发送数据,比如在AJAX请求中。 XStream是一个用于Java的XML序列化库,它能够将Java对象转换为XML,反之亦然。XStream的核心特性是它的简单性,使得它可以轻松地处理复杂的对象...
Xstream和Json是两种广泛使用的工具,分别用于Java对象到XML和JSON格式的转换。本文将深入探讨Xstream库如何与Json进行交互,以及在实际应用中的使用。 Xstream是一个Java库,它提供了简单、高效的方式来序列化和反...
XStream在运行时使用Java反射机制对要进行序列化的对象树的结构进行探索,并不需要对对象作出修改。XStream可以序列化内部字段,包括私private和final字段,并且支持非公开类以及内部类。 在缺省情况下,XStream不...
本篇文章将深入探讨xStream如何实现Java对象与XML和JSON的相互转换,并提供详细的代码示例。 ### 1. xStream的安装与引入 首先,你需要在项目中添加xStream的依赖。如果你使用的是Maven,可以在pom.xml文件中添加...
标题 "xStream完美转换XML、JSON" 指的是使用xStream库在Java中进行XML与JSON数据格式之间的转换。xStream是一个强大的库,它提供了一种简单的方式来序列化和反序列化Java对象到XML,反之亦然。在这个场景中,它同样...
在这个场景中,我们将探讨如何使用XStream将XML文档转换成Java对象,进而转化为JSON对象。 首先,我们需要引入XStream库。XStream的核心功能是能够将Java对象和XML之间的映射自动化,极大地简化了序列化和反序列化...
**XStream:JavaBean与XML/JSON之间的转换大师** XStream是一个开源库,它为Java对象提供了简单且直观的XML序列化和反序列化的解决方案。它不仅能够将Java对象转换成XML,反之亦然,还能支持JSON格式的转换。这个...
//extjs的jsp标签库及使用实例 exttld1.0.zip exttldbasic.zip exttld1.0-beta.zip exttldexamples.zip //json的转换器及帮助 ezmorph-1.0.6.jar ezmorph-1.0.6-javadoc.jar ...xstream-1.3.1.jar
#### (2) Xstream 序列化 Json Xstream 同样可以将 Java 对象转换为 JSON。只需添加一个 JSON 处理器,如 `jettison`,然后调用 `toXML()` 方法,它会返回 JSON 字符串: ```java Xstream xstream = new Xstream...
xStream完美转换XML、JSON,包括XML转换成对象,以及对象转换成XML,以及对象转换成JSON,以及注意事项
在提供的压缩包中,`employeedata.txt`和`employeedata2.txt`可能包含了一些员工数据的示例,可以使用Xstream进行序列化和反序列化操作。此外,`src`目录可能包含了演示如何使用Xstream处理JSON的源代码。`使用 ...
标题和描述提到的三个JAR文件——xstream-1.3.jar、kxml2-2.3.0.jar和xpp3_min-1.1.4c.jar,是XStream库的组成部分,它们提供了必要的XML解析支持。 1. **XStream核心功能**: - **序列化**: XStream可以将一个...
《xStream完美转换XML、JSON》学习笔记 在IT领域,数据交换是常见的需求,而XML和JSON作为两种广泛使用的数据格式,它们之间的转换尤为重要。xStream是一个强大的Java库,它能够轻松地将Java对象序列化为XML或反...
String jsonString = xstream.toXML(person); ``` **4. 安全性与防护** 由于XStream可以直接反序列化XML来创建对象,这可能引发安全问题,如XML注入攻击。为了防止这种情况,可以设置XStream的安全模式,例如禁用...
Xstream 是 Java 类库,用来将对象序列化成 XML (JSON) 或反序列化为对象。XStream 是一款开源软件,允许在 BSD 许可证的许可下分发。 0x01 漏洞描述 Xstream上次对CVE-2020-26217处理并不彻底,虽然通过黑名单...
在本文中,我们将深入探讨XStream的工作原理、如何使用它来实现bean到XML、XML到bean以及XML到JSON的转换,并给出相关示例。 首先,让我们了解XStream的基本概念。XStream的核心功能是通过反射机制将Java对象转换为...
查询结果通常会映射到Java对象,然后使用XStream(或Gson、Jackson等库)将其转换为JSON字符串。这个字符串作为响应内容返回给前端。 在前端,JavaScript接收到服务器的响应后,解析JSON数据,将新的新闻项动态添加...
7. **支持JSON**:除了XML,XStream还支持JSON格式的数据交换,使得与JavaScript和Web服务的交互更为便捷。 在实际应用中,XStream广泛应用于数据持久化、网络传输、配置文件存储等场景。例如,在Web服务中,...
Oracle Database XStream Guide 11g Release 2 (11.2)-302 Oracle Database XStream 是 Oracle 公司推出的一个数据捕获和事件处理工具,旨在帮助用户实时捕获和处理数据库中的数据变化。下面是 Oracle Database ...