Ajax介绍
异步javaScript 和 xml 是一种创建交互式，动态网页开发技术，无需加载整个网页的情况下，能够更新页面局部数据技术，
-
Ajax的使用
XmlHttpRequest对象这个是浏览器接口对象，通过http协议在浏览器和web服务器之间收发xml或是其他数据，是Ajax的编程核心对象，
作用就是用来发送异步请求来完成局部刷新。（是不是可以理解为Ajax的api就是使用这个对象呢？） -
Ajax的使用步骤
1.创建XMLHttpRequest对象， var xhr = new XMLHttpRequest();
2.给定请求方式以及请求地址，xhr.open(“get”,“http://www.example.com”);
3.发送请求 xhr.send();
4.获取服务器端给客户端响应数据 xhr.onreadystatechange=function(){}
function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById(“span”).innerHtml = xhr.resoponseText;
alter(xhr.responseText);
}
}
案列：
页面编写方式
后端代码
-
Ajax的基本原理
原理分为两部分 cilent是客户端 浏览器 server是服务端 后端服务器
1.首先要通过一个事件来调用一个函数，
2.创建异步对象xmlhttprequest() 发送请求send
3.服务端接收请求并产生响应 在响应时在注意不能是请求转发或是重定向，使用字符输出流来响应，
4.页面在利用一个函数来处理这个响应数据 -
json
json javascript object notation 是一种基于字符串的数据交换格式，就是说前后端数据交互的一种格式，优点是阅读方便，容易编写，同时机器也方便阅读和生成，json是javaScript数据类型的子集。
为什么要使用json
在json未出现之前对于ajax中数据传递方式，会使用xml来作为数据格式传输数据，有了json格式字符串，速度更快，体积小，容易解析， -
json格式
json是按照特定的语法规则生成字符串结构，
{} 利用大括号来表示json的字符串对象，
“属性”:“value” 属性和值用冒号分隔，属性用双引号，值如果是字符串必须要双引号，其他可以不用 可以有多个属性
[] 中括号表示是数组，对象之间用逗号分隔，
json格式字符串对象示例：
{“userid”:1,“username”:“admin”,“sex”:“boy”}
数组：[{“userid”:1,“username”:“admin”},{“userid”:2,“username”:“haha”}] 中括号表示数组 对象与对象之间用逗号分隔，对象中的元素之间用冒号分隔， -
json支持的数据类型
String 字符串 必须用双引号括起来，
number 数值 可以去掉双引号，
object 对象形式 {key:value} 说明对象可以嵌套对象啊
array 数组 [vlaue,value] 说明对象中可以嵌套数组
true/false boolean
null 空值 -
jackson
在jdk中没有内置操作json数据格式的api,因此需要处理json格式的数据需要借助第三方类库，
解析器:jackson解析器是称为最好的解析器，因为spring中模式使用它来处理json格式数据，
-
jackson处理json格式数据的步骤
在响应中通过json格式传递数据，
1.先添加jar包
2.通过jackson api将java对象转化成json格式
3.修改响应头，响应类型为appliction/json
4.将结果基于字符输出流退回客户端浏览器
5.在页面中通过javascript的json.parse()函数将json格式的数据转化成javascript对象 -
通过json格式传递单个对象
重点解析一下这个流程，
后端：
首先继承httpservlet 重写doget()
利用jackson对象的api将java对象转化成json格式的字符串，
将写入字符流中
前端：
一个事件绑定一个函数
使用Ajax技术要使用XMLHttpRequest对象来发送异步请求，
使用函数来接收处理结果，
使用使用js中的内置对象JSON来转化后端传过来的json字符串，
使用document对象来进行数据处理， -
通过json格式在响应中传递多个对象
-
在json中通过map来传递数据
-
在请求中通过json格式传递数据
在响应中通过json格式来传递数据，在请求中也可以使用json格式传递数据，如果在请求中使用了json格式传递数据，那么提交方式要使用post方式，通过javaScript中的json.stringify()函数将javaScript对象转化成json格式的数据，通过send方法来将数据发送到servlet中，在servlet中通过字符流输入流获取json格式数据，
在请求中使用jackson处理json格式数据的步骤：
1.在页面上javaScript中通过JSON.stringify()方法将对象转化成json格式的数据，
2.将请求方式设置成post方式
3.通过send方法发送
4.在servlet中通过字符流读取请求体中json数据
5.通过jackson api 将获取到json格式的数据转成了java对象
-
jackson中的注解
1 @jsonProperty
这个注解是用于实体类上的属性上就是说作用于参数上，一般情况下将java对象变成json对象后，key = 属性名 ，value = 属性值，使用这个注解可以自定义json对象中key的名字，
2 @JsonIgnore
这个注解是用于放在属性上，表示用来忽视被注解了的属性，意思就是在转成json对象是，该实体类的属性被忽视掉，注意如果这个属性有多个注解，其中一个注解是@jsonIgnore，则表示被忽视的是其他注解被取消，没有忽视该属性值，
3 @JsonFormat
这个注解是用在属性上或是方法上，可以将date类型属性的值直接转化成自定义格式的样式，
@JsonFormat(pattern=“yyyy-MM-dd hh:mm:ss”)
private Date time； -
jackson工具类
package com.bjsxt.util;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.List;
/**
* jackson自定义一个工具类 这个类是一个单例模式 首先要创建一个私有的静态的 固定的对象变量，在创建对象赋值给他
* 这样就保证了这个工具类只能生产一个对象，
* 里面有三个方法，都是公开的， 静态的方便调用， 注意注意返回类的类型如果不确定的话可以使用标识泛型
*/
public class Jackson {
//定义一个jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
//将对象转化成json对象
public static String objectToJson(Object data){
try{
String s = MAPPER.writeValueAsString(data);
return s;
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
//将一个josn结果转化成java对象
public static <T>T jsonTOPojo(String jsonData,Class<T>beanType){
try{
T t = MAPPER.readValue(jsonData,beanType);
return t;
}catch(Exception e){
e.printStackTrace();
}
return null;
}
//将json数据转化成pojo对象list集合哈
public static <T>List<T> jsonToList(String jsonData,Class<T>beanType){
JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
try{
List<T> list= MAPPER.readValue(jsonData, javaType);
}catch(Exception e){
e.printStackTrace();
}
return null;
}
}
-
在jquery中使用Ajax
在Jquery中封装了Ajax，在Jquery中提供了很多基于Ajax的发送异步请求的方法
语法结构：
1 $.ajax({name:value,name:value,…})
名称 值
url : 发送请求的地址
type:设置请求的类型
success:当请求成功后运行的函数，
data：发送的数据
-
$.ajax()在异步请求中提交数据
在 $.ajax({})方法中通过data属性来存放提交的数据，支持json格式数据
在data属性中我们可以通过两种方式来指定提交数据，一种是name=value & name=value 另一种是javaScript对象指定提交数据，无论使用那种方式在servlet中都是通过request.getParamter(name) 根据name取值value
1.标准格式是 data:“name=value & name=value…”
-
用jquery使用ajax提交json数据
在$.ajax()中提交json数据，需要使用post方式来提交，通过js中json.stringify()函数将javaScript对象转化成json格式数据，在servlet中通过提取字符来获取数据
data.Json.stringify({name:value,name:value…})
在servlet中使用req.getReader().readLine()来获取提交数据，
-
$.ajax()处理响应中的json格式数据
$.ajax()方法会根据datatype属性中的值自动对响应的数据进行类型处理，如果响应数据是json，那么datatype的值是json,
在结果函数中直接获取的json转化成js的对象数据，不需要在使用json.parse()方法来转化了 -
$.get()的使用
$.get()方法是 $.ajax()方法基于get方式发送异步请求的简化版
语法结构：
$.get(url,function(result)) 这个函数是用来做结果集处理的，就是对响应数据进行处理
$.get(url,data,function(result)) 多了一个参数
data数据有两种格式可以提交
1 $.get(url,“name=key&name=value”,function(result)) 这种是标准格式提交数据
2 $.get(url,{userid:1,username:“oldlu”…}),function(result))
-
$.post()的使用
$.post()方法是 $.ajax()方法基于post方式发送异步请求的简化版
语法格式
$.post(url,function(result))
$.post(url,data,function(result))
标准data数据格式
$.post(url,“name=value&name=value”,function(result))
通过javascript对象指定提交数据
$.post(url,{userid:1,username:“value”},function(result))
注意不支持json格式数据
-
$.getJSON()的使用
$.getJSON()方法是 $.ajax()方法基于get方式发送异步请求，并将响应结果中的json格式数据的字符串对象自动转化成javascript对象，在使用这个方法时要求返回数据必须是json格式数据类型， $.getJSON()方法和resp.setContentType(“appliction/json”)是一起使用的，
语法结构
$.getJSON(url,function(result))
$.getJSON(url,data,function(result))
data数据类型有两种标准式是
$.getJSON(url,“name=value&name=value”,function(result));
要求返回的数据必须是json格式的数据
$.getJSON(ur,{userid:1,username:“oldlu”},function(result))
要求返回的数据必须是json格式的数据
-
serialize()方法的使用
将form表单中的数据自动拼接成name=value&name=value结构。 这个方法是jquery下的方法
注意ajax是不提交表单的，所以表单的值需要一个一个来获取，所以需要这个方法，
语法结构：var param = $(“form”).serialize(); form就是标签，意思就是获取了所有form标签下的key=value结构的数据，
param的值是name=value&name=value
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
