JavaWEB22AJAX快速入门

目录

1.JSON使用

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

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

2.异步与同步

    2.1 同步

    2.2 异步

3.jQuery之AJAX使用

    3.1 概述

   3.2 方法

1.jquery.ajax()

   2. get()

   3.  post()

    3.3 语法

4.案例

---

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 方法

1.jquery.ajax()

jquery 库中已经封装了ajax请求的方法。

jquery.ajax([settings])。发请求并且能得知成功还是失败。

type:类型，"POST"或者"GET"，默认是"GET"。
url:发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。
success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。
jquery初始化。

   2. get()

   3.  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]);

4.案例

    4.1 用户是否可注册

【案例1】用户注册  失去焦点时，判断是否成功。
1.编写html代码
<input type = "text" id = "sname" onblur = "myf(this.value);" /><span id = "sid"></span><br/>
<input type = "text" id = "spwd" />
2.引入jQuery库，编写js代码
function myf(sname){
        //alert(sname);
      
        $.ajax({
            type:"post",
            dataType:"text",
            url:"hello",
            data:"sname="+sname,
            success:function(data){
                $("#sid").html(data);
            }
        });
        
    }
3.编写servlet
request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        
        String sname = request.getParameter("sname");
        
        String str ="ok";
        if("admin".equals(sname)) {
            str = "no";
        }
        
        PrintWriter out = response.getWriter();
        out.print(str);
        out.flush();
        out.close();

    4.2 搜索自动补全

1.主界面

<script type="text/javascript">
	//获取全路径
	let path = "${pageContext.request.servletContext.contextPath}";

	$(function() {
		//隐藏
		$("#content").hide();
		//获取输入框  键盘按下事件
		$("input")
				.keyup(
						function() {
							//获取输入框的值
							let searchName = $(this).val();
							$("#content").hide();
							if (searchName) {
								$("#content").show();
							}

							$
									.post(
											path + "/autoFull.do",
											{
												"searchName" : searchName
											},
											function(data) {
												let list = $.parseJSON(data);
												if (list.length == 0) {
													$("#content").html("无记录");
													$("#content").css("height",
															"30px");
													return;

												}
												if (list.length >= 10) {
													$("#content").css("height",
															"300px");
												}

												let str = "";

												$
														.each(
																list,
																function(index,
																		obj) {

																	str += "<div onclick = \"divBtn('"
																			+ obj.hname
																			+ "')\" onmouseout = \"this.style.background=''\" onmouseover = \"this.style.background='red'\">"
																			+ obj.hname
																			+ "</div>";
																})
												$("#content").html(str);
											});
							$("input").blur(function() {
								$("#content").hide(400);

							});
						});
	});

	function divBtn(hname) {

		$("#searchName").val(hname)
		$("#content").hide();
	}
</script>

2.servlet

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

		// 获取客户端传过来的搜索关键词
		String searchName = request.getParameter("searchName");

		List<Hua> queryAll = this.queryAll(searchName);

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

		// 实例化jackJSON工具中的objectMapper对象
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(queryAll);

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