jQuery AJAX —开篇 $.load()

最新推荐文章于 2021-08-05 14:39:16 发布

AkkJiang~

最新推荐文章于 2021-08-05 14:39:16 发布

阅读量1.6w

点赞数 10

分类专栏： XML JS

本文链接：https://blog.csdn.net/akkzhjj/article/details/18315805

版权

JS 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

AJAX

7 篇文章 0 订阅

订阅专栏

XML

6 篇文章 0 订阅

订阅专栏

前言

之前的一篇博客，对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用，对Ajax的作用和基本使用有了一些了解。

这里做一个简单总结，AJAX核心对象XMLHTTPRequest和服务器的交互过程：

过程：初始化→发送请求→等待服务器响应→接收响应

　　1. 创建 XMLHTTPRequest 对象

　　2.使用open()方法设置和服务器端交互的相应参数，包括发送HTTP请求的方式(get orpost) ，请求的URL，是否异步方式交互

　　3.使用send()方法发送HTTP请求

　　4.使用onreadystatechange事件监听服务端反馈，根据readyState属性判断和服务器端的交互是否完成，还要根据status属性判断服务器是否正确返回了数据，完成后接受服务器端返回的数据。

　　这个过程是原始的AJAX的实现过程，对初学者明白这个过程是很有必要的。其实这里有一个更简单的实现方法——jQuery。

jQuery AJAX方法

$.load()

以之前的一篇博客为例，这里用jQuery load() 方法来实现：（把远程数据加载到被选的元素中）

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                //从文本框中获取内容
                var userName = document.getElementById("UserName").value;

                //load()方法从服务器加载数据，并把返回的数据放入被选元素中。
                //GET方式
                $('#message').load("AJAX?name=" + userName);
                //POST方式
                //$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});
                });
              });
        </script>
    </head>
    <body>
        <input type="text" id="UserName" value="admin"/>
        <input type="button" id="btn" value="校验用户名"/>
        <br/>
        <div id="message"></div>
    </body>
</html>

通过上例的实现，当我们引入jquery库后，一切变得好简单，只需要一行代码：

　　//GET方式

　　$('#message').load("AJAX?name="+ userName);

　　//POST方式

　　//$('#message').load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});

我们不需要再关心AJAX的请求和响应这些过程了。

jQuery load()方法是jQuery中最简单但强大的AJAX方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。它的语法如下：

$(selector).load(URL,data,callback);

说明：

　　 selector：存放返回的数据的元素，示例中的<div id="message"></div>

　　load的三个参数：

　　　URL(必须的)：这个不用说都知道，请求的URL地址；

　　　data(可选的)：发送至服务器的key/value 数据；

　　　callback(可选的)：请求完成后想要执行的函数（不管请求成功或者失败）。

附：服务端和XML代码

服务端

//服务端
public class AJAX extends HttpServlet {
    //服务器端代码
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String old = request.getParameter("name");
            if (old == null) {
                out.println("用户名不能为空");
            }else{
                String name = new String(old.getBytes("ISO8859-1"),"gb2312");
                //String name = URLDecoder.decode(old,"utf-8");
                System.out.println(name);
                if (name.equals("j")) {
                    out.println("用户名[" + name +"]已经存在，请使用其他用户名");
                }else{
                    out.println("用户名[" + name +"]尚未存在，可以使用");
                }
                //out.println("<a href=\"classic.html\">返回校验页面</a>");
            }
            
        } finally {
            out.close();
        }
    }

XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <servlet>
        <servlet-name>AJAX</servlet-name>
        <servlet-class>AJAX</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
<servlet-mapping>
        <servlet-name>AJAX</servlet-name>
        <url-pattern>/AJAX</url-pattern>
    </servlet-mapping>
<session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
</web-app>

前端显示

未完结...

正如上面所说的，$.load()是jQuery中最简单的AJAX方法，之后带来其它的jQuery AJAX方法。

$(selector).load(url,data,callback)	把远程数据加载到被选的元素中
$.ajax(options)	把远程数据加载到XMLHttpRequest 对象中
$.get(url,data,callback,type) $.post(url,data,callback,type)	使用HTTP GET 来加载远程数据
$.getJSON(url,data,callback)	使用HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	加载并执行远程的JavaScript 文件

AkkJiang~

关注

10
点赞
踩
13

收藏

觉得还不错? 一键收藏
22
评论
jQuery AJAX —开篇 $.load()

前言之前的一篇博客，对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用，对Ajax的作用和基本使用有了一些了解。这里做一个简单总结，AJAX核心对象XMLHTTPRequest和服务器的交互过程：过程：初始化→发送请求→等待服务器响应→接收响应　　1.创建XMLHTTPRequest对象　　2.使
复制链接

扫一扫

专栏目录