概述
本篇主要介绍JQuery中的AJAX以及如何与后台(Java Web)进行数据交换
为什么使用AJAX?
AJAX是Asynchronous Javascript And XML的简称,虽然提到了XML,但是现在多用json作为数据交换格式;
顾名思义就是异步的使用JS和XML进行传送数据的方式,这里,异步是关键;之前我们传送数据,多是发送请求,接受响应,是一种同步的方式,获得数据需要刷新整个页面,这样的用户体验不好,多使用异步的方式,可以让用户在接收服务器传回的数据时继续做别的事情,从而改善用户的体验,也节省了传输数据的量。
JQuery中AJAX的使用
JQuery为我们封装了更好的方法来对AJAX进行操作,比如相对底层的$.ajax()方法,之后有get/post方法,然后有load方法。其实我们一般使用更高层的方法就足够了,但是要实现更复杂的操作,还是要使用.ajax方法,接下来,我就以ajax方法为例。
列举了一些常用的方法
$.ajax({
url:"",//请求发送的地址
dataType:"",//返回的数据类型json/xml等
type:"",//get或者post方法
data:{"key1":"val1","key2":"val2"},//可以为对象,字符串,数组,但都是键值对存在的
async:"",//是否为异步的,默认为true
beforeSend:function(){},//发送之前调用的方法
complete:function(){},//发送完成调用的函数
success:function(){},//发送成功调用的函数
error:function(){}//发送失败调用的函数
});
代码示例
sign_up.jsp
<%--
User: KevinTLee Date: 2016-04-18 Time: 18:57--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src="js/jquery-2.2.3.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<title>Sign Up</title>
<script>
$(document).ready(function () {
var msg = "";
$(".username").blur(function () {
/*$.post("/check", {"username": $(".username").val()}, function (json) {
var data=JSON.parse(json);//需要将返回的字符串解析成json对象
alert(data);
if (data.msg == 1 || $(".username").val() == '') $(".msg").html("不可用");//返回为1或者为空表示不可用
else
$(".msg").html("可用");
});*/
$.ajax({
url: "/check",
dataType: "json",
type: "post",
data: {"username": $(".username").val()},
error:function(){
alert("error");
},
success: function (data) {
//alert(data.msg);
$(".msg").html(data.msg);
}
})
});
});
</script>
</head>
<body>
<form class="signup">
<div class="box">
<p><label for="username">User:</label></p>
<p><input id="username" class="username" type="text"/><span class="msg"></span></p>
<p><label for="password">Password:</label></p>
<p><input id="password" class="password" type="password"/></p>
</div>
</form>
</body>
</html>
Check.java
package com.lidengju.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by KevinLee 2016-04-18 18:53. */
public class Check extends HttpServlet {
private String[] usernames = {"kevin", "bob", "stuart"};//用于测试的数据
private String username = null;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
username = request.getParameter("username");
String msg = "用户名可以使用!";
int used=0;
System.out.println("---Post---");
PrintWriter pw = response.getWriter();//通过这个来返回数据
for (String str : usernames) {
if (str.equals(username)||"".equals(username)) {
msg = "该用户名不正确或已经存在!";
used=1;
System.out.println("~~~"+msg);
}
}
//pw.print("{\"msg\":\""+used+"\"}");
pw.print("{\"msg\":\""+msg+"\"}");//输出json格式
pw.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
配置servlet到web.xml,或者使用注解方式(其实我偏爱注解一点)
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>check</servlet-name>
<servlet-class>com.lidengju.servlet.Check</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>check</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>
演示效果
写在后面
可以看到,我们使用post方法,其中没有指定传输的格式,返回的数据是字符串,需要我们把它解析成json对象;而使用ajax方法,我们指定了dataType为json,它会直接返回json对象。