之前使用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导入项目
2、创建一个html页面
在html页面中导入jQuery,注意路径不要写错;然后为按钮添加点击事件,注意是要在页面加载完成后才能执行的方法。
Insert title here
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:设置请求响应完成后要执行的方法。
Insert title here
2、post方法
三个参数:
url:设置请求的地址
data:设置向服务器提交的数据,有两种方式
字符串形式:"username=zhangsan&password=123"
JS对象:{username:"zhangsan",password:"123"}
fn:设置请求响应完成后要执行的方法。
Insert title here
3、load方法
load方法与之前的方法有所不同,它通过标签对象来调用,可以有一个参数,也可以有两个参数,这个方法可以直接把接收到的数据返回到调用方法的标签中。
一个参数:
url:设置请求的地址,数据可以拼接在后面
两个参数:
url:设置请求地址
data:设置请求的数据
Insert title here
对比上面三个结果,我们可以发现load方法会根据参数的不同,选择不同的提交方式,只有第二个参数是js对象,才会用post方法。