## Ajax&Json
#### 1. 能够理解异步的概念
- Ajax:
> 是一种在无需重新加载整个网页的情况下，能够更新部分（异步请求）网页的技术
1. 可以完成html到后台的异步请求---局部刷新页面
2. 可以获取到后台返回的数据进行展示
3. 应用场景：
#### 2. 能够了解原生js的ajax:weary:
- ！一定不要去敲这个代码，重点去理解步骤
- 基于原生JS方式实现：
- 创建异步对象
```java
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
```
- 建立连接
```javascript
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);//不需要写/
```
- 发送请求
```javascript
xmlhttp.send();
```
- 接收数据
```javascript
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
```
#### 3. 能够使用jQuery的$.ajax()进行访问
- 通用的方式
```javascript
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
```
#### 4. :happy: 能够使用jQuery的$.get()进行访问
#### 5. :happy:能够使用jQuery的$.post()进行访问
#### 6. 能够掌握json的对象&数组数据格式
#### 7. 能够使用json转换工具Jackson进行json格式字符串的转换
- JackSON核心对象：ObjectMapper
- writeValue(参数1，obj)：obj：java对象
- file
- writer
- outPutStream
- writeValueAsString(obj)：直接obj对象转成json字符串
#### 8. 能够完成用户名是否存在案例
> 需求：用户名输入框当鼠标离开后校验该用户名是否存在----指的是数据库中是否有该人
- 前台页面分析
1. 给用户名输入框绑定一个离焦事件 onblur
2. 在onblur方法中，获取输入框的值 $.val(), 这个值就是用户名，将用户名携带给后台
3. 编写ajax异步请求，并且将用户名发送过去，在回调函数中function(data){}
4. 在接收到data数据后取出里面的值：userExist:true/false
1. 如果为true:用户存在，显示该用户已被注册的信息提示 data.msg
2. 如果为false:用户不存在，直接提示用户可用
```javascript
<script>
//在页面加载完成后
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet",{"username":username},function (data) {
//判断userExsit键的值是否是true
// alert(data);
var span = $("#s_username");
if(data.userExsit){
//用户名存在
span.css("color","red");
}else{
//用户名不存在
span.css("color","green");
}
span.html(data.msg);
});
});
});
</script>
```
- 后台逻辑分析
1. 获取请求参数username
2. 调用userService，调用userDao查询数据库---User
3. 判断user对象是否为null
1. 如果为null--->没有查询到用户，可以注册，返回可注册的json
2. 如果不为null-->查询到用户，不可以再注册，返回不可注册的json
|
|
收藏
淘帖
踩
