Jquery第三篇【AJAX 相关的API】

最新推荐文章于 2024-07-15 22:52:27 发布

公众号Java3y

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量669

点赞数 1

分类专栏： Web前端库文章标签： jquery api ajax javascript xml

本文链接：https://blog.csdn.net/hon_3y/article/details/72622021

版权

前言

前面我们已经学了讲解了Jquery的选择器，关于DOM 的API还有事件的API。本博文需要讲解Jquery对AJAX的支持…

我们在开始使用JavaScript学习AJAX的时候，创建异步对象时，需要根据不同的浏览器来创建不同的对象….装载XML文件的时候，也有兼容性的问题。

Jquery就很好地屏蔽了浏览器不同的问题，不需要考虑浏览器兼容的问题，这是非常非常方便我们开发的。

Jquery对ajax常用的API

$.ajax([options])
load(url, [data], [callback])
$.get(url, [data], [fn], [type])
$post(url, [data], [callback], [type])
serialize()

前4个方法的功能都是差不多的，都是向服务器发送请求，得到服务器返回的数据。

最后一个是对表单的数据进行封装，将表单的数据封装成JSON格式

`load()`

首先，我们来使用一下load()这个方法吧。在文档中对它的解释是这样子的。

这里写图片描述

我来补充一下：

第一个参数：表示的是要请求的路径
第二个参数：要把哪些参数带过去给服务器端，需要的是JSON格式的
第三个参数：回调方法，服务器返回给异步对象的时候，会调用该方法

回调方法也有三个参数：

回调函数中参数一：backData表示返回的数据，它是js对象
回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
回调函数中参数三：xmlHttpRequest表示ajax中的核心对象

一般地，我们只需要用到第一个参数！

我们来使用这个方法来获取当前的时间，对这个方法熟悉一下：

调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间

如果带参数就自动使用post，不带参数自动使用get。
使用load方法时，自动进行编码，无需手工编码


<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
  <head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

  </head>
  <body>
  当前时间是：<span id="time"></span><br>
  <input type="button" id="button" value="获取当前时间">

  <script type="text/javascript">

    $("#button").click(function () {
    


      //请求服务器端的路径
      var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime();

      //没有要参数要带过去
      //var sendData = null;

      /*
       * function方法的三个参数：   
           * 第一个参数表示服务器端带回来的数据，是JS对象
           * 第二个参数表示的是返回状态的文字描述【用处不大】
           * 第三个参数表示的是异步对象，一般我们用来看服务器端返回的JSON的值是什么【用处还行】
           *       因为第一个参数返回的是JS对象，因此我们是看不见具体JSON的值是什么，所以有的时候要用第三个参数
       *
       * 值得注意的是：
       *       要想使用第三个参数，就必须把前两个参数给写上！
       *       调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间
       * */
      $("#time").load(url);

    });

  </script>


  </body>
</html>

Servlet代码：



    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String date = dateFormat.format(new Date());

        PrintWriter writer = response.getWriter();
        writer.write(date);

        writer.flush();
        writer.close();

    }