一、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;
}- 发送请求
我们可以使用 超链接来执行请求
使用Ajax发送GET请求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. 校验用户名
- 编写页面
- Ajax发起请求
- controller处理
@RestController
public class UserController {
private static List list = new ArrayList();
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依赖库
- 直接发起请求，不带任何参数 ：
$.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("用户名不可用2!");
}else{ //能用
$("#result").html("用户名可用2!");
}
})
}三、XML
1. 什么是xml
xml : eXtendsible markup language 可扩展的标记语言 ， xml语法上和html比较相似，但是html的元素是固定的，而xml的标签是可以由用户自定义的。
2. xml 的作用
- 可以用来保存数据
- 可以用来做配置文件 | properties | yml
- 数据传输载体
3. 定义xml
其实就是一个文件，文件的后缀为 .xml
- 文档声明
简单声明， version : 解析这个xml的时候，使用什么版本的解析器解析
encoding : 解析xml中的文字的时候，使用什么编码来翻译
standalone : no - 该文档会依赖关联其他文档 ， yes-- 这是一个独立的文档
- 元素定义（标签）
1. 其实就是里面的标签， <> 括起来的都叫元素 。 成对出现。 如下：
2. 文档声明下来的第一个元素叫做根元素 (根标签)
3. 标签里面可以嵌套标签
4. 空标签
既是开始也是结束。 一般配合属性来用。
张三
- xml注释
xml的注释，不允许放置在文档的第一行。 必须在文档声明的下面。
如：
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 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 list = rootElement.selectNodes("//name");
for (Element element : list) {
System.out.println(element.getText());
} 4. xml约束[了解]
xml提供两种约束：
DTD|Schema， 约束的作用其实就是用于校验xml ，让xml必须按照约束的规则来定义标签的名称 、个数 、顺序、 属性 。。
1. DTD 约束
语法自成一派， 早期就出现的。 可读性比较差。 后缀名 .dtd
]>2. Schema约束
其实就是一个xml ， 使用xml的语法规则， xml解析器解析起来比较方便 ， 是为了替代DTD 。
但是Schema 约束文本内容比DTD的内容还要多。 所以目前也没有真正意义上的替代DTD 后缀名 .xsd
- 约束文档
- 实例文档
zhangsan
19
3 . 命名空间的作用
一个xml如果想指定它的约束规则， 假设使用的是DTD ，那么这个xml只能指定一个DTD ， 不能指定多个DTD 。 但是如果一个xml的约束是定义在schema里面，并且是多个schema，那么是可以的。简单的说： 一个xml 可以引用多个schema约束。 但是只能引用一个DTD约束。
名称空间的作用就是在 写元素的时候，可以指定该元素使用的是哪一套约束规则。 默认情况下 ，如果只有一套规则，那么都可以这么写
张三
可以根据命名空间指定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 表示改变省份数据，会去请求城市数据
省份:
城市:
- 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 provinceList = new ArrayList<>();
private static Map> map = new HashMap>();
static{
provinceList.add(new Province(1,"广东"));
provinceList.add(new Province(2,"湖北"));
provinceList.add(new Province(3,"湖南"));
provinceList.add(new Province(4,"广西"));
List list01 = new ArrayList();
list01.add(new City(1, "深圳"));
list01.add(new City(2, "广州"));
list01.add(new City(3, "惠州"));
List list02= new ArrayList();
list02.add(new City(1, "武汉"));
list02.add(new City(2, "黄冈"));
list02.add(new City(3, "十堰"));
List list03 = new ArrayList();
list03.add(new City(1, "长沙"));
list03.add(new City(2, "岳阳"));
list03.add(new City(3, "益阳"));
List list04 = new ArrayList();
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 listProvince(){
return provinceList;
}
//获取省份
@RequestMapping("listCity")
public List listCity(int id){
return map.get(id);
}
}
- 前端页面使用Jquery发起请求