Ajax基础

八、Ajax基础

1. RIC和传统Web

1.1 RIC

• RIC（Rich Internet Application）：富客户端英特网应用程序。将内容都放在客户端
• 特点
  1. 更加丰富绚丽的界面元素
  2. 局部刷新(无刷新) :节省网络带宽资源
  3. 异步调用:免去等待webServer响应,更连续体验
• 三种实现
  

1.2 传统web

• 缺点
  • 重新加载页面所有内容,加重server负担，浪费带宽
  • 只能保存请求发出前的用户操作
  • 响应结束前用户处于等待状态,交互不连贯
  • 界面需要大量css,js代码

2. Ajax

2.1 Ajax简介

• Ajax：Asynchronous JavaScript And XML（异步的JS和XML）
• 局部刷新(无刷新)
  • 刷新页面局部区域，节省网络带宽资源，减轻webServer负担
• 异步调用
  • 用户在请求的同时依旧可以做别的事，Ajax引擎在后台自动请求服务器，用户免去等待webServer响应
• 实际意义
  • 不发生页面跳转、不刷新页面、异步载入内容并改写页面内容的技术
  • 理解为通过JS向服务器发送请求
  • Ajax：一种不用刷新整个页面便可与服务器通讯的办法
• Ajax缺点
  • 页面局部刷新，导致后退等功能失效
• 模型对比
  • 传统模型
    • 客户端向服务器发送一个请求，服务器返回整个页面，如此反复
      
  • Ajax模型
    • 数据在客户端与服务器之间独立传输。服务器不再返回整个页面
      

2.2 Ajax描述

• AJAX 并非编程语言
• Ajax的组合
  • 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
  • JavaScript 和 HTML DOM（显示或使用数据）
• 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
  • 使用JavaScript绑定和处理所有数据
• Ajax原理
  • 原理1
    
  • 原理2
    

2.3 Ajax工作流程

2.4 同步与异步

• 同步处理
  • 用户向服务器发送一个请求时，在服务器响应之前，该用户不能进行任何操作，只能等待服务器响应
  • 即使整个页面中只有一小部分内容发生改变，也要刷新整个页面
• 异步处理
  • 用户发送请求时，通过AJAX向服务器发送请求，发送请求时，该用户可以进行任何操作。当服务器响应结束后，响应信息会直接发送到AJAX中，AJAX根据响应内容做处理
  • AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新

2.5 Ajax的使用步骤

1. 创建XMLHttpRequest对象
   • 如：xhttp = new XMLHttpRequest();
     
2. 定义回调函数
   • xhttp.onreadystatechange = returnFunction
     
3. 规定请求的类型，初始化XMLHttpRequest组件
   • 如：xhttp.open(“GET”, “AjaxServletText?uname=”+uname, true);
     
4. 向服务器发送请求
   • 如：xhttp.send();
     
5. 书写回调函数
   

   function dianji() {var uname = document.getElementById("uname").value;// 1. 创建XMLHttpRequest对象var xhttp = new XMLHttpRequest();// 2. 定义回调函数xhttp.onreadystatechange = returnFunction;// 3. 初始化组件，规定请求类型xhttp.open("GET", "AjaxServletText?uname=" + uname, true);// 4. 发送请求xhttp.send();
   }function returnFunction() {if (this.readyState == 4 && this.status == 200) {var returnData = this.responseText;console.log(returnData);}
   }
   

• 两种方式比较
  

3. XMLHttpRequest对象

3.1 XMLHttpRequest概述

• XMLHttpRequest（通常简称为 XHR）是一个浏览器内置的JavaScript对象，它允许从服务器异步加载数据
• XMLHttpRequest 对象用于在后台与 Web 服务器交换数据
• 可以更新网页的部分内容，而无需重新加载整个页面
• XMLHttpRequest的创建
  • new XMLHttpRequest()；
  • 如：xhttp = new XMLHttpRequest();
    

3.2 属性

• 属性名
  • Onreadystatechange
    • 设置回调函数(状态改变一次调用一次，会调用四次)

    xhttp.onreadystatechange = returnFunction
    

    • 该事件处理函数由服务器触发，在 Ajax 执行过程中，服务器会通知客户端当前的通信状态
      
  • readyState
    • 表示Ajax请求的当前状态

    xhttp.readyState == 4 
    

    • 0: 请求未初始化。还没有调用 open 方法
    • 1: 服务器连接已建立。 open 方法已被调用，但 send 方法还没有被调用
    • 2: 请求已接收。send 已被调用。请求已经开始
    • 3: 正在处理请求。服务器正在发送响应
    • 4: 请求已完成且响应已就绪。响应发送完毕
      
    • 每次 readyState 值的改变，都会触发 readystatechange 事件
  • status
    • 服务器应答状态码

    xhttp.status == 200
    

    • 200: “OK”
    • 403: “Forbidden”
    • 404: “Page not found”
      
  • responseText
    • 获取字符串形式的响应数据

    var returnDate = xhttp.responseText;
    

    
  • responseXML
    • 获取 XML 数据形式的响应数据

    var returnXml = xhttp.responseXML;
    

    • MIME 类型必须为 text/xml
      

    response.setContentType("text/xml;charset=utf-8");
    

3.3 方法

• open(method,url,asynch)：规定请求的类型，初始化XMLHttpRequest组件
  • method：请求类型，如：get、post等
  • url：路径字符串，指向所请求的服务器上的文件，如：SaveUserServlet
  • asynch：请求传输方式
    • true：异步请求
    • false：同步请求

  xhttp.open("GET", "AjaxServletText?uname="+uname, true);
  

• send()：向服务器发送请求
  • get请求时无参数
  • post请求时参数访问服务器时携带的数据

  xhttp.send();
  

• 使用post请求时需要设置请求消息头
  • 在open()和send()之间添加xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

4. JSON详解

4.1 JSON简介

• JSON（JavaScript Object Notation）：JavaScript 对象标记法，一种简单的数据传输格式
• 什么是JSON？
  • JSON 是一种存储和交换数据的语法
  • JSON 是通过 JavaScript 对象标记法书写的文本
  • JSON独立于语言
  • JSON是JavaScript原生格式，在JavaScript中处理JSON数据不需要任何特殊的API或工具包

4.2 JSON规则

• 对象是一个无序的“名称/值对”集合
• 一个对象以“ { ”开始，“ } ”结束
• 每个“名称”后跟一个“ : ”
• “名称/值对”之间使用“ , ”分隔
• 键必须是字符串，由双引号包围
• 花括号容纳对象，方括号容纳数组
• 对象描述中存储的数据可以是字符串，数字或者布尔值。也可存储函数（对象的方法）
  

4.3 解析JSON

• JSON 只是一种文本字符串。它被存储在 responseText 属性中
• JSON 是同 web 服务器进行数据传输
• 数据在浏览器和服务器交互的过程中，数据永远是字符串
• 通过 JSON.parse() 解析数据，可以将以 JSON 格式写的文本数据（字符串）转化成 JSON对象
• 通过 JSON.stringify() 解析数据，可以将JSON对象转化成以 JSON 格式写的文本数据（字符串）

4.4 JSON与字符串转换方法

• JSON.parse()
  • 将字符串转换成Json对象
  • 字符串必须以 JSON 格式书写，否则会出现语法错误

  var myObj =  JSON.parse(str);
  

• JSON.stringify()
  • 将Json对象转换成字符串
  • 在 JSON 中，不允许日期对象。JSON.stringify() 函数将把任何日期转换为字符串

  var userstr = JSON.stringify(user);
  

4.5 JAVA处理JSON框架

• 框架
  • Hutool工具
  • Gson google提供包
  • fastJson 阿里巴巴包
  • Jackson Spring提供，默认
  • json.org和net.json等
• 利用Hutool工具传输JSON
  • 不用记，用时打开胡图工具搜
  • 步骤

    // 创建JSON对象
    JSONObject jsonObject = new JSONObject();
    // 设置JSON对象的属性和属性值
    jsonObject.set("name", "张三");
    jsonObject.set("age", 35);
    // 将JSON对象转换成字符串（在数据交互时传输的是字符串）
    String jsonStr = JSONUtil.toJsonStr(jsonObject);
    out.print(jsonStr);
    

    var xhttp;
    function dianji() {xhttp = new XMLHttpRequest();xhttp.onreadystatechange = end;xhttp.open("GET", "HutoolServlet", true);xhttp.send();
    }
    function end() {if(xhttp.readyState == 4 && xhttp.status == 200) {var returnData = xhttp.responseText; //{"name":"张三","age":35}//将获取到的字符串转换成JSON对象var jsonObj = JSON.parse(returnData); //{name: "张三", age: 35}var myspan = document.getElementById("myspan");myspan.innerHTML = jsonObj.name + "->" +jsonObj.age;}
    }
    

5. JSON、XML、HTML优缺点

5.1 JSON

• 优点
  • 作为一种数据传输格式，更加灵巧
  • JSON 不需要从服务器端发送含有特定内容类型的首部信息
  • 内容简单，数据量小
• 缺点
  • 语法过于严谨
  • 代码不易读

5.2 HTML

• HTML 由一些普通文本组成。
• 如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中
• 不用从 responseText 属性中读取数据，可以直接将它插入到页面中
• 插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性
• 优点
  • 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析
  • HTML 的可读性好
  • HTML 代码块与 innerHTML 属性搭配，效率高
• 缺点
  • HTML 不合适通过 AJAX 更新一篇文档的多个部分
  • innerHTML 并非 DOM 标准

5.3 XML

• 优点
  • XML 是一种通用的数据格式
  • 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记
  • 利用 DOM 可以完全掌控文档
• 缺点
  • 如果文档来自于服务器，就必须得保证文档含有正确的首部信息
  • 若文档类型不正确，那么 responseXML 的值将是空的
  • 当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂

5.4 JSON与XML对比

• 相同点

  • JSON 和 XML 均可用于从 web 服务器接收数据
  • JSON 和 XML 都是“自描述的”（人类可读的）
  • JSON 和 XML 都是分级的（值中有值）
  • JSON 和 XML 都能被大量编程语言解析和使用
  • JSON 和 XML 都能被 XMLHttpRequest 读取

• 不同点

  XML 必须使用 XML 解析器进行解析，而 JSON 可通过标准的 JavaScript 函数进行解析

  • JSON 不使用标签
  • JSON 更短
  • JSON 的读写速度更快
  • JSON 可使用数组

• 对比小结

  • 若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
  • 如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势，目前用最多数据交换格式
  • 当使用WebService数据交换, XML 文档是首选, 因为 XML 是 webService 服务领域的 “世界语”
  • 建议新开发接口使用json进行数据交换

6. XML

6.1 XML简介

• XML(eXtensible Markup Language)：可扩展标记语言
• XML用来传输和存储数据，HTML用来展现数据
• XML标签没有被预定义，需要用自己定义
• XML具有自我描述性
• XML 是 W3C 的推荐标准
• XML的用途
  • XML 把数据从 HTML 分离：通过 XML，数据能够存储在独立的 XML 文件中
  • XML 简化数据共享：XML 数据以纯文本格式进行存储，是一种独立于软件和硬件的数据存储方法
  • XML 简化数据传输：通过 XML，可以在不兼容的系统之间轻松地交换数据
  • XML 简化平台的变更：XML 数据以文本格式存储。这使得 XML 在不损失数据的情况下，更容易扩展或升级到新的操作系统、新应用程序或新的浏览器
  • XML 用于创建新的 Internet 语言
    • XHTML - 最新的 HTML 版本
    • WSDL - 用于描述可用的 web service
    • WAP 和 WML - 用于手持设备的标记语言
    • RSS - 用于 RSS feed 的语言
    • RDF 和 OWL - 用于描述资源和本体
    • SMIL - 用于描述针针对 web 的多媒体
• XML的应用范围
  • 在AJAX中使用XML回传数据，如：text/xml
  • 使用XML存储少量的数据，如：数据临时存储在xml中，例如游戏中的装备
  • 使用XML作为表现层
    • 使用XML作为数据传输的中间格式，如：数据传输的接口
    • 使用XML作为配置文件，如：web.xml

6.2 XML 与 HTML 的差异

• XML 不是 HTML 的替代
• XML 被设计为传输和存储数据，其焦点是数据的内容
• HTML 被设计用来显示数据，其焦点是数据的外观
• HTML 旨在显示信息，而 XML 旨在传输信息
  

6.3 XML声明

• <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
• XML声明一般是XML文档的第一行
• 组成
  • version ：文档符合XML1.0规范
  • encoding ：文档字符编码，默认为"UTF-8“
  • standalone：文档定义是否在一个文件内（yes/no）
• XML语法规则
  • 必须有根元素
  • 标签区分大小写
  • 标签必须是封闭的
  • 标签嵌套格式要正确
• 属性

  • XML 元素可以在开始标签中包含属性，类似 HTML

  • 属性通常提供不属于数据组成部分的信息

  • 属性值须加引号

  • 避免 XML 属性

    尽量使用元素来描述数据，仅仅使用属性来提供与数据无关的信息

    • 属性无法包含多重的值（元素可以）
    • 属性无法描述树结构（元素可以）
    • 属性不易扩展（为未来的变化）
    • 属性难以阅读和维护
      

6.4 元素

• XML 元素指的是从（且包括）开始标签直到（且包括）结束标签的部分
• 元素可包含其他元素、文本或者两者的混合物。元素也可以拥有属性
• 元素命名规范
  • 名称中可以包含字母、数字或者其它字符
  • 名称不能以数字和"_"（下划线）开头
  • 不能以XML/xml/Xml/…开头
  • 名称中不能含空格
  • 名称中不能含冒号(注：冒号留给命名空间使用)

6.5 字符数据的分类

• PCDATA：将由解析器解析
• CDATA：不会由解析器解析,显示一些已经是xml保留字的字符

7. DTD验证

7.1 DTD简介

• DTD(Document Type Definition)：文档类型定义，定义 XML 文档的合法构建模块
• DTD使用一系列合法的元素来定义文档的结构
• DTD文档包含
  • 元素(ELEMENT)的定义规则
  • 元素之间的关系规则
  • 属性(ATTLIST)的定义规则
• 应用程序可以使用一个标准DTD校验从外部世界接受来的XML数据是否有效
• 可以使用DTD校验自己的XML数据

7.2 DOCTYPE 声明

• 内部的 DOCTYPE 声明：
  
• 外部文档声明：
  

7.3 元素、属性定义

• 元素定义：<!ELEMENT NAME CONTENT>
• 属性定义：<!ATTLIST 元素名称 属性名称 属性类型 属性特点>
• 属性特点
  

8. Schema验证

8.1 命名空间

• 目的：避免元素名冲突
• 语法定义
  • 元素和属性都可以应用命名空间
  • 使用URL作为XML的Namespaces
  • xmlns:[prefix]=“URL”
• 命名冲突
  • XML的元素名是不固定的
  • 当两个不同的文档使用同样的名称描述两个不同类型的元素时，就会发生命名冲突
• 使用命名空间属性

8.2 Schema简介

• XML Schema 是基于 XML 的 DTD 替代者
• XML Schema 可描述 XML 文档的结构
• 定义 XML 文档的合法构建模
• web.xml使用的是Schema约束
  

8.3 DTD与Schema的对比

8.4 引用SCHEMA

• 未指定目标命名空间
  • 根元素通过noNamespaceSchemaLocation属性指定SCHEMA文件的位置
    
• 指定了目标命名空间
  • 根元素通过schemaLocation属性指定SCHEMA文件的位置
    

8.5 complexType与simpleType区别

• simpleType类型的元素中不能包含元素或者属性
• 当需要声明一个元素的子元素和/或属性时，用complexType
• 当需要基于内置的基本数据类型定义一个新的数据类型时，用simpleType

9. XStream

9.1 XStream介绍

• XStream是Java类库，用来将对象序列化成XML （JSON）或反序列化为对象
• XStream在运行时使用Java反射机制对要进行序列化的对象树的结构进行探索，并不需要对对象作出修改
• XStream可以序列化内部字段，包括private和final字段，并且支持非公开类以及内部类
• Xstream是一种OXMapping（映射） 技术，是用来处理XML文件序列化的框架

9.2 xstream使用

• 用处：将xml与对象间相互转换，虽然json也可以转换，但是太繁琐，舍弃
• 实例化XStream：XStream xstream = new XStream();
• 方法
  • xstream.alias(String elementName, Class cls)：为XML元素名称的自定义类名创建别名

  stream.alias("student", Student.class);//表明给Student全类名设置别名
  

  • xstream.toXML(Object obj)：将对象转换为XML
    1. 创建XStream对象

       XStream stream = new XStream();
       

    2. 给全类名设置别名

       stream.alias("student", Student.class);
       

    3. 将对象转换成xml

       String xml = stream.toXML(stu);
       

  @Test
  void objToXml() {// 创建XStream对象XStream stream = new XStream();Student stu = new Student("1001", "张三",new Clazz("01", "软件工程"));// 给Student全类名设置别名stream.alias("student", Student.class);// 将对象转换成xmlString xml = stream.toXML(stu);System.out.println(xml);
  }
  

  • xstream.fromXML(String xml)：将XML转换为对象
    1. 创建XStream对象

       XStream stream = new XStream();
       

    2. 标明xml中的别名对应哪个类

       stream.alias("student", Student.class);
       

    3. 标明接受哪个类型的类
       • 必须设置允许的类型，否则无法转换且会报错

       Class<?>[] cla = new Class[] {Student.class};
       

    4. 标明允许哪个类行的类被转化

       stream.allowTypes(cla);
       

    5. 将xml转化成对象

       Student stu = (Student) stream.fromXML(xml);
       

  @Test
  void xmlToObj() {String xml = "<student>\r\n" +"  <sId>1001</sId>\r\n" +"  <sName>张三</sName>\r\n" +"  <clazz>\r\n" +"      <cId>01</cId>\r\n" +"      <cName>软件工程</cName>\r\n" +"  </clazz>\r\n" +"</student>";// 创建Xstream对象XStream stream = new XStream();// 先标明xml中的别名是哪个类的stream.alias("student", Student.class);// 表明接受哪个类型的类Class<?>[] cla = new Class[] {Student.class};// 表明允许哪个类型的类被转化stream.allowTypes(cla);// 将xml转化成对象Student stu = (Student) stream.fromXML(xml);System.out.println(stu);
  }
  

  • xstream.allowType(new Class<?>[ ])：允许特定的类型在序列化或反序列化过程中被处理

  stream.allowTypes(new Class[] {Student.class});//表明允许Student类被转化
  

  // 表明接受哪个类型的类
  Class<?>[] cla = new Class[] {Student.class};
  // 表明允许哪个类型的类被转化
  stream.allowTypes(cla);
  

9.3 huTool使用

• 用处
  • 将JSON与对象进行相互转换（bean类中必须提供set方法）
  • 将JSON与XML进行相互转换
• 方法
  • JSON与对象互转
    • JSONUtil . toJsonPerttyStr(Object o)：将对象转换成JSON

    @Test
    void objToJson() {Student s1 = new Student("1001", "张三",new Clazz("01", "软件工程"));// 将对象转换成JSONString json = JSONUtil.toJsonPrettyStr(s1);System.out.println(json);
    }
    

    • JSONUtil . toBean(String json , Class cls)：将JSON转成对象

    @Test
    void jsonToObj() {String json = "{\r\n" +"  \"sId\": \"1001\",\r\n" +"  \"sName\": \"张三\",\r\n" +"  \"clazz\": {\r\n" +"      \"cId\": \"01\",\r\n" +"      \"cName\": \"软件工程\"\r\n" +"  }\r\n" +"}";// 将JSON转换成对象Student s1 = JSONUtil.toBean(json, Student.class);System.out.println(s1);
    }
    

  • JSON与XML互转
    • JSONUtil.parseFromXml(String str)：将xml转换成JSON

    @Test
    void xmlToJSON() {String xml = "<sfzh>123</sfzh>"+ "<sfz>456</sfz>"+ "<name>aa</name>"+ "<gender>1</gender>";// 将xml转换成JSONJSONObject json = JSONUtil.parseFromXml(xml);System.out.println(json.get("sfzh")); // 123System.out.println(json.get("name")); // aa
    }
    

    • JSONUtil.toXmlStr(JSONObject json)：将JSON转换成xml

    @Test
    void jsonToXml() {JSONObject json = JSONUtil.createObj().set("aaa", "你好").set("键2", "test");// 将JSON转换为xmlString xml = JSONUtil.toXmlStr(json);System.out.println(xml); // <aaa>你好</aaa><键2>test</键2>
    }
    

10. XML解析

浏览器可以直接解析XML

10.1 XML解析方式

10.1.1 DOM

• DOM:Document Object Model
• DOM解析一次将文档加载入内存建立树型模型
• 如果XML文档过大，会出现内存溢出的问题
• 优缺点
  • 优点：方便进行增删改操作
  • 缺点：速度慢，占用资源多，解析中小XML文档

10.1.2 SAX

• SAX:Simple API for XML
• 速度快，占用资源少，解析大XML文档
• 根据事件驱动一行一行进行加载解析的
• 优缺点
  • 优点：不会出现内存溢出的问题，且方便查询
  • 缺点：不能进行增删改操作

10.1.3 DOM和SAX对比

10.2 三种XML解析器

10.2.1 XML解析器分类

解析器是根据解析技术开发的工具，解析技术记住DOM和SAX即可

• sun开发的jaxp(不依赖第三方)
• dom4j (最为常用)
• jdom (使用较少)

10.2.2 读写XML

• 写XML
  • 创建一个document
  • 组装xml文档结构
  • 格式良好的写在一个位置（outputStream）
• 读XML
  • 创建一个解析XML的解析器
  • 加载外部xml（inputStream）
  • 循环、拆解、获取项目节点，得到想要的节点数据

10.2.3 JAXP

• JAXP是使用JavaAPI对XML进行处理的一种规范，它提供接口来操作SAX和DOM
• JAXP的API已经包含在JDK中，包含了三个包
  • org.w3c.dom：W3C推荐的用于XML操作的标准文档对象模型的接口
  • org.xml.sax：用于对XML进行语法分析的事件驱动的XML简单API（SAX）
  • Javax.xml.parsers：解析器工厂工具，程序员获得并配置特殊的语法分析器

10.2.4 JDOM

• JDOM是一个开源项目，它基于树型结构，利用JAVA语言的诸多特性（方法重载、集合概念以及映射），把SAX和DOM的功能有效地结合起来，实现对XML文档解析、生成、序列化等多种操作
• 所需jar包：jdom-1.1.3.jar
• 读写XML
  • 写XML
    1. 创建元素

    Element name= new Element("name");
    

    2. 创建属性，并为元素添加属性

    name.setAttribute(new Attribute("id", "100"));
    

    3. 组装元素数据并加载到一个文档

    Document doc = new Document(name);
    

    4. 设置格式斌写入到一个文件中

    XMLOutputter out = new XMLOutputter();
    out.getFormat().setEncoding("utf-8");
    out.output(doc, new FileOutputStream("d:/jdomaddress.xml"));
    

  @Test
  public void jdomWrite() throws FileNotFoundException, IOException {// 创建元素写xml文件Element addresslist = new Element("addresslist");Element name = new Element("name");Element email = new Element("email");name.setText("lisi");email.setText("[e-mail]");// name.setAttribute("id", "100");// 创建添加属性Attribute attr = new Attribute("id", "100");name.setAttribute(attr);addresslist.addContent(name);addresslist.addContent(email);// 组装元素数据，组装好数据要加到文档中，Document doc = new Document(addresslist);// 写到一个文件中XMLOutputter out = new XMLOutputter();out.getFormat().setEncoding("utf-8");out.output(doc, new FileOutputStream("d:/jdomaddress.xml"));
  }
  

  • 读XML
    1. 获取读取对象

    SAXBuilder sax = new SAXBuilder();
    

    2. 加载文件地址

    Document doc = sax.build(new File("d:/jdomaddress.xml"));
    

    3. 获取根节点

    Element root = doc.getRootElement();
    

    4. 获取节点内容

    String ntxt = root.getChildText("name");
    

  @Test
  public void jdomRead() throws JDOMException, IOException {// 读xml，首先有个读取对象，加载文件地址SAXBuilder sax = new SAXBuilder();// 读进来xml肯定是一个文档Document doc = sax.build(new File("d:/jdomaddress.xml"));Element root = doc.getRootElement(); // 获取根节点// 直接获取子节点内容String ntxt = root.getChildText("name");String etxt = root.getChildText("email");System.out.println(ntxt);System.out.println(etxt);
  }
  

10.2.5 DOM4j

• 所需jar包：dom4j-1.6.1.jar
• 读写XML
  • 写XML
    1. 创建文档对象

    Document doc = DocumentHelper.createDocument();
    

    2. 文档中增加根节点

    Element addresslist = doc.addElement("addresslist");
    

    3. 根节点中增加子节点

    Element name = addresslist.addElement("name");
    

    4. 节点增加内容

    name.setText("taobinbin");
    

    5. 设置xml格式

    OutputFormat of = OutputFormat.createPrettyPrint();
    of.setEncoding("utf-8");
    

    6. 写入文件，输出对象，输出流

    XMLWriter writer = new XMLWriter(new FileOutputStream("d:/dom4j.xml"),of);
    writer.write(doc);
    

  @Test
  public void writeDom4j() throws IOException {// 创建元素，需要创建文档,逻辑和jdom不一样// 1. 创建一个文档，使用帮助类创建一个文档对象Document doc = DocumentHelper.createDocument();// 2. 文档中需要增加根节点Element addresslist = doc.addElement("addresslist");// 3. 根几点需要增加子节点Element name = addresslist.addElement("name");Element email = addresslist.addElement("email");// 4. 节点增加内容name.setText("taobinbin");email.setText("[e-mail]");name.addAttribute("id", "111");// 输出前，一般都会设置xml格式，良好格式输出OutputFormat of = OutputFormat.createPrettyPrint();of.setEncoding("utf-8");// 5. 写到一个文件中去，输出对象，输出流XMLWriter writer = new XMLWriter(new FileOutputStream("d:/dom4j.xml"), of); // 创建了输出文件// doc没有放到输出中writer.write(doc);writer.close();
  }
  

  • 读XML
    1. 创建解析器

    SAXReader sax = new SAXReader();
    

    2. 读取xml文件

    Document doc = sax.read(new File("d:/dom4j.xml"));
    

    3. 获取根节点

    Element root = doc.getRootElement();
    

    4. 遍历根节点下的子节点，并输出节点内容

    List<Element> lst = root.elements();for(Element e:lst){System.out.println(e.getText());}
    

  @Test
  public void readDom4j() throws DocumentException {// 读文件，有一个解析器SAXReader sax = new SAXReader();// 读取那个文件File f = new File("d:/dom4j.xml");// 读完成后肯定是一个dom文档Document doc = sax.read(f);// 获取到根节点，一层一层的去找，或者通过tag直接定位某一个xml元素节点Element root = doc.getRootElement();System.out.println(root.elements().size());List<Element> lst = root.elements();for (Element e : lst) {System.out.println(e.getText());}
  }
  

11. jQuery框架

11.1 jQuery简介

• jQuery库可以通过一行简单的标记被添加到网页中
• 特性
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities
• JavaScript 库作用
  • JavaScript 库封装了很多预定义的对象和实用函数
  • 能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面
  • 兼容各大浏览器
• jQuery框架介绍
  • jQuery 是一个免费、开源的轻量级JavaScript 库，极大地简化了 JavaScript 编程
  • 兼容CSS3，还兼容各种浏览器，使用户能更方便地处理HTML documents、events、实现动画效果
  • 方便地为网站提供AJAX交互
• jQuery使用方式
  1. 下载jQuery包
     • 加min代表压缩版，不加min代表完整版，如：jquery-3.6.3.js
  2. 使用

     <script src="js/jquery-3.6.3.js"></script>	
     

11.2 jQuery 对象

11.2.1 jQuery 对象

• jQuery 对象：通过jQuery包装DOM对象后产生的对象
• jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

11.2.2 jQuery 对象转 DOM 对象

• jQuery 对象不能使用 DOM 中的方法
• jQuery转Dom
  1. 通过 [index] 的方法
     • jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象

     $(document).ready(function() {var $mydiv = $("#mydiv");// 将jquery对象转换成js对象// 方法一：通过[index]转换var mydiv1 = $mydiv[0];console.log(mydiv1.innerHTML);
     });
     

  2. jQuery 中的get(index)
     • jQuery 中的 get(index) 方法得到相应的 DOM 对象

     $(document).ready(function() {var $mydiv = $("#mydiv");// 将jquery对象转换成js对象// 方法二：通过jquery的get方法转换var mydiv2 = $mydiv.get(0);console.log(mydiv2.innerHTML);
     });
     

11.2.3 DOM 对象转 jQuery 对象

• DOM对象不能使用jQuery 中的方法
• Dom转jQuery
  • $()

  $(document).ready(function() {var mydiv = document.getElementById("mydiv");// js对象转换为jquery对象var $mydiv = $(mydiv);console.log($mydiv.html());
  });
  

  • jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象

11.3 jQuery语法及事件

11.3.1 语法

• 语法：$(selector).action()
  • selector：查询或查找 HTML 元素
  • action() ：执行对元素的操作

11.3.2 事件

• 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

11.3.2.1 事件原则

• 把所有 jQuery 代码置于事件处理函数中
• 把所有事件处理函数置于文档就绪事件处理器中
• 把 jQuery 代码置于单独的 .js 文件中
• 如果存在名称冲突，则重命名 jQuery 库

11.3.2.2 ready()事件

• 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件
• 常规
  • window.onload
  • 只能写一个

  window.onload=function() {}
  

• jQuery
  • $(document).reday()
  • 简写： $().ready()
  • 可以写多个

  $(document).ready(function(){});
  

• 对比
  

11.3.2.2 hide()事件

• 隐藏html元素
• 示例
  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有段落
  • $(".test").hide() - 隐藏所有 class=“test” 的所有元素
  • $("#test").hide() - 隐藏所有 id=“test” 的元素

11.3.2.3 事件的绑定和移除

• bind()事件：为被选元素添加一个或多个事件处理程序
  • 语法：$(selector).bind(event,data,function)
  • 参数
    
  • 替代语法：$(selector).bind({event:function, event:function, ...})

  $(document).ready(function() {$("button").on("click", function() {$("p").slideToggle();});
  });
  

• unbind()事件：移除被选元素的事件处理程序
  • 语法：$(selector).unbind(event,function)
  • 参数
    

  $(document).ready(function() {$("p").click(function() {$(this).slideToggle();});$("button").click(function() {$("p").off("click");});
  });
  

• one()事件：被选元素附加一个或多个事件处理程序
  • 使用 one() 方法时，每个元素只能运行一次事件处理器函数
  • 语法：$(selector).one(event,data,function)
  • 参数
    

  $(document).ready(function() {$("p").one("click", function() {$(this).animate({fontSize: "+=6px"});});
  });
  

11.4 jQuery选择器

• 选择器允许对 DOM 元素组或单个 DOM 节点进行操作
• 分类
  • 基本选择器：通过元素 id, class 和标记名来查找 DOM 元素
    
  • 属性选择器：使用 XPath 表达式来选择带有给定属性的元素
    
  • 元素选择器：使用 CSS 选择器来选取 HTML 元素
    
  • 层次选择器
  • 过滤选择器

11.5 Ajax中DOM操作

11.5.1 DOM

• DOM(Document Object Model)：文档对象模型
• 一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件

11.5.2 DOM操作分类

• DOM Core
  • DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它
  • 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
• HTML DOM
  • 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性
• CSS-DOM
  • 针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

11.5.3 获得内容

带参是设置内容，不带参数是获取内容

• text()：设置或返回所选元素的文本内容
  • 相当于innerText

  $("#btn1").click(function() {$("#test1").text("Hello world!");
  });
  

• html()：设置或返回所选元素的内容（包括 HTML 标记）
  • 相当于innerHTML

  $("#btn2").click(function() {$("#test2").html("<b>Hello world!</b>");
  });
  

• val()：设置或返回表单字段的值
  • 相当于value

  $("#btn3").click(function() {$("#test3").val("Dolly Duck");
  });
  

11.5.4 获取属性

• attr()：用于获取属性值
• 语法：$(selector).attr("属性名","属性值")

$(document).ready(function() {$("button").click(function() {$("#w3s").attr("href", "http://www.baidu.com");});
});