Ajax基本使用
Ajax
作用：
后台与服务器进行少量数据交换，实现异步更新
使用步骤：
创建XMLHttpRequest对象：var xhr = new XMLHttpRequest();
给定请求方式与请求地址：xhr.open(“get”,“www.example.com”);
发送请求：xhr.send();
获取服务器端给客户端的响应数据：
- xhr.onreadystatechange = function(
- //0:open()没有被调用//1:open()正在被调用
- //2:send()正在被调用//3:服务端正在返回结果
- //4:请求结束，并且服务端已经结束发送数据到客户端
- if(xhr.readyState == 4 && xhr.status == 200){
- document.getElementById(“span”).innerHTML=xhr.responseText;
- alert(xhr.responseText);}
服务器端设置响应
JSON
基于字符串的轻量级数据交换格式，易于人阅读和编写
数据类型：
- string：字符串，必须要用双引号引起来。
- number：数值，与 JavaScript 的 number 一致
- object：JavaScript 的对象形式，{ key:value }表示方式，可嵌套
- array：数组，JavaScript 的 Array 表示方式[ value ]，可嵌套。
- true/false：布尔类型，JavaScript 的 boolean 类型。
- null：空值，JavaScript 的 null。
Jackson
-
解析json格式的AIP
-
在响应中通过json格式传递字符串
-
添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
-
通过 jackson API 将 Java 对象转换 JSON 格式
-
修改响应头，响应类型为 application/json
-
将结果基于字符输出流推回客户端浏览器
-
在页面的中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript对象
-
-
前后台请求发送与接收JSON数据
-
前台发送JSON数据
-
获取前台数据到函数获取前台数据到函数：document.getElementById（）.value
-
定义js对象（与要封装的对象参数名一致）：obj = {username:name,userid:id}
-
转换为JSON格式： JSON.stringify(obj)
-
基于post方式提交数据
-
-
后台接收JSON数据
- 通过字符输入流从请求体中获取提交的JSON格式的数据req.getReader().readLine();
- 使用Jackson将JSON格式的数据转换为java对象
-
-
jackson常用注解
-
@JsonProperty
- 此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把 username 属性序列化为 name，@JsonProperty(“name”)。
-
@JsonIgore
- 此注解用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和方法对应的属性，返回的 json 数据即不包含该属性。
-
@JsonFormat
- 此注解用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date 类型属性10的值直接转化为我们想要的样式。如：@JsonFormat(pattern=“yyyy-MM-dd hh:mm:ss”)
-
jquery中Ajax的使用
$.ajax()在异步请求中提交数据
-
提交普通格式数据
- 基于JavaScript提交数据
- 获取前台数据：$("#username").var();
- 使用$.ajax({type,url,data,success:function(result)})发送请求数据，并将返回值在页面输出
- 后台通过 request.getParameter 方法获取请求参数
-
提交 JSON 格式数据
-
在$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交
-
通过 JSON.stringify()函数将JavaScript 对象转换成 JSON 格式的字符串
-
在 Servlet 中通过字符输入获取提交的 JSON 格式的数据。
-
-
$.ajax()处理响应中的 JSON 格式数据
-
$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。
-
$.get()的使用
-
（ . g e t ( ) 方 法 是 .get()方法是 .get()方法是.ajax()方法基于 get 方式发送异步请求的简化版。）
-
语法结构
- $.get(url,function(result)
- $.get(url,data,function(result))
-
通过标准格式指定提交数据
- $.get(url,”name=value&name=value”,function(result))
-
通过 JavaScript 对象指定提交数据
- $.get(url,{userid:1,username:”oldlu”,…},function(result))
$.post()的使用
-
（ . p o s t ( ) 方 法 是 .post()方法是 .post()方法是.ajax()方法基于 post 方式发送异步请求的简化版。）
-
语法结构
- $.post(url,function(result))
- $.post(url,data,function(result))
-
通过标准格式指定提交数据
- $.post(url,”name=value&name=value”,function(result))
-
通过 JavaScript 对象指定提交数据
- $.post(url,{userid:1,username:”oldlu”,…},function(result))
$.getJSON()的使用
-
（ . g e t J S O N ( ) 方 法 是 .getJSON()方法是 .getJSON()方法是.ajax()方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式的字符串对象自动转换为 JavaScript 对象。）在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON()方法和 resp.setContentType(“application/json”)是一起使用的。
-
语法结构
- $.getJSON(url,function(result))
- $.getJSON(url,data,function(result))
-
通过标准格式指定提交数据
- $.getJSON(url,”name=value&name=value”,function(result))
- 要求返回的数据格式必须是 JSON 格式。
-
通过 JavaScript 对象指定提交数据
- $.getJSON(url,{userid:1,username:”oldlu”,…},function(result))
- 要求返回的数据格式必须是 JSON 格式。
serialize()方法的使用
-
将 form 表单中的数据自动拼接成 name=value&name=value 结构。
-
语法结构
-
var param = $(“form”).serialize();
-
param 的值为：name=value&name=value
-
-