JavaWEB（AJAX）

1.JSON使用

对象字符串，满足定义规则的字符串。

1.1 前端JSON格式字符串的转换使用

    JavaScript——JSON.stringify(o);JSON.parse(jsonStr);
    jQuery——$.parseJSON

1.2 后端JSON格式字符串的转换使用

    jackJSON
    fastJSON

2.异步与同步

2.1 同步

一个人同一时间只能做一件事情，只有一件事情做完，才能做另一件事情。

2.2 异步

一个人事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头做之前未完成的事情。

3.jQuery之AJAX使用

 原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本），而jQuery将这些复杂的业务逻辑进行封装处理，使用非常简单。

3.1 概述

     Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML
    核心：Ajax就是能够做到局部刷新！

 3.2 方法

    ** ajax()
    ** get()
    ** post() 

 3.3 语法

	$.ajax({          
       	 	url:"发送请求（提交或读取数据）的地址", 
        		dataType:"预期服务器返回数据的类型",  
        		type:"请求方式", 
        		async:"true/false",
        		data:{发送到/读取后台（服务器）的数据},
         		success:function(data){请求成功时执行},      
         		error:function(){请求失败时执行}
	});

	$.post(url, [data], [callback], [type]);

	$.get(url, [data], [callback], [type]);

搜索自动补全

		<script type="text/javascript">
		$(function(){
			//隐藏
			$("#context").hide();
			//获取输入框  键盘按下事件
			$("input").keyup(function(){
				//获取输入框的值
				let keywords = $(this).val();
				if(keywords){
					$("#context").show();
				}else{
					$("#context").hide();
					return;
				}
				//将关键词通过ajax请求传输到servlet
				$.post("autoFull.do",{"keywords":keywords},function(data){
					//console.log("result = "+data);
					//获取结果
					let list = $.parseJSON(data);
					if(list.length===0){
						$("#context").show();
						$("#context").css("height","20px");
						$("#context").html("无记录");
					}else{
						if(list.length>=10){
							$("#context").css("height","200px");
						}else{
							$("#context").css("height",(20*list.length)+"px");
						}
						let str= "";
						$.each(list,function(index,obj){
							//console.log(index,obj,obj.dname);
							str+="<div onclick = \"divBtn('"+obj.gname+"')\" onmouseout = \"this.style.background=''\" onmouseover = \"this.style.background='red'\">"+obj.gname+"</div>";
						})
						$("#context").html(str);
					}
					
				});
				
			}); 
		});
		
		function divBtn(dname){
			$("#keywords").val(dname) 
			$("#context").hide();
		}

		</script>

Servlet

@WebServlet("/autoFull.do")
public class AutoFullServlet extends HttpServlet {

	// 实例化
	IGoodsBiz igb = new GoodsBizImpl();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doGet(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("请求成功");

		// 编码
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");

		// 获取参数
		String keywords = req.getParameter("keywords");

		List<Goods> queryGoodsAll = igb.queryGoodsAll(keywords);

		// 获取out
		PrintWriter out = resp.getWriter();

		// 实例化jackJSON工具
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(queryGoodsAll);

		out.write(result);
		out.flush();
		out.close();
	}
}