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的区别

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>

巴特西

springboot04 Ajax json Jquery

一、Ajax

1.同步&异步请求

2. Ajax介绍

3. Ajax 发起请求

1. GET 请求

2. POST请求

4. Ajax处理响应

5. 校验用户名

二、Jquery

1. Jquery 介绍

2. Jquery和Ajax的区别

3. Jquery Ajax

1. GET请求

2. POST请求

3. Ajax请求

4. 校验用户名

三、XML

1. 什么是xml

2. xml 的作用

3. 定义xml

3. xml解析【重点】

4. xml约束[了解]

1. DTD 约束

2. Schema约束

3 . 命名空间的作用

四、JSON

1. 什么是json

2. json数据格式

3. 解析json

1. html解析

2. 后台解析

3. Jquery 请求json数据

最新文章

热门文章