之前使用js代码实现AJAX的方式非常麻烦，而且较老版本的IE浏览器不支持这种方式，兼容性较差；而jQuery对AJAX实现了完美封装，并且兼容性也非常好，所以我们接下来学习jQuery的AJAX实现。
一、实现AJAX的方法
在AJAX中，我们需要四步才能实现AJAX，在jQuery中，我们只需要一个方法ajax()就可以实现，需要使用内置对象jQuery或者jQuery的别名$来实现。
ajax()方法只有一个参数，这个参数是一个JS对象，JS中使用一对大括号（“{}”）就可以表示一个对象。
JS中的对象：
属性：
{属性名称:属性值,属性名称2:属性值}
{name:"zhangsan",age:18}
方法：
{方法名:function(){}}
{sum:function(a,b){return a + b;}}
ajax方法的参数：
ajax({
type:设置请求的类型，常用的有两种：GET和POST
url:设置请求的地址
data:用于设置POST请求方式提交的数据
success:可以设置一个方法，请求响应完成之后要执行的方法
})
POST请求中设置的Context-Type不用再进行设置了，jQuery已经帮我们实现了。
二、jQuery的AJAX入门案例
1、将jQuery导入项目
导入jQuery
2、创建一个html页面
在html页面中导入jQuery，注意路径不要写错；然后为按钮添加点击事件，注意是要在页面加载完成后才能执行的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//实现AJAX
function send(){
$.ajax({
type:"GET",
url:"/web14_test2/JQueryAJAXServlet?username=zhangsan",
//连接成功后执行的方法，获取响应信息
success:function(msg){
//将响应信息写入div中
$("#div01").html(msg);
}
});
}
$(function(){
$("input").click(function(){
send();
});
});
</script>
</head>
<body>
<input type="button" value="发送" />
<br />
<br />
<div id="div01"></div>
</body>
</html>
3、创建JQueryAJAXServlet类
返回大写的用户名
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class JQueryAJAXServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取客户端提交的数据
String username = request.getParameter("username");
//返回大写的用户名
response.getWriter().println(username.toUpperCase());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
4、案例实现结果
打开页面
页面
点击发送按钮，页面没有刷新
页面
三、jQuery的其他AJAX方法
首先对入门案例中的JQueryAJAXServlet类进行简单的调整，添加获取请求方式的功能。
package com.itheima.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class JQueryAJAXServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求方式
String method = request.getMethod();
//获取客户端提交的数据
String username = request.getParameter("username");
//返回大写的用户名
response.getWriter().println(username.toUpperCase()+":"+method);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
1、get方法
使用get请求方式向服务器传输数据。可以有两个参数或者三个参数。
两个参数：
url：设置请求的地址?后面加数据
fn：设置请求响应完成后要执行的方法。
三个参数：
url：设置请求的地址
data：设置向服务器提交的数据，有两种方式
字符串形式："username=zhangsan&password=123"
JS对象：{username:"zhangsan",password:"123"}
fn：设置请求响应完成后要执行的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//实现AJAX
function sendGET(){
$.get("/web14_test2/JQueryAJAXServlet?username=zhangsan",function(msg){
$("#div01").html(msg);
});
}
$(function(){
$("input").click(function(){
sendGET();
});
});
</script>
</head>
<body>
<input type="button" value="发送" />
<br />
<br />
<div id="div01"></div>
</body>
</html>
get方法
2、post方法
三个参数：
url：设置请求的地址
data：设置向服务器提交的数据，有两种方式
字符串形式："username=zhangsan&password=123"
JS对象：{username:"zhangsan",password:"123"}
fn：设置请求响应完成后要执行的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//实现AJAX
function sendPOST(){
$.post("/web14_test2/JQueryAJAXServlet",{username:"lisi"},function(msg){
$("#div01").html(msg);
});
}
$(function(){
$("input").click(function(){
sendPOST();
});
});
</script>
</head>
<body>
<input type="button" value="发送" />
<br />
<br />
<div id="div01"></div>
</body>
</html>
post请求方式
3、load方法
load方法与之前的方法有所不同，它通过标签对象来调用，可以有一个参数，也可以有两个参数，这个方法可以直接把接收到的数据返回到调用方法的标签中。
一个参数：
url：设置请求的地址，数据可以拼接在后面
两个参数：
url：设置请求地址
data：设置请求的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function sendLoad(){
//一个参数
//$("#div01").load("/web14_test2/JQueryAJAXServlet?username=zhangsan");//GET
//两个参数
//$("#div01").load("/web14_test2/JQueryAJAXServlet","username=lisi");//GET
$("#div01").load("/web14_test2/JQueryAJAXServlet",{username:"wangwu"});//POST
}
$(function(){
$("input").click(function(){
sendLoad();
});
});
</script>
</head>
<body>
<input type="button" value="发送" />
<br />
<br />
<div id="div01"></div>
</body>
</html>
load方法1
load方法2
load方法3
对比上面三个结果，我们可以发现load方法会根据参数的不同,选择不同的提交方式,只有第二个参数是js对象,才会用post方法。
网友评论