# Ajax

# Ajax概述

• Ajax(asynchronous javascript and xml)：异步的javascript 和xml。它能使用javascript 异步访问服务器

• 同步和异步：客户端和服务器端相互通信的基础上，客户端发送请求到服务器端

  • 同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
  • 异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作

• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，提升用户的体验。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

• Ajax运行原理

  页面发起请求，会将请求发送给==浏览器内核中的Ajax引擎==，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能

• Ajax应用场景

  • 谷歌/百度的搜索框自动补全
  • 用户注册时（校验用户名是否被注册过）
  • 下拉框联动

# JS 原生的 Ajax 技术

JS 原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，使用js原生的Ajax完成异步操作：

1. 创建Ajax引擎对象XHR

   var xmlHttp = new XMLHttpRequest();
   //var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5和IE6,现在基本没了吧
   

2. 为Ajax引擎对象绑定监听onreadystatechange（监听服务器已将数据响应给引擎），每当 readyState 改变时，就会触发 onreadystatechange 事件

   xmlhttp.onreadystatechange=function(){
   	if (xmlhttp.readyState==4 && xmlhttp.status==200){
       	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   		//还有responseXml这个方法
   	}
   }
   /*    readyState有如下5个状态
    - 0: 请求未初始化
    - 1: 服务器连接已建立
    - 2: 请求已接收
    - 3: 请求处理中
    - 4: 请求已完成，且响应已就绪*/
   
   /*  status情况
     - 200: "OK"
     - 404: 未找到页面*/
   

3. 绑定提交地址open

   xmlHttp.open("GET", "/day23_1/AServlet", true);
   //- 请求方式：可以是GET或POST
   //- 请求的URL：指定服务器端资源，例如；/day23_1/AServlet
   //- 请求是否为异步：如果为true表示发送异步请求，否则同步请求！
   

4. 发送请求

   //如果是发送POST请求，需要设置Content-Type请求头
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlHttp.send();//POST请求参数写在方法里；如果是GET请求参数可以写在open中URL后
   

5. 接受响应数据：写在onreadystatechange事件函数中

# jQuery 的 Ajax 技术

jQuery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jQuery方法有如下几种，但开发中经常使用的有三种

$.ajax( url [, settings ] )：是ajax在jquery中的底层实现，最复杂，最强功能。url必须有，也可在settings中设置

$.ajax({
    url: "AjaxServlet", //请求路径，不加/
    type: "POST", //请求方式
    async: true, //是否异步
    data: {"name": "zhangsan", "age": 22},
    //contentType: 设置发送信息的MIME类型，可以不设置，默认application/x-www-form-urlencoded
    success: function (data) {
        alert(data.name);
    },
    error: function () {
        alert("请求失败");
    },
    dataType: "json" //服务器返回的数据类型，若不指定S将根据HTTP包MIME信息来智能判断
});

$.get( url [, data ] [, success ] [, dataType ] )：发送get请求

$.post( url [, data ] [, success ] [, dataType ] )：发送post请求

$.get( //$.post和get没区别
    "AjaxServlet",  //url：待载入页面的URL地址，不加/
    {"name":"zhangsan","age":22},  //data：待发送 Key/value 参数
    function (data) {  //callback：载入成功时回调函数;data是接收服务端发送的数据
        alert(data.name+":"+data.age)
    },
    "json"  //type：返回内容格式xml, html, script, json, text, _default
);

$.getJSON( url [, data ] [, success ] )：getJSON专门用于请求json数据

$.getScript(url[,callback])

load(url[,data][,callback])

• GET和POST提交基本差不多，有一个地方不一样就是提交的数据是中文的话，Servlet需要编码，解码
  • 若是POST提交，可以设置request.setCharacterEncoding("utf-8")或者不用管，Ajax本身就解决了
  • 若是GET提交，则需要编码解码

serialize()：jQuery中序列表单内容为字符串。可用于Ajax提交表单

Ajax的其他delete、put等查看HTML章节介绍

# JSON

# 简介

JSON（JavaScript Object Notation）：JavaScript对象表示法

JSON是一种与语言无关的数据交换的格式，作用：

• JSON现在多用于存储和交换文本信息的语法
• 进行数据的传输
• JSON 比 XML 更小、更快，更易解析

语法

1. 基本规则

   • 数据在名称/值对中，**键用双引号（严格模式，但在js中可以不用）**引起来
   • 值的取值类型：
     1. 数字（整数或浮点数）
     2. 字符串（在双引号中）
     3. 逻辑值（true 或 false）
     4. 数组（在方括号中） {"persons":[{},{}]}
     5. 对象（在花括号中） {"address":{"province"："陕西"....}}
     6. null
   • 数据由逗号分隔：多个键值对由逗号分隔
   • 花括号保存对象：使用{}定义json 格式
   • 方括号保存数组：[]

2. 获取数据：JSON 是JavaScript的原生内容，也就是JavaScript可以直接取出JSON 对象中的数据

   1. JSON对象.键名

   2. JSON对象["键名"]

   3. 数组对象[索引]

   4. 遍历：

      1. for...in：遍历属性，即key字符串。普通for循环也可以

         for(let key in person){    
             //alert(key + ":" + person.key); //这样不能获取到。因为key值为字符串，相当于person."name"
             alert(key+":"+person[key]);
         }
         

      2. for...of：遍历值

         for(let value of person){
             alert(value.name);
         }
         

# JSON和Java对象的转换

• 常见的JSON解析器：Jsonlib，Gson（谷歌），fastjson（阿里），jackson（Spring内置）
• 使用步骤
  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 如下：

# Java对象转换JSON

• 调用ObjectMapper的相关方法进行转换
  1. 转换方法
     1. writeValueAsString(obj)：将对象转为json字符串
     2. writeValue(参数1，obj)，参数1如下：
        • File：将obj对象转换为JSON字符串，并保存到指定的文件中
        • Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
        • OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
  2. 注解（在JavaBean的属性上注解）
     1. @JsonIgnore：排除属性
     2. @JsonFormat(pattern = "yyyy-MM-dd")：属性值得格式化，pattern自定义
  3. 复杂java对象转换
     1. List：数组
     2. Map：对象格式一致

# JSON转为Java对象

• 调用ObjectMapper的相关方法进行转换：readValue(json字符串数据,Class)

# 案例

# 异步校验用户名是否存在

$("#inputusername").blur(function () {
    var username = $(this).val();
    //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
    //                         {"userExsit":false,"msg":"用户名可用"}
    $.post(
        "/CheckServlet",
        {"username":username},
        function(data){
            if(data.userExsit){
                $("#usernameTag").text(data.msg);
                $("#usernameTag").css("color","red")
            } else {
                $("#usernameTag").text(data.msg);
                $("#usernameTag").css("color","green")
            }
        },
        "json"
    )
});

//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
String username = request.getParameter("username");//获取用户名
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
//                         {"userExsit":false,"msg":"用户名可用"}
Map<String,Object> map = new HashMap<String,Object>();
if("tom".equals(username)){ //存在    
    map.put("userExsit",true);
    map.put("msg","此用户名太受欢迎,请更换一个");
}else{ //不存在
    map.put("userExsit",false);
    map.put("msg","用户名可用");
}

//将map转为json，并且传递给客户端
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);

• 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
  1. $.get()或$.post()或$.ajax()：将参数dataType指定为"json"
  2. 在服务器端设置MIME类型response.setContentType("application/json;charset=utf-8");

# 站内搜索