【Ajax】jQuery中的Ajax方法（一）

最新推荐文章于 2024-07-29 20:46:57 发布

one or only

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量388

点赞数

文章标签： Ajax jQuery 异步刷新

本文链接：https://blog.csdn.net/qq_37308779/article/details/81750328

版权

jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。
对于封装的方式，jQuery 采用了三层封装：
最底层的封装方法为：$.ajax()，
而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，
最高层的方法是：$.getScript()和$.getJSON()

1、.load()方法

load(url [,data] [,callback]); 方法有三个参数：

url (必须，请求 html 文件的 url 地址 ，参数类型为 String)
data (可选，发送到服务器的 {key:value,key2:value} 数据，参数类型为 Object)。
callback (可选，成功或失败的回调函数，参数类型为函数 Function)。回调函数可以传递三个可选参数：responseText（请求返回）、textStatus（请求状态)、XMLHttpRequest（XMLHttpRequest对象)。
这个回调函数是在请求完成后触发的，和请求成功失败没关系！
load()方法是将一个页面的内容添加到指定的DOM的元素下，所以在js中调用load() 方法时应该是$("#id").load(url)DOM中的某个节点元素而不是$.load(url);
load()方法传递方式是按照data参数来决定的，如果没有参数传递则使用get方式的，如果有参数传递则是使用post方式。

Load方法测试：

[Load.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>  
     <div class="comment">
        <p>
            <a href="#" class="username">张三</a>
            <span class="location">[北京市网友]</span>
        </p>

        <p class="contentTxt">一楼给度娘</p>
    </div>

    <div class="comment">
        <p>
            <a href="#" class="username">李四</a>
            <span class="location">[山东省济南市网友]</span>
        </p>

        <p class="contentTxt">没抢到沙发</p>
    </div>

    <div class="comment">
        <p>
            <a href="#" class="username">王五</a>
            <span class="location">[河南省郑州市网友]</span>
        </p>

        <p class="contentTxt">顶顶顶顶顶</p>
    </div>
</body>
</html>

然后创建load.html，添加一个button按钮触发Ajax事件，将加载进来的HTML内容存放到id为“Text”的元素中。

[TestLoad.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {
        $("#btn").click(function() {
            $("#Text").load("Load.html");
        });
    });
</script>
<body>
    <input type="button" id="btn" value="load评论">
    <div>最新评论：</div>
    <div id="Text"></div>
</body>
</html>

测试结果：

这里写图片描述

2、`$.get()`和`$.post()`

.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而 $.get()和$ .post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的， $.get()和$ .post()更加合适。
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数，后面三个为可选参数。

$.get()结构为：

$.get(url [, data] [, callback] [, type])

url (String):请求的服务器端资源的url。
data (Object):以key/value的形式构造查询字符串追加到url。
callback (Function):在请求成功(success)时被调用。将请求结果和状态传递给该方法。
type (String):服务器端返回内容的格式。
get请求的回调函数只有两个参数即请求返回的信息和请求状态！
只有请求成功后才会调用回调函数而不像load方法不管成功还是失败都会调用回调函数！
Type参数，定义了请求返回的数据格式，按照自己需求进行定义支持如下几种格式：xml、html、script、json、text！
一般情况下 type 参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。

$.get()方法测试：

[TestGet.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            // 点击按钮触发get请求
            $.get("get.jsp", {
                // 向服务器传递参数，encodeURI进行完整编码
                username: encodeURI($("#username").val()),
                location: encodeURI($("#location").val()),
                contentTxt: encodeURI($("#contentTxt").val())
            }, function (data, textStatus) {
                //alert(textStatus);   // 返回请求状态
                //alert(decodeURI(data)); // 返回请求的状态
                // 将返回的数据添加到id为“resText”的元素中
                $("#resText").html(decodeURI(data));
            })
        });
    })
</script>

<body>
    <form id = "form1">
    <p>添加评论:</p>

    <p>姓名:<input type="text" name="username" id="username"></p>

    <p>位置:<input type="text" name="location" id="location"></p>

    <p>内容:<textarea name="contentTxt" id="contentTxt"></textarea></p>

    <p><input type="button" id="send" value="提交"></p>

</form>
<div>最新评论：</div>
<div id="resText"></div>

</body>
</html>

接下来构造get.jsp，模拟服务器处理请求并返回数据：

[get.jsp]
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <%
      String username = request.getParameter("username");
      String location = request.getParameter("location");
      String content = request.getParameter("contentTxt");

      out.println("<div class='comment'><a href='#' class='username'>" + username +
                  "</a><span class='location'>" + location +
                  "</span></p><p class='contentTxt'>" + content + "</p></div>");
    %>
</body>
</html>