ajax和JSON基础知识

语法：$.post(参数1，参数2，参数3，参数4)
参数1：---------服务器资源路径
参数2：---------提交的数据——————{"键":值}
参数3：---------函数，可以处理服务器返回的结果
参数4：---------json
优点；
用户体验好，只是局部刷新页面，浏览器段进行算法实现，减少服务器压力
具体实现：
服务器端：通过 request.getAttribute("username") 获得数据
通过 response.getWrite().print("字符串")输出数据到浏览器,输出JSON的时候，要把JSON对象转成字符串

<script type="text/javascript">
//页面加载完
$(function(){
//获取对象
var div =  $("#username");
//添加焦点失去事件
div.blur(function(){
//使用ajax的post（）提交方式
$.post("${pageContext.request.contextPath}/Register2",{"username":$(this).val()},
function(ddd){
alert(ddd);
});
})
});

参数1："${pageContext.request.contextPath}/路径"
参数2：{"username":$(this).val()}--------可以通过this关键字获得表单中输入的数据
参数3：属于最后执行的，获取服务器传来的数据并处理，参数ddd可以取任意名
</script>

二者比较：
1、执行流程一样
2、区别：数据提交方式不同 --- post:请求体  get:请求头
3、乱码 ---- 在服务器完成，和常规实现一样
请求乱码处理，和之前的一般 Servlet 使用一样，GET 和 POST 分别处理
响应乱码处理，response.setCharacterEncoding("UTF-8");
也可以response.setContentType("text/html;charset=UTF-8");

符号：{}  ： ，
数组：[元素1,元素2,元素3]
对象: {"键1":值1,"键2":值2,"键3":值3......}

客户端:------》JS进行读写
写：按照JSON语法编写数据
读: 数组[索引]
对象.键名
键名有特殊符号的，需要使用['键名']
服务器:------->Java进行读写
读：request.getParameter("键")
写：使用第三方实现
单列集合或数组-----JSONArray.fromObject()
对象或双列集合-----JSONObject.fromObject()
最后调用toString 方法，转化成JSON
根据搜索框输入的值给出下拉列表选项的JS 代码

<script type="text/javascript">
//加载整个页面
$(function(){
//获取input输出框对象
var search  =   $("#search")
//绑定按键弹起事件:
search.keyup(function(){
//如果输入框为空
if($(this).val()==""){
$("#completeShow").slideUp(100);
return;
}
$("#completeShow").slideDown(100);
//开启ajax事件,采用post方式
$.post("${pageContext.request.contextPath}/FindByKey",{"key":$(this).val()},
function(data){
//获取div对象,添加无序排列
$("#completeShow").html("<ul id='itemul' class='list-group'></ul>");
//循环遍历 data
$(data).each(function(){
$("#itemul").append("<li class='list-group-item'><a href='#'>"+this.word+"(" + this.pinyin + ")"+"</a></li>");
})

},"json");
});
//搜索框失去焦点
search.blur(function(){
$("#completeShow").slideUp(100);
});
//搜索框获得焦点
search.focus(function(){
$("#completeShow").slideDown(100);
});
})
</script>