jQuery的AJAX实现

  之前使用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,注意路径不要写错;然后为按钮添加点击事件,注意是要在页面加载完成后才能执行的方法。





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





    

    

get方法

2、post方法

  三个参数:
    url:设置请求的地址
    data:设置向服务器提交的数据,有两种方式
      字符串形式:"username=zhangsan&password=123"
      JS对象:{username:"zhangsan",password:"123"}
    fn:设置请求响应完成后要执行的方法。





Insert title here





    

    

post请求方式

3、load方法

  load方法与之前的方法有所不同,它通过标签对象来调用,可以有一个参数,也可以有两个参数,这个方法可以直接把接收到的数据返回到调用方法的标签中。
  一个参数:
    url:设置请求的地址,数据可以拼接在后面
  两个参数:
    url:设置请求地址
    data:设置请求的数据





Insert title here





    

    

load方法1

load方法2

load方法3

  对比上面三个结果,我们可以发现load方法会根据参数的不同,选择不同的提交方式,只有第二个参数是js对象,才会用post方法。

你可能感兴趣的:(jQuery的AJAX实现)