Ajax知识整理

一、Aajax基础

1、概念

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建 交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可 以在不重新加载整个页面的情况下，对页面的某部分进行更新。

2、使用

2.1、XMLHttpRequest 对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它 web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或 其它数据。
XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成 为 Ajax

2.2、使用步骤

<script>
      function submit(){
      	//1.创建 XMLHttpRequest 对象
         var xhr = new XMLHttpRequest();
         //2.指定请求方式以及请求地址
         xhr.open("get","ajax.do");
         //3.发送请求
         xhr.send();
         //4.获取服务器端给客户端的响应数据
         xhr.onreadystatechange = function(){
			//0:open()没有被调用 
			//1:open()正在被调用 
			//2:send()正在被调用 
			//3:服务端正在返回结果 
			//4:请求结束，并且服务端已经结束发送数据到客户端
           if(xhr.readyState == 4 && xhr.status == 200){
               alert(xhr.responseText);
               document.getElementById("span").innerHTML=xhr.responseText;
           }
         }
      }
    </script>

二、JSON介绍

1、简介

JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于人阅 读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。
在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传 输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。

2、特征

2.1、语法规则

示例：[{“属性”:“value”…},{“属性”:“value”…}]
大括号：表示 JSON 的字符串对象；
冒号：分割属性和值；
逗号：分割属性和属性；
中括号：表示数组

2.2、6种数据类型

string：字符串，必须要用双引号引起来；
number：数值，与 JavaScript 的 number 一致；
object：JavaScript 的对象形式，{ key:value }表示方式，可嵌套；
array：数组，JavaScript 的 Array 表示方式[ value ]，可嵌套；
true/false：布尔类型，JavaScript 的 boolean 类型；
null：空值，JavaScript 的 null；

3、常见json解析器

在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处理 JSON 格式的数据需要借 助第三方类库；
Gson：谷歌开发的 JSON 库，功能十分全面；
FastJson：阿里巴巴开发的 JSON 库，性能十分优秀；
Jackson：社区十分活跃且更新速度很快，SpringMVC 中默认使用 Jackson API 处理 JSON 格式的数据；

4、Jackson使用介绍

4.1、在响应中通过 JSON 格式传递数据

4.1.1、整体步骤

1、添加依赖 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar；
2、通过 jackson API 将 Java 对象转换 JSON 格式；
3、修改响应头，响应类型为 application/json；
4、将结果基于字符输出流推回客户端浏览器；
5、在页面的中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript对象；

4.1.2、示例

/**
 * 通过JSON格式响应单个对象
 */
@WebServlet("/single.do")
public class SingleObjectServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //创建Users对象
        Users users = new Users();
        users.setUserid(1);
        users.setUsername("zhangsan");

        //使用jackson的API将Users对象转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        //将Users对象转换为JSON格式的字符串对象
        String string = objectMapper.writeValueAsString(users);
        System.out.println(string);
        //设置响应类型为application/json
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

<script>
        function but(){
            var xhr = new XMLHttpRequest();
            xhr.open("get","single.do");
            xhr.send();
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    alert(obj.userid+" "+obj.username);
                    document.getElementById("span").innerHTML=obj.userid+"<br/>"+obj.username;
                }
            }
        }
    </script>

4.2、在请求中通过 JSON 格式传递数据

4.1.1、整体步骤

1、在页面的 JavaScript 中通过 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式的数据；
2、将请求方式修改为 POST 方式；
3、通过 send()函数将 JSON 格式的数据提交到服务端；
4、在 Servlet 中通过字符输入流读取请求体中 JSON 格式的数据；
5、通过 jackson API 将获取到的 JSON 格式的数据转换为 Java 对象；

4.1.2、示例

<script>
        function but(){
           var id= document.getElementById("userid").value;
           var name = document.getElementById("username").value;
           var obj = {userid:id,username:name};
           var content = JSON.stringify(obj);
           alert(content);
            var xhr = new XMLHttpRequest();
            xhr.open("post","json.do");
            xhr.send(content);
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    document.getElementById("span").innerHTML=xhr.responseText;
                }
            }
        }
    </script>

/**
 * 在请求中通过JSON格式传递数据
 */
@WebServlet("/json.do")
public class RequestJSONServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //通过字符输入流从请求体中获取提交的JSON格式的数据
        req.setCharacterEncoding("utf-8");
        String s = req.getReader().readLine();
        //使用Jackson将JSON格式的字符串对象转换成java对象
        ObjectMapper objectMapper = new ObjectMapper();
        Users users = objectMapper.readValue(s, Users.class);
        System.out.println(users.getUserid()+" "+users.getUsername());
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print("OK");
        pw.flush();
        pw.close();
    }
}

4.3、工具类

package com.test.util;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * JSON转换工具类
 */
public class JsonUtils {

    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 将对象转换成json字符串。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
    	try {
			String string = MAPPER.writeValueAsString(data);
			return string;
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
    	return null;
    }
    
    /**
     * 将json结果集转化为对象
     * 
     * @param jsonData json数据
     * @param clazz 对象中的object类型
     * @return
     */
    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
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    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);
    		return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
    	
    	return null;
    }
    
}

4.4、常见注解

@JsonProperty：用于属性上，作用是把该属性的名称序列化为另外一个名称，如把 username 属 性序列化为 name，@JsonProperty(“name”)；
@JsonIgnore：用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和 方法对应的属性，返回的 json 数据即不包含该属性；
@JsonFormat：用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date 类型属性的值直接转化为我们想要的样式。如：@JsonFormat(pattern=“yyyy-MM-dd hh:mm:ss”)；

5、Jquery中Ajax

在 JQuery 中提供了很多的基于 Ajax 发送异步请求的方法，如：$.ajax()、$.get()、$.post()、$.getJSON()，使用起来更加方便；

5.1、$.ajax()

5.1.1、示例

 <script>
        function submit(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"post",
                url:"jsonConvert.do",
                dataType:"json",
                //data:"id="+userid+"&name="+username,
                data:JSON.stringify({
                    id:userid,
                    name:username
                }),
                success:function(result){
                    alert(result.id+" "+result.name);
                    $("#span").html(result.id+" "+result.name);
                }
            });
        }
    </script>

5.1.2、提交数据格式说明

标准格式：data:”name=value&name=value…，在 Servlet 中通过 request.getParameter 来获取提交的数据；
js对象格式：data:{userid:100, username:”zhangsan” }，在 Servlet 中通过 request.getParameter 来获取提交的数据；
json格式：data:JSON.stringify({name:value,name:value…})，在 Servlet 中通过 req.getReader().readLine()来获取提交的数据；

5.1.2、响应 JSON 格式数据处理

JSON.parse()：使用其做格式的转换处理。
dataType:"json"：指定响应格式为json类型，如果响应数据为JSON 格式，则直接转换为JavaScript 对象；

5.2、$.get()

5.2.1、语法结构

$.get(url,function(result)
$.get(url,data,function(result))

5.2.2、示例

标准格式提交数据：$.get(url,”name=value&name=value”,function(result))
JS对象提交数据：$.get(url,{userid:1,username:”oldlu”,......},function(result))

5.3、$.post()

5.3.1、语法结构

$.post(url,function(result))
$.post(url,data,function(result))

5.3.2、示例

标准格式提交数据：$.post(url,”name=value&name=value”,function(result))
JS对象提交数据：$.post(url,{userid:1,username:”oldlu”,......},function(result))

5.4、$.getJSON()

要求返回的数据格式必须是 JSON 格式

5.4.1、语法结构

$.getJSON(url,function(result))
$.getJSON(url,data,function(result))

5.4.2、示例

标准格式提交数据：$.getJSON(url,”name=value&name=value”,function(result))
JS对象提交数据：$.getJSON(url,{userid:1,username:”oldlu”,......},function(result))

5.5、serialize()

将 form 表单中的数据自动拼接成 name=value&name=value 结构

5.5.1、语法结构

var param = $(“form”).serialize();
param 的值格式为：name=value&name=value