JQuery中的Ajax

最新推荐文章于 2024-05-16 02:23:50 发布

零怀念

最新推荐文章于 2024-05-16 02:23:50 发布

阅读量458

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/linghuainian/article/details/82747724

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言：学过JavaScript原生操作Ajax的都知道，那些操作太繁琐了，而且大多数都是重复的代码，如每次发起Ajax请求都要创建XMLHttpRequest。JQuery封装了Ajax，使得我们操作起来更加简洁。

提交Ajax请求

JQuery.ajax(options)是JQuery Ajax支持的底层实现，该方法返回创建的XMLHttpRequest对象。大部分时候开发者无需理会它返回的XMLHttpRequest对象那个，但在特殊情况下其可用于手动终止请求。该函数只需要一个options参数，此参数是一个形如{key1:val1,key2:val2…}的JavaScript对象，用于指定发送Ajax请求的各种选项，各选项的说明如下：

contentType:指定发送请求到服务器时所使用的内容编码类型。默认为"applicaiton/x-www-form-urlencoded"。
data:发送本次Ajax请求的请求参数。该选项可以是JavaScript对象或查询字符串。如果是JavaScript对象，JQuery会自动将其转化为查询字符串（除非将pocessData设为false）。当该选项值为形如{key1:val1,key2:val2…}的对象，且其中val为数组时，JQuery会自动将它们转换为多个请求参数，例如{foo:["bar1","bar2"]}将会被转换为'&foo=var1&foo=bar2'（traditional为true的情况下。默认情况下traditional值为false，会转换为'&foo[]=var1&foo[]=bar2'）
dataType：指定服务器响应的数据类型。如果不指定，JQuery会自动根据响应的MIME信息返回responseXML或responseText，并将响应传给回调函数对应的参数。该选项支持如下值：

xml，返回可使用jQuery处理的XML文档

html，返回HTML文本。该HTML文本里可以使用<script.../>标签包含JS脚本。

script，返回JS脚本，此时将禁止从浏览器缓存里加载信息。JQuery会自动执行服务器响应的JS脚本。

json，返回一个符合JSON格式的字符串，JQuery会将响应转换成JS对象。

jsonp。

text，返回普通文本响应。

processData：指定是否需要处理请求数据。默认为true，如果data选项是一个JS对象，则jQuery会自动将其转换为查询字符串。指定为false，将不会转换。

示例1：客户端给服务器发送文本内容，服务器返回文本

jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery实现Ajax</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <%
        String path=request.getSession().getServletContext().getContextPath();
    %>
    <script>
        $(function () {
            $("#but").click(function () {
                var name=$("#name").val();
                $.ajax({
                    //请求路径
                    url:"<%=path%>/ajaxServlet",
                    //请求方法
                    type:"post",
                    //参数
                    data:{
                        "name":name,
                        age:1
                    },
                    //接收的服务端响应数据的烈性
                    dataType:"text",
                    //服务端成功响应后的回调函数
                    success:function (msg) {
                        alert(msg);
                    },
                    //出现异常的处理函数
                    error:function () {
                        alert("出错了");
                    }

                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="name">
    <input type="button" id="but" value="提交">
</body>
</html>

AjaxServlet:

package test;

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;
import java.io.PrintWriter;

@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        String name=request.getParameter("name");
        PrintWriter out=response.getWriter();
        out.write("hello:"+name);
    }
}

运行结果：

虽然形式不同，但其实和JavaScript发起Ajax请求实质是相同的，url和type相当于open()，data相当于send()，dataType：text相当于responseText,dateType:xml相当于responseXML.success相当于onreadystatechange最后成功状态的那次回调函数。

示例2：服务器向客户端返回XML

jsp页面：


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery实现Ajax</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <%
        String path=request.getSession().getServletContext().getContextPath();
    %>
    <script>
        $(function () {
            $("#but").click(function () {
                $.ajax({
                    //请求路径
                    url:"<%=path%>/ajaxServlet",
                    //请求方法
                    type:"post",
                    //接收的服务端响应数据的烈性
                    dataType:"xml",
                    //服务端成功响应后的回调函数
                    success:function (msg) {
                        alert(msg.getElementsByTagName("empname")[0].firstChild.nodeValue);
                    },
                    //出现异常的处理函数
                    error:function () {
                        alert("出错了");
                    }

                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="name">
    <input type="button" id="but" value="提交">
</body>
</html>

AjaxServlet:

package test;

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;
import java.io.PrintWriter;

@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/xml");
        String xml="<allEmps>\n" +
                "<emp>\n" +
                "<empno>1</empno>\n" +
                "<empname>小明</empname>\n" +
                "</emp>\n" +
                "</allEmps>";
        response.getWriter().write(xml);
    }
}

运行结果：

示例3：服务器向客户端返回JSON

JQuery封装后的Ajax有接收类型为json，它直接封装了将服务器发送来的文本字符串转换为JSON对象的操作，所以我们不用再去解析字符串。

jsp页面：


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery实现Ajax</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <%
        String path=request.getSession().getServletContext().getContextPath();
    %>
    <script>
        $(function () {
            $("#but").click(function () {
                $.ajax({
                    //请求路径
                    url:"<%=path%>/ajaxServlet",
                    //请求方法
                    type:"post",
                    //接收的服务端响应数据的烈性
                    dataType:"json",
                    //服务端成功响应后的回调函数
                    success:function (msg) {
                        alert(msg.cities[0].name)
                    },
                    //出现异常的处理函数
                    error:function () {
                        alert("出错了");
                    }

                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="name">
    <input type="button" id="but" value="提交">
</body>
</html>

AjaxServlet:

package test;

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;
import java.io.PrintWriter;

@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        String str="{\"name\":\"浙江\",\"cityCount\":2,\"cities\":[{\"name\":\"宁波\",\"id\":1},{\"name\":\"杭州\",\"id\":2}]}";
        response.getWriter().write(str);
    }
}

运行结果：

使用POST和GET方式提交Ajax

使用post和get方式提交Ajax可以有更简洁的方法：

$.post(url,[data],[function],[dataType]);
$.get(url,[data],[function],[dataType])

url：ajax请求路径。
data：是一个JS对象，用于指定请求参数。
function：服务器响应成功后的回调函数。该函数是一个形如function(data,status,jqXHR){...}的函数，其中data是服务器响应，status是服务器响应类型的描述信息，jqXHR表示发送异步请求的XMLHttpRequest对象。
dataType：接收服务器的返回数据的类型，如text,xml,json,script,text。

示例1：使用post提交

jsp页面：


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery实现Ajax</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <%
        String path=request.getSession().getServletContext().getContextPath();
    %>
    <script>
        $(function () {
            $("#but").click(function () {
                $.post("<%=path%>/ajaxServlet",{"name":"小明","age":1},function (data,status) {
                    alert(data.name+status);
                },"json");
            });
        });
    </script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="but" value="提交">
</body>
</html>

AjaxServlet:

package test;

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;
import java.io.PrintWriter;

@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        System.out.println(request.getParameter("name"));
        String str="{\"name\":\"浙江\",\"cityCount\":2,\"cities\":[{\"name\":\"宁波\",\"id\":1},{\"name\":\"杭州\",\"id\":2}]}";
        response.getWriter().write(str);
    }
}

运行结果：

使用get方式提交只要把jsp页面中的"post"修改为"get"即可。如果不需要对失败进行处理，那么以上的方法要比直接使用ajax()更加容易。

零怀念

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的Ajax

前言：学过JavaScript原生操作Ajax的都知道，那些操作太繁琐了，而且大多数都是重复的代码，如每次发起Ajax请求都要创建XMLHttpRequest。JQuery封装了Ajax，使得我们操作起来更加简洁。提交Ajax请求JQuery.ajax(options)是JQuery Ajax支持的底层实现，该方法返回创建的XMLHttpRequest对象。大部分时候开发者无需理会它返回的...
复制链接

扫一扫