springboot04 Ajax json Jquery

一、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()"/> &nbsp; <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的区别

1. Ajax 只是一个用于和服务器进行异步交互的技术而已，它针对的仅仅是如何跟服务器完成交互，如何处理返回的数据而已。
2. 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 的作用

1. 可以用来保存数据
2. 可以用来做配置文件 | properties | yml
3. 数据传输载体

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

1. 导入依赖

 compile group: 'com.google.code.gson', name: 'gson', version: '2.2.4'

1. 生成 | 解析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>