jQuery的AJax函数处理

在jQuery里面为了方便用户的处理,专门有一个ajax)函数,这个函数的主要功能是使用JSON结构来实现相关操作的配置及使用
如果要进行ajax的处理操作一定需要地址,请求模式,返回数据类型,请求处理成功,请求失败处理,发送的参数等内容,而这些内容在函数中都将通过JSON来实现配置.
如果要使用ajax进行处理,一定需要有后台服务端程序代码,

定义一个EchoServlet程序

package mao.shu.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class EchoServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置请求和回应编码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        //设置返回内容类型
        response.setContentType("text/html");
        //接受请求参数,假设请求参数为msg
        String msg = request.getParameter("msg");
        String did = request.getParameter("did");

        System.out.println("[msg=]"+msg);
        System.out.println("[did=]"+did);

        //回应内容
        response.getWriter().print("Echo:"+msg+",did="+did);
    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

而随后的需要对页面进行编写

编写ajax_demo.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax异步处理</title>
</head>
<body>
    <div id="inputDIv">
        <input type="text" id="info">
        <input type="button" id="sunBut" value="提交"/>
    </div>
    <!--请求回应显示层-->
    <div id="showDiv">

    </div>
</body>
</html>

编写js代码

       $(function(){

           $("#subBut").on("click",function(){
               //得到用户添加的内容
               var pmsg = $("#msg").val();

               //ajax函数使用的是JSON数据结构
                $.ajax({
                    url:"EchoServlet",
                    method:"post",
                    data:{//可能传入多个数据
                        msg:pmsg,
                        did:20
                    },
                    dataType:"text",    //请求返回的类型
                    //请求处理成功的函数
                    success:function(data){
                        $("#showDiv").append("<p>"+data+"</p>")
                    },
                    //处理请求失败的函数
                    error:function(){
                        alert("请求失败,请重新操作");
                    }
                })
           });
       })

在这里插入图片描述

在jQuery里面完全为用户隐藏了ajax的具体细节,用户需要配置的知识他自己所需要的内容
但是需要知道一点,对于ajax的异步处理,服务器端的程序可能返回xml或者是json结构的数据,这个时候,对于接收程序也是可以进行处理

返回xml数据


package mao.shu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/EchoServletXML")
public class EchoServletXML extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //设置请求和回应编码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        //设置返回内容类型
        response.setContentType("text/xml");
        //接受请求参数,假设请求参数为msg
        String msg = request.getParameter("msg");
        String did = request.getParameter("did");


        //回应内容
        response.getWriter().print("<?xml version='1.0' encoding='UTF-8'");
        response.getWriter().print("<member>");
        response.getWriter().print("<did>"+did+"</did>");
        response.getWriter().print("<msg>"+msg+"</msg>");
        response.getWriter().print("</member>");

    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

此时出现了XML数据的相关内容,但是随后在ajax处理里面,就需要对xml内容接收

     $(function(){

           $("#subBut").on("click",function(){
               //得到用户添加的内容
               var pmsg = $("#msg").val();

               //ajax函数使用的是JSON数据结构
                $.ajax({
                    url:"EchoServletXML",
                    method:"post",
                    data:{//可能传入多个数据
                        msg:pmsg,
                        did:20
                    },
                    //如果此时返回的是一个xml格式的内容,那么data参数就一定是一个Node对象
                    dataType:"xml",    //请求返回的类型
                    //请求处理成功的函数
                    success:function(data){
                        //取得node对象中的msg数据和did数据
                        var did = data.getElementsByTagName("did")[0].firstChild.nodeValue;
                        var msg = data.getElementsByTagName("msg")[0].firstChild.nodeValue;
                        $("#showDiv").append("<p>"+did+","+msg+"</p>")
                    },
                    //处理请求失败的函数
                    error:function(){
                        alert("请求失败,请重新操作");
                    }
                })
           });
       })

实际上使用XML返回数据是非常麻烦的,现在最好的方法就是返回JSON数据

定义EchoServletJSON,让其返回JSON内容


package mao.shu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/EchoServletJSON")
public class EchoServletJSON extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //设置请求和回应编码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        //设置返回内容类型
        response.setContentType("text/html");
        //接受请求参数,假设请求参数为msg
        String msg = request.getParameter("msg");
        String did = request.getParameter("did");

        //回应内容
        response.getWriter().print("{\"msg\":\"Echo"+msg+"\""+",\"did\":\"Echo"+did+"\""+"}");

    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

而后在ajax()函数处理的时候,要求将返回值类型变为json类型

定义前台页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
    <title>Ajax异步处理</title>
    <script type="text/javascript">
       $(function(){

           $("#subBut").on("click",function(){
               //得到用户添加的内容
               var pmsg = $("#msg").val();

               //ajax函数使用的是JSON数据结构
                $.ajax({
                    url:"EchoServletJSON",
                    method:"post",
                    data:{//可能传入多个数据
                        msg:pmsg,
                        did:20
                    },
                    dataType:"json",    //请求返回的类型
                    //请求处理成功的函数
                    success:function(data){
                        $("#showDiv").append("<p>"+data.did+"</p>")
                        $("#showDiv").append("<p>"+data.msg+"</p>")
                    },
                    //处理请求失败的函数
                    error:function(){
                        alert("请求失败,请重新操作");
                    }
                })
           });
       })
    </script>
</head>
<body>
    <div id="inputDIv">
        <input type="text" id="msg">
        <input type="button" id="subBut" value="提交"/>
    </div>
    <!--请求回应显示层-->
    <div id="showDiv">

    </div>
</body>
</html>

在这里插入图片描述

jQuery的AJax函数处理

定义一个EchoServlet程序

编写ajax_demo.html页面

编写js代码

返回xml数据

定义EchoServletJSON,让其返回JSON内容

定义前台页面

猜你喜欢