一、Ajax
1.同步&异步请求
在所有的请求响应交互世界里，我们有通常会划分出来两种形态的请求， 一种是
同步请求、另一种是异步请求。比如注册、登录、添加数据等等这些请求执行的就是同步请求， 比如： 校验用户名是否存在，搜索关键字的自动补全走的就是异步请求。
2. Ajax介绍
Ajax全称是：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是一种新技术，也不是JavaScript的规范，只是把以前旧的技术整合起来。Ajax是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分 。 通俗的说，就是我们可以在A页面发起一个异步请求，那么服务器响应回来，还是在这个A页面，我们可以对A页面的某一处地方进行修改，其他地方保持不动。同步请求会刷新整个页面（其实就是重新在打开一个新的画面。）详见下图.
3. Ajax 发起请求
1. GET 请求
- 创建XmlHttpRequest 对象
Ajax 使用XMLHttpRequest来和服务器进行异步通信，所以我们需要先创建XMLHttpRequest对象。
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
- 发送请求
我们可以使用 超链接来执行请求
<a href="javascript:processGet()">使用Ajax发送GET请求</a>
function processGet(){
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("GET", "Demo01", true);
//发送请求。
request.send();
}
- 获取响应
完整例子：
//获取 xmlhttprequest 对象 代码跟以前一样，此处不再赘述。
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("GET", "Demo01", true);
//对请求的状态 进行监听。
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200 ){
//设置节点id为 myDiv的标签 结果为 我们请求得到的响应文字
document.getElementById("myDiv").innerHTML=request.responseText;
}
}
//发送请求。
request.send();
2. POST请求
- 不带数据
function processPost(){
//不带数据，直接请求。
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("POST", "Demo01", true);
//发送请求。
request.send();
}
- 携带数据
function processPost(){
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("POST", "Demo01", true);
//设置请求头，其实就是表示传输的是一个经过url编码的form表单数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=zhangsan&age=18");
}
4. Ajax处理响应
数据提交到的两种请求Get 和 Post基本上都会使用后， 就应该想想获取数据的问题了。 前面我们都一直很无私的往服务器提交数据， 那么服务器返回的那些数据，我们又该怎么通过Ajax去拿呢?
这里就要靠xmlhttprequest的事件 onreadystatechange ， 这是用来监听我们请求的一些状态， 比如： 成功了还是失败了。 如果成功，想获取数据，得靠xmlhttprequest的responseText 或 responseXML 属性
- 发起请求
function processGet(){
//获取 xmlhttprequest 对象 代码跟以前一样，此处不再赘述。
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("GET", "Demo01", true);
//对请求的状态 进行监听。
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200 ){
//设置节点id为 myDiv的标签 结果为 我们请求得到的响应文字
document.getElementById("myDiv").innerHTML=request.responseText;
}
}
//发送请求。
request.send();
}
5. 校验用户名
- 编写页面
<form action="" method="post">
用户名：<input type="text" id="username" name="username" onblur="checkUserName()"/> <span id="result"></span><br/><br/>
密 码：<input type="password" name="password"/><br/><br/>
<input type="submit" value="注册"/><br/><br/>
</form>
- Ajax发起请求
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function checkUserName(){
//alert("check~!~")
//1. 获取用户名
var username = document.getElementById("username").value;
//2. 发起用户名校验的请求
var http = ajaxFunction();
//3. 拼接请求
http.open("GET" , "checkUserName?username="+username,true);
//4. 如果要想获取结果，必须对状态进行监听
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var result = http.responseText;
// alert("result="+result);
//不能用
if("no" == result){
document.getElementById("result").innerHTML="<font color='red'>用户名不可用!</font>";
}else{
document.getElementById("result").innerHTML="<font color='green'>用户名可用!</font>";
}
}
}
//5. 发起请求
http.send()
}
</script>
- controller处理
@RestController
public class UserController {
private static List<String> list = new ArrayList<String>();
static{
list.add("admin");
list.add("zhangsan");
list.add("lisi");
list.add("aobama");
list.add("telangpu");
}
@RequestMapping("checkUserName")
public String checkUserName(String username){
if(list.contains(username)){
return "no";
}
return "yes";
}
}
二、Jquery
1. Jquery 介绍
JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2005年8月，John Resig提议改进Prototype的“Behaviour”库，于是他在blog上发表了自己的想法 .
2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。
...
2. Jquery和Ajax的区别
- Ajax 只是一个用于和服务器进行异步交互的技术而已，它针对的仅仅是如何跟服务器完成交互，如何处理返回的数据而已。
- Jquery 可以看成是JavaScript常用代码的工具集合， 比如： 效果处理（隐藏 | 显示 、 动画处理 ） html页面处理（标签取值、赋值 、添加、删除...）、以前前面学的Ajax功能，它都有囊括，并且代码简化到令人发指。
3. Jquery Ajax
前面刚刚使用Ajax提交过Get 和 Post请求， 代码过于繁琐。现在我们趁热打铁，先学学Jquery的Ajax部分，看看它对Ajax做出了那些改变。
1. GET请求
- 引入jquery依赖库
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
- 直接发起请求，不带任何参数 ：
$.get("url");
- 需要带上参数的话与平常的get请求参数传递一样。
$.get("url?name=zhangsan&age=18");
- 发起请求，并且获取返回结果
$.get("url?name=zhangsan&age=18", function(data , status){
alert("data="+data+"--status=="+status);
});
如果想要获取服务器反馈的数据，需要在get里面在加一个参数。 给定一个方法即可。服务器响应后，会执行该方法。
注意，方法里面的参数格式固定， data , status 。 data : 代表服务器响应过来的数据， status 代表这次请求的响应状态码
2. POST请求
- 直接请求，不带上任何数据
$.post("Demo01" );
- 请求，带上数据 。
$.post("Demo01" , {name:"xx" , age:99});
- 请求，带上数据，并且获取响应回来的数据
$.post("Demo01" , {name:"xx" , age:99} , function(data ,status){
alert("data="+data+"--status="+status);
});
3. Ajax请求
上面发起的GET和Post请求是Jquery封装好了的，实际上他的底层还是使用ajax 的那一套代码来发起请求。 JQuery也允许我们直接使用$.ajax发起请求，只不过写法比GET | POST 要麻烦，但是灵活性或者叫做自由度更高一些。
$.ajax({
url:"test",
data:{"key1":value1 , "key2":value2},
success:function(data){
//...
}
});
4. 校验用户名
function checkUserName(){
//1. 获取输入框的内容val() text() html()
var username= $("#username").val();
//2.发请求
$.post("checkUserName" , {"username":username} , function(data){
if("no" == data){ //不能用
$("#result").html("<font color='red'>用户名不可用2!</font>");
}else{ //能用
$("#result").html("<font color='green'>用户名可用2!</font>");
}
})
}
三、XML
1. 什么是xml
xml : eXtendsible markup language 可扩展的标记语言 ， xml语法上和html比较相似，但是html的元素是固定的，而xml的标签是可以由用户自定义的。
2. xml 的作用
- 可以用来保存数据
- 可以用来做配置文件 | properties | yml
- 数据传输载体
3. 定义xml
其实就是一个文件，文件的后缀为 .xml
- 文档声明
简单声明， version : 解析这个xml的时候，使用什么版本的解析器解析
<?xml version="1.0" ?>
encoding : 解析xml中的文字的时候，使用什么编码来翻译
<?xml version="1.0" encoding="gbk" ?>
standalone : no - 该文档会依赖关联其他文档 ， yes-- 这是一个独立的文档
<?xml version="1.0" encoding="gbk" standalone="no" ?>
- 元素定义（标签）
1. 其实就是里面的标签， <> 括起来的都叫元素 。 成对出现。 如下：
<stu> </stu>
2. 文档声明下来的第一个元素叫做根元素 (根标签)
3. 标签里面可以嵌套标签
4. 空标签
既是开始也是结束。 一般配合属性来用。
<stu>
<name>张三</name>
<age/>
</stu>
- xml注释
xml的注释，不允许放置在文档的第一行。 必须在文档声明的下面。
<!-- -->
如：
<?xml version="1.0" encoding="UTF-8"?>
<!--
//这里有两个学生
//一个学生，名字叫张三， 年龄18岁， 学号：10086
//另外一个学生叫李四 。。。
-->
3. xml解析【重点】
其实就是获取元素里面的字符数据或者属性数据 , 常用的有两种方式 dom 和 sax ， 针对这两种解析方式，一些组织或者公司给出了
jdom|dom4j
- xml解析的方式
有很多种，经常用的有两种：
dom、sax, 有一些组织或者公司 个人，针对这两种方式，定义出来一些xml的解析库。 jdom | dom4j | jaxp
- 基本解析
添加依赖
compile group: 'org.dom4j', name: 'dom4j', version: '2.0.0'
try {
//1. 创建sax读取对象
SAXReader reader = new SAXReader(); //jdbc -- classloader
//2. 指定解析的xml源
Document document = reader.read(new File("src/xml/stus.xml"));
//3. 得到元素、
//得到根元素
Element rootElement= document.getRootElement();
//获取根元素下面的子元素 age
//rootElement.element("age")
//System.out.println(rootElement.element("stu").element("age").getText());
//获取根元素下面的所有子元素 。 stu元素
List<Element> elements = rootElement.elements();
//遍历所有的stu元素
for (Element element : elements) {
//获取stu元素下面的name元素
String name = element.element("name").getText();
String age = element.element("age").getText();
String address = element.element("address").getText();
System.out.println("name="+name+"==age+"+age+"==address="+address);
}
} catch (Exception e) {
e.printStackTrace();
}
- xpath解析
dom4j里面支持Xpath的写法。 xpath其实是xml的路径语言，支持我们在解析xml的时候，能够快速的定位到具体的某一个元素。
Element nameElement = (Element) rootElement.selectSingleNode("//name");
System.out.println(nameElement.getText());
System.out.println("----------------");
//获取文档里面的所有name元素
List<Element> list = rootElement.selectNodes("//name");
for (Element element : list) {
System.out.println(element.getText());
}
4. xml约束[了解]
xml提供两种约束：
DTD|Schema， 约束的作用其实就是用于校验xml ，让xml必须按照约束的规则来定义标签的名称 、个数 、顺序、 属性 。。
1. DTD 约束
语法自成一派， 早期就出现的。 可读性比较差。 后缀名 .dtd
<!-- 引入网络上DTD -->
<!-- 文档类型 根标签名字 网络上的dtd dtd的名称 dtd的路径
<!DOCTYPE stus PUBLIC "//UNKNOWN/" "unknown.dtd"> -->
<!-- 引入本地的DTD ： 根标签名字 引入本地的DTD dtd的位置 -->
<!-- <!DOCTYPE stus SYSTEM "stus.dtd"> -->
<!DOCTYPE stus [
<!ELEMENT stus (stu)>
<!ELEMENT stu (name,age)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
]>
2. Schema约束
其实就是一个xml ， 使用xml的语法规则， xml解析器解析起来比较方便 ， 是为了替代DTD 。
但是Schema 约束文本内容比DTD的内容还要多。 所以目前也没有真正意义上的替代DTD 后缀名 .xsd
- 约束文档
<!-- xmlns : xml namespace : 名称空间 / 命名空间
targetNamespace : 目标名称空间 。 下面定义的那些元素都与这个名称空间绑定上。
elementFormDefault ： 元素的格式化情况 如果使用的时候有声明命名空间，那么标签页必须有命名空前前缀-->
<schema xmlns="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.itheima.com/teacher"
elementFormDefault="qualified">
<element name="teachers">
<complexType>
<!-- 表示teachers下面的这个 teacher 出现个数不限。-->
<sequence maxOccurs="unbounded">
<!-- 这是一个复杂元素 -->
<element name="teacher">
<complexType>
<sequence>
<!-- 以下两个是简单元素 -->
<element name="name" type="string"></element>
<element name="age" type="int"></element>
</sequence>
</complexType>
</element>
</sequence>
</complexType>
</element>
</schema>
- 实例文档
<?xml version="1.0" encoding="UTF-8"?>
<!-- xmlns:xsi : 这里必须是这样的写法，也就是这个值已经固定了。
xmlns : 这里是名称空间，也固定了，写的是schema里面的顶部目标名称空间
xsi:schemaLocation : 有两段： 前半段是名称空间，也是目标空间的值 ， 后面是约束文档的路径。
-->
<teachers
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.itheima.com/teacher"
xsi:schemaLocation="http://www.itheima.com/teacher teacher.xsd">
<teacher>
<name>zhangsan</name>
<age>19</age>
</teacher>
</teachers>
3 . 命名空间的作用
一个xml如果想指定它的约束规则， 假设使用的是DTD ，那么这个xml只能指定一个DTD ， 不能指定多个DTD 。 但是如果一个xml的约束是定义在schema里面，并且是多个schema，那么是可以的。简单的说： 一个xml 可以引用多个schema约束。 但是只能引用一个DTD约束。
名称空间的作用就是在 写元素的时候，可以指定该元素使用的是哪一套约束规则。 默认情况下 ，如果只有一套规则，那么都可以这么写
<name>张三</name>
可以根据命名空间指定name 分属于不同的约束文档
<aa:name></aa:name>
<bb:name></bb:name>
四、JSON
1. 什么是json
JSON : JavaScript Object Notation 是一种轻量级的数据交换格式， 它更多的是用来做数据交互，Json采用完全独立于语言的文本格式，也就是不同的语言，json数据都是一致的。并且json具有易于阅读和编写，同业也易于机器解析和生成。渐渐的取代xml成为首选的数据交换格式。
2. json数据格式
- 对象格式
{"key":"value" , "key":"value",...}
键值要使用冒号分隔 。
- 数组格式
[obj , obj , obj ...] , 这个obj 可以是一些简单的字符串，也可以是一个大括号形式存在的对象格式。
如： ["aa","bb","cc"] 或者是 [{"name":"zhangsan"},{"name":"lisi"},{"name":"wangwu"}]
3. 解析json
1. html解析
//1. json对象
var user = {
"username":"aobama",
"password":"1234"
}
alert(user.username) ; //通过key获取json数据
//2. json数组
var arr = ["jack" , "rose" , "tom"];
alert(arr[1]);
//3. 综合演练
var data = [
{"id":1 , "name":"iphoen8","price":5999},
{"id":2 , "name":"xiaomi5","price":1999},
{"id":3 , "name":"vivo7","price":3999},
]
alert(data[1].name)
2. 后台解析
后台解析，需要jar包， 一般常用的有
jsonlib或者gson或者fastjson
- 导入依赖
compile group: 'com.google.code.gson', name: 'gson', version: '2.2.4'
- 生成 | 解析json
User user = new User();
user.setUsername("aa");
user.setPassword("123");
Gson gson =new Gson();
//对象到json
String json = gson.toJson(user);
//json到对象
User u = gson.fromJson(json , User.class);
System.out.println("u=" + u);
3. Jquery 请求json数据
省市级联操作。
- 前端页面准备
//changeProvince 表示改变省份数据，会去请求城市数据
省份:
<select id="province" onchange="changeProvince()">
<option value="">--请选择--</option>
<!--<option value="1">广东</option>
<option value="2">湖北</option>
<option value="3">-湖南-</option>
<option value="4">-广西--</option>-->
</select>
城市:
<select id="city">
<option>--请选择--</option>
</select>
- province 和 city 实体类
public class Province {
private int id; //省份的编号
private String name; //名字
// 下面还有get & set方法 & 无参构造 & 有参构造
}
public class City {
private static final String TAG = "City";
private int id;
private String name;
// 下面还有get & set方法 & 无参构造 & 有参构造
}
- controller
@RestController
public class CityController {
private static final String TAG = "CityController";
private static List<Province> provinceList = new ArrayList<>();
private static Map<Integer , List<City>> map = new HashMap<Integer , List<City>>();
static{
provinceList.add(new Province(1,"广东"));
provinceList.add(new Province(2,"湖北"));
provinceList.add(new Province(3,"湖南"));
provinceList.add(new Province(4,"广西"));
List<City> list01 = new ArrayList<City>();
list01.add(new City(1, "深圳"));
list01.add(new City(2, "广州"));
list01.add(new City(3, "惠州"));
List<City> list02= new ArrayList<City>();
list02.add(new City(1, "武汉"));
list02.add(new City(2, "黄冈"));
list02.add(new City(3, "十堰"));
List<City> list03 = new ArrayList<City>();
list03.add(new City(1, "长沙"));
list03.add(new City(2, "岳阳"));
list03.add(new City(3, "益阳"));
List<City> list04 = new ArrayList<City>();
list04.add(new City(1, "南宁"));
list04.add(new City(2, "桂林"));
list04.add(new City(3, "北海"));
map.put(1 , list01);
map.put(2, list02);
map.put(3 , list03);
map.put(4 , list04);
}
//获取省份
@RequestMapping("listProvince")
public List<Province> listProvince(){
return provinceList;
}
//获取省份
@RequestMapping("listCity")
public List<City> listCity(int id){
return map.get(id);
}
}
- 前端页面使用Jquery发起请求
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//1. 发起请求去获取省份的数据。 入口函数 ： 页面加载完毕就执行。
$(function(){
$.get("listProvince" , function(data){
//data:其实就是一个json的集合数据，集合里面装的是 province对象
//遍历这个集合，遍历一次会执行一次function， 里面的i : 表示遍历的下标， n: 遍历出来的每一个元素
//在当前的场景下，它就是province对象
$(data).each(function(i , n ){
// alert("n="+n.name);
//遍历好了之后，就要往省份的下拉框追加。所以要先找到它
$("#province").append(" <option value='"+n.id+"'>"+n.name+"</option>");
});
})
})
//只要改变了省份的数据，那么就会执行这个方法。
function changeProvince(){
//必须得知道，现在选中什么省份。
var id = $("#province").val();
//发送请求
$.post("listCity",{"id":id} ,function(data){
//alert("data="+data);
//追加之前，先清空内容
$("#city").html("<option>--请选择--</option>");
$(data).each(function(i , n){
$("#city").append(" <option value='"+n.id+"'>"+n.name+"</option>");
});
});
}
</script>