Ajax

异步的JavaScript和xml，无需重新加载整个网页的情况下，更新部分网页的技术

Ajax不是编程语言，适用于创建更好更快以及交互性更强的web应用程序技术

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>伪造Ajax</title>
</head>
<body>

<div>
    <p>
        <span id="currentTime"></span>
    </p>
    <p>请输入要加载的地址：</p>
    <P>
        <input type="text" id="url" value="https://www.baidu.com">
        <input type="button" value="确定" onclick="loadRemotePage()">
    </P>
</div>

<div>
    <h3>加载页面的位置</h3>
    <iframe style="width: 800px;height: 600px" id="iframep">

    </iframe>
</div>

<script type="text/javascript">
    window.onload = function () {
        var myDate = new Date();
        document.getElementById('currentTime').innerHTML = myDate;
    }
    
    function loadRemotePage() {
        var tag = document.getElementById('url').value;
        document.getElementById('iframep').src = tag;
    }
</script>
</body>
</html>

使用JQuery

在webapp下建立statics---js文件夹放入jquery.js文件

编写对应处理的controller,返回消息或者字符串或者json数据
编写ajax请求

url: controller请求

data:键值对

success:function(data){} 回调函数
给ajax绑定事件，点击onclick,失去焦点 onblur，键盘弹起keyup

//ajax默认get请求
$.ajax({
url:"${pageContext.request.contextPath}/ajax/ab",
data:{"username":$("username")},
success:function (data){
//data封装了服务器返回的数据
console.log(data);
}
});

$.post({
url:"${pageContext.request.contextPath}/ajax/ab",
data:{"username":$("username")},
success:function (data){
//data封装了服务器返回的数据
console.log(data);
}
});

$.post("${pageContext.request.contextPath}/ajax/ab",{"username":$("username")},function (data){})

JSON

轻量级的数据交换格式

//定义一个对象
    var user={
        name: 'kk',
        age: 13,
        sex: '男'
    }
    //object
    console.log(user);

    //将js对象转为json字符串
    var str = JSON.stringify(user);
    console.log(str);//  {"name":"kk","age":13,"sex":"男"}
    //json字符串转为js对象
    var object = JSON.parse(str);

JSON.stringify 转为json字符串

JSON.parse 解析

Controller返回json字符串

处理乱码问题

处理日期问题，不处理返回的是时间戳

json时间工具类

package com.henry.util;

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

import java.text.SimpleDateFormat;

public class JsonUtils {

    //dateFormat  "yyyy-MM-dd HH:mm:ss"
    public static String getJSON(Object object,String dateFormat){
        ObjectMapper mapper = new ObjectMapper();
        //让其不返回时间戳，关闭时间戳
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //时间格式化问题
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat);
        mapper.setDateFormat(simpleDateFormat);

        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }

    //重载
    public static String getJSON(Object object){
        return getJSON(object,"yyyy-MM-dd HH:mm:ss");
    }
}

Ajax

Ajax

JSON

推荐阅读