Jquery就是这么简单(2)_H5之家 - 中国HTML5教程资源分享第一站

Jquery也对JavaScript事件进行了封装，我们看一下以下的API：

window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者

ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化

ready和onload同时存在时，二者都会触发执行，ready快于onload

值得注意的是：当用户执行动作的时候，浏览器会自动创建事件对象，传递进去给响应事件的方法【类似与监听器的原理】，那么我们在响应方法上就可以获取一些属性：

这里写图片描述

Jquery对ajax常用的API

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

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

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

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

load()

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

这里写图片描述

我来补充一下：

回调方法也有三个参数：

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

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

调用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></span><br> <input type="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(); }

效果：

这里写图片描述

$.get()

上面的load()方法，当我们带参数给服务器的时候，就自动转化成post、不带参数的时候就转换成get。$.get()就是指定是get方法

load()方法是使用Jquery对象来调用的，并且调用过后，会把数据自动填充到Jquery对象的标签中间，而$.get()并不是特定的Jquery对象来调用！

$.get(url, [data], [fn], [type])参数和load()是完全类似的，我们在上面的例子中该一下就行了。

由于$.get()是没有将返回的数据自动填充到标签之中，因此需要手动地添加到指定的标签之中！

$.get(url, function (backData) { //得到客户端返回的数据【JS对象】 $("#time").append(backData); });

效果：

这里写图片描述

$.post()

.post()和.get()是十分类似的，只不过是把请求方式改变了，一般情况下，我们有参数传递给服务器的时候，都是用post方式的。

使用$.post()方法是需要设定编码的，它和load()方法是不一样的！