jQuery之Ajax

Ajax

定义：1.Ajax即"Asynchronous Javascript And XML"，（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
2.特点：
a.Ajax是一种用于创建快速动态网页的技术。
b.Ajax是一种无须重新加载整个网页，能够刷新部分网页的技术。
c.通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。
d.传统网页如果要更新某处内容，就必须将整个网页刷新。

jQuery之Ajax实战

此项目用的是jquery-3.2.1.js

1.编写jquery.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("#username").blur(function(){//当username失去焦点时
		var value = $("#username").val();
		$.ajax({
		    type:"POST",//请求方式
			url:"AjaxServlet",//请求服务器的URL
			data:{val:value},//这是一个对象，它表示请求参数
		    async:true,//是否为异步请求
		    cache:false,//是否缓存
		    dataType:"json",//服务器返回的数据类型
		    success:function(result){//result就是服务器返回的值
		    	 $("label").text(result.username); 
	        }
		});
	});
});
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username"/><font color="red"><label></label></font><br/>
密  &nbsp; 码：<input type="password" name="password"/>
</body>
</html>

2.servlet代码

package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet{
	 private static final long serialVersionUID = 6514018241896487838L;

	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		
		String value = req.getParameter("val");
//		System.out.println(value);
		if(value.equals("hcybx")) {
			String str = "{"username":"用户名已经存在!"}";
			resp.getWriter().print(str);
		}else {
			String str = "{"username":"用户名可以注册!"}";
			resp.getWriter().print(str);
		}
	}
}