`

ajaxday2 ajax json xstream

ajaxjsonxstream 
阅读更多

第三部分：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 对象

0
顶
0
踩
分享到：
| jquery星级评分
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    json XStream

    JSON格式通常用于服务器向Web客户端发送数据，比如在AJAX请求中。 XStream是一个用于Java的XML序列化库，它能够将Java对象转换为XML，反之亦然。XStream的核心特性是它的简单性，使得它可以轻松地处理复杂的对象...

    Xstream 类与Json之间转换

    Xstream和Json是两种广泛使用的工具，分别用于Java对象到XML和JSON格式的转换。本文将深入探讨Xstream库如何与Json进行交互，以及在实际应用中的使用。 Xstream是一个Java库，它提供了简单、高效的方式来序列化和反...

    XStream XML与Json转换

    XStream在运行时使用Java反射机制对要进行序列化的对象树的结构进行探索，并不需要对对象作出修改。XStream可以序列化内部字段，包括私private和final字段，并且支持非公开类以及内部类。 在缺省情况下，XStream不...

    xstream将xml文档转换成json对象

    在这个场景中，我们将探讨如何使用XStream将XML文档转换成Java对象，进而转化为JSON对象。 首先，我们需要引入XStream库。XStream的核心功能是能够将Java对象和XML之间的映射自动化，极大地简化了序列化和反序列化...

    xStream转换xml和json源码

    本篇文章将深入探讨xStream如何实现Java对象与XML和JSON的相互转换，并提供详细的代码示例。 ### 1. xStream的安装与引入 首先，你需要在项目中添加xStream的依赖。如果你使用的是Maven，可以在pom.xml文件中添加...

    转载 xStream完美转换XML、JSON

    标题 "xStream完美转换XML、JSON" 指的是使用xStream库在Java中进行XML与JSON数据格式之间的转换。xStream是一个强大的库，它提供了一种简单的方式来序列化和反序列化Java对象到XML，反之亦然。在这个场景中，它同样...

    XStream在JavaBean与XML/JSON 之间相互转换

    **XStream：JavaBean与XML/JSON之间的转换大师** XStream是一个开源库，它为Java对象提供了简单且直观的XML序列化和反序列化的解决方案。它不仅能够将Java对象转换成XML，反之亦然，还能支持JSON格式的转换。这个...

    json,xstream,ezmorph jar包

    //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

    Xstream操作Xml与Json.doc

    #### (2) Xstream 序列化 Json Xstream 同样可以将 Java 对象转换为 JSON。只需添加一个 JSON 处理器，如 `jettison`，然后调用 `toXML()` 方法，它会返回 JSON 字符串： ```java Xstream xstream = new Xstream...

    xStream完美转换XML、JSON

    xStream完美转换XML、JSON，包括XML转换成对象，以及对象转换成XML，以及对象转换成JSON，以及注意事项

    Xstream for Json 完整范例（绝对好用）

    在提供的压缩包中，`employeedata.txt`和`employeedata2.txt`可能包含了一些员工数据的示例，可以使用Xstream进行序列化和反序列化操作。此外，`src`目录可能包含了演示如何使用Xstream处理JSON的源代码。`使用 ...

    《xStream完美转换XML、JSON》学习笔记

    《xStream完美转换XML、JSON》学习笔记 在IT领域，数据交换是常见的需求，而XML和JSON作为两种广泛使用的数据格式，它们之间的转换尤为重要。xStream是一个强大的Java库，它能够轻松地将Java对象序列化为XML或反...

    XStream使用例子

    String jsonString = xstream.toXML(person); ``` **4. 安全性与防护** 由于XStream可以直接反序列化XML来创建对象，这可能引发安全问题，如XML注入攻击。为了防止这种情况，可以设置XStream的安全模式，例如禁用...

    xstream-1.4.15.jar

    Xstream 是 Java 类库，用来将对象序列化成 XML (JSON) 或反序列化为对象。XStream 是一款开源软件，允许在 BSD 许可证的许可下分发。 0x01 漏洞描述 Xstream上次对CVE-2020-26217处理并不彻底，虽然通过黑名单...

    XStream转换

    在本文中，我们将深入探讨XStream的工作原理、如何使用它来实现bean到XML、XML到bean以及XML到JSON的转换，并给出相关示例。 首先，让我们了解XStream的基本概念。XStream的核心功能是通过反射机制将Java对象转换为...

    Oracle Database XStream Guide 11g Release 2 (11.2)-302

    Oracle Database XStream Guide 11g Release 2 (11.2)-302 Oracle Database XStream 是 Oracle 公司推出的一个数据捕获和事件处理工具，旨在帮助用户实时捕获和处理数据库中的数据变化。下面是 Oracle Database ...

    ajax版无刷新显示最新新闻+javascript+Java+Servlet+XStream

    查询结果通常会映射到Java对象，然后使用XStream（或Gson、Jackson等库）将其转换为JSON字符串。这个字符串作为响应内容返回给前端。 在前端，JavaScript接收到服务器的响应后，解析JSON数据，将新的新闻项动态添加...

    xstream-1.4.2.jar

    7. **支持JSON**：除了XML，XStream还支持JSON格式的数据交换，使得与JavaScript和Web服务的交互更为便捷。 在实际应用中，XStream广泛应用于数据持久化、网络传输、配置文件存储等场景。例如，在Web服务中，...

    xml解析及使用XStream实现javaBean与xml之间的转换

    2. **XStream简介** XStream是Java中一个强大的库，用于将Java对象序列化为XML，反之亦然。它提供了简单直观的API，使得JavaBean与XML之间的转换变得非常容易。 3. **XStream的使用步骤** - 引入依赖：在项目中...

Magicbox
Global site tag (gtag.js) - Google Analytics