json数据 和 xml数据 在前后端之间的传递 XML DOM 和 HTML DOM 与JS的关系

xml数据 和 json 数据 前后端交互

在Ajax异步交互中，在页面发送请求的同时，并在页面获得数据。数据是以什么格式在前后端进行传递的呢？？

其实我们查询数据库，并将查询到的数据封装在JavaBean中，那怎么样将JavaBean中的数据传到前端呢？

1. 其实在不使用Ajax技术的时候，是将JavaBean保存在作用域中，然后跳转到前端页面(重定向、服务器内部跳转)，在前端页面使用 EL 表达式，或者直接在页面中java代码（request.getAttribute(“name”)），前端页面仅限于jsp文件。

   缺点：服务器压力大，每当发送请求，直接是整个页面的刷新。用户体验效果不好

2. 使用Ajax技术时候，实现局部刷新，当发送请求的同时并获得数据。
   优点：如服务器压力小，用户体验好。
   该技术是在前端有个方法，当请求成功之后就会调用该方法，并获得后端传递过来的数据。
   后端传递数据，使用response.getWrite.println(String); 或者response.getWrite.write(String);
   例如使用jquery实现Ajax异步请求：

<script>
	data1是与请求一起发送到后台的数据，是json数据
	{pid : 1} 或者 {"pid" : 1} 都可以 ，都是js对象的写法
	$.post(url,data1,function(data,status){
		data:就是后台传过来的数据，
		status：表示状态
	 });
</script>

在后端传递数据到前端，都是以文本的形式传递的，文本的形式又包括xml 格式 和 json格式的数据。
简单点说就是要把你想要传递到前端的数据以字符串的形式写成 xml格式 或者 json格式。
他俩本质就是字符串，写的内容按找不同的方式写而已。

将字符串变成这两种格式，有什么方法呢？？

• 直接手动以这种格式敲出来 ---- 显然是不可取的
• 使用别人写好的java类，直接生成我们想要的字符串的格式。导入别人的jar包

1. 将封装好的JavaBean对象转化成xml格式的字符串

导入jar包
xpp3_min-1.1.4c.jar 和 xstream-1.4.4.jar

用法：
     Xstream xstream = new Xstream();
     //将对象转化成xml格式的字符串
     String a = xstream.toXML(Objext); 
     //将XML格式的字符串转化成对象
     Object o = xstream.fromXML(String);
     
	 //设置别名
     xstream.alias("city",CityBean.class);

2. 将封装好的JavaBean对象转化成json格式的字符串

导包
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-dbutils-1.4.jar
commons-lang-2.4.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.2.3-jdk15.jar

用法
//如果是集合使用 JsonArray,将对象转化成字符串
JSONArray  jsonArray = new JSONArray(); //将List<JavaBean>转化成json格式的字符串
JSONArray aa = jsonArray.fromObject(List<JavaBean>);
String bb= aa.toString();

//如果是JavaBean对象，转化成json形式的字符串
JSONObject json = new JSONObject();
JSONObject aa = json.fromObject(JavaBean);
String bb = aa.toString();

//将json形式的字符串转化成为JavaBean对象
JSONObject json = new JSONObject();
json = json.fromObject(String);
json.toBean(json,JavaBean.class)

后台将数据以xml或json 格式的字符串传到前端，那么前端接收到了这种格式的字符串怎么处理呢？？

其实浏览器是认识xml格式的字符串，当你建立一个 a.xml 文件，用浏览器打开都会显示出来，json格式的字符串也是一样(a.json)。

但是我们如果想要在前端取到我们的数据，我们就得操作数据，—
那么怎么操作数据呢？？ 将相应格式的数据转化成相应的对象 怎么转化呢？

在前端中的返回数据调用的方法中有一个参数，直接上代码

<script>
	$.post("CityServlet",data1,function (data,status) {
            alert(status);
            alert(data);
            $("#city").html("<option>--请选择--</option>");
            $(data).each(function () {
                $("#city").append("<option value='"+this.id+"'>"+this.cname+"</option>")
            });
        },"json"); 
        //这个地方的参数可以写"xml","json",表示将返回来的这种格式的字符串转化成相应的对象
        //xml ---》 转化成 XMLDocument对象，之后就操作相应的方法获取数据
        //json ---》 转化成js对象
        //然后我们就根据相应的对象，使用相应的方法获取数据
 </script>

在前端将相应格式的字符串转化成相应的对象，那么对象怎么去操作数据呢？？

• xml格式字符串转化成 XMLDocument对象

该对象中有很多的方法，去查找元素获得内容，和 HTML DOM 类似

在js的函数库jquery中的方法，基本上都适用于去操作XML文档，除了html() 方法

<script>
 $.post("CityServlet",data1,function (data, status) {
          alert(status);
          alert(data);
         $("#selects2").html("<option>--请选择--</option>>");
         //$("#selects2").get(0).options.length=0;
         //这个时候，post方法自动将xml格式的字符串转化成 XMLDocument 对象
         //find方法，给定了一个集合的jquery对象，，在dom输出寻找其后代，并把找到的匹配的后代构造一个新的jquery对象
         var citys = $(data).find("city");
         // alert(citys);
         // alert($(citys));
         $(citys).each(function(){
            var cname = $(this).children("cname").text();
            var id = $(this).children("id").text();
            $("#selects2").append("<option value='"+id+"'>"+cname+"</option>>");
         });
      });
</script>

• json格式的数据转化成 js 对象

  直接去取 对象中 属性的值 就可以了
  

<script>
	$.post("CityServlet",data1,function (data,status) {
            alert(status);
            alert(data);
            $("#city").html("<option>--请选择--</option>");
            $(data).each(function () {
                $("#city").append("<option value='"+this.id+"'>"+this.cname+"</option>")
            });
        },"json");
</script>

XML DOM 和 HTML DOM 与 js 的关系

参考博客

jquery中的方法操作 XML文档 和 html 都可以，除了 html() 方法

JS可以解析HTML文档树和XML文档树，它将一切节点视为文档对象，从而进行操作

HTML和XML：前者负责数据的显示，而后者则负责数据的存储。
而Javascript则负责实现两者之间的交互操作。
例如读取XML中数据的操作就放在Javascript模块中。