1、Ajax概述
Ajax 的实际意义是不发生页面跳转、异步载入内容并改写页面内容的技术
Ajax也可以简单的理解为通过JS向服务器发送请求
2、Ajax请求
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax请求</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
//给button绑定单击事件
$("#btnAjax").click(function(){
//通过$.ajax发送Ajax请求!
$.ajax({
/*
url:必须的
type:可选,post,默认是get,设置发送请求的方式
data:可选,用来设置请求参数
success:可选的,用来设置回调函数,响应成功之后系统会自动调用该函数
响应数据会以参数的形式传输到该函数中
dataType:可选的,用来设置响应数据的类型,默认是text,可以设置成xml,或者是json等
*/
url:"${pageContext.request.contextPath}/AjaxServlet",
type:"get",
data:"username=admin&password=111111",
success:function(res){
//将响应的信息设置到span标签里面
$("#res1").text(res);
},
dataType:"text"
});
});
//给butID
//返回值$.get(url,[data],[callback],[type])
//url:必须的
//data:可选的
//callback:可选的,用来设置回调函数,响应成功之后系统会自动调用该函数
// 响应数据会以参数的形式传输到该函数中
//type:可选,post,默认是get,设置发送请求的方式
$("#btnGet").click(function(){
var url = "${pageContext.request.contextPath}/AjaxServlet";
var params = "username=admin&password=111111111";
$.get(url,params,function(res){
//将响应数据设置到span标签中
$("#res2").text(res);
},"text");
//通过post方法发送请求
$.post(url);
});
});
</script>
</head>
<body>
<button id="btnAjax">通过$.ajax发送Ajax请求!</button><span style="color:red" id="res1"></span><br>
<button id="btnGet">通过$.get/post发送Ajax请求!</button><span style="color:red" id="res2"></span><br>
</body>
</html>
AjaxServlet.java
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 用来处理Ajax请求的Servlet
*/
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("doget()");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username);
System.out.println(password);
response.setContentType("text/html;charset=utf-8");
//给浏览器响应一个字符串
response.getWriter().write("响应成功");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("dopost()");
}
}