jQuery中Ajax的load方法详解


Posted in Javascript onJanuary 14, 2015

先来看一个Ajax例子

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="button" value="Ajax提交" onclick="Ajax();" />

<div id="resText"></div>

</body>

<script type="text/javascript">

    function Ajax() {

        var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest对象

        if(window.ActiveXObject) {

            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

        } else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象

            xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest对象

        }

        if(xmlHttpReq != null) {

            xmlHttpReq.open("GET", "test.jsp", true);//调用open()方法并采用异步方式

            xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数

            xmlHttpReq.send(null);//因为使用get方式提交,所以可以使用null参调用

        }
        function RequestCallBack() {//一旦readyState值改变,将会调用这个函数}

            if(xmlHttpReq.readyState == 4) {

                if(xmlHttpReq.status == 200) {

                    //将xmlHttpReq.responseText的值赋予id为resText的元素

                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;

                }

            }

        }

    }
</script>

</html>

test.jsp的内容:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%out.println("Hello Ajax!");%>

下面来看下jQuery中的Ajax

1.load()

load()方法是jQuery中最为简单和常用的Ajax方法,能远程载入HTML代码并插入DOM中。

远程HTML代码:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div class="comment">

    <h6>张三:</h6>

    <p class="para">沙发.</p>

</div>

<div class="comment">

    <h6>李四:</h6>

    <p class="para">板凳.</p>

</div>

<div class="comment">

    <h6>王五:</h6>

    <p class="para">地板.</p>

</div>

</body>

</html>

load()载入HTML

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <style>

        * { margin:0; padding:0;}

        body { font-size:12px;}

        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

        .comment h6 { font-weight:700; font-size:14px;}

        .para { margin-top:5px; text-indent:2em;background:#DDD;}

    </style>

    <title></title>

</head>

<body>

<input type="button" id="send" value="Ajax获取" />

<div class="comment">已有评论</div>

<div id="resText"></div>

</body>

<script type="text/javascript">

    $(function () {

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

            $("#resText").load("test.html");

        });

    })

    /**

     * jQuery中的Ajax

     *

     * jQuery对Ajax操作进行了封装,

     *  在jQuery中$.ajax()方法属于最底层的方法,

     *  第2层是load()、$.get()、$.post()方法

     *  第3层是$.getScript()和$.getJSON()方法

     *

     *

     * load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。

     *      load(url [, data] [, callback])

     *

     *      url              String      请求HTML界面的URL地址

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

     *      callback(可选)    Function    请求完成时的回调函数,无论请求成功或失败

     * */
</script>

</html>

load()载入筛选后的HTML文档

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <style>

        * { margin:0; padding:0;}

        body { font-size:12px;}

        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

        .comment h6 { font-weight:700; font-size:14px;}

        .para { margin-top:5px; text-indent:2em;background:#DDD;}

    </style>

    <title></title>

</head>

<body>

<input type="button" id="send" value="Ajax获取" />

<div class="comment">已有评论</div>

<div id="resText"></div>

</body>

<script type="text/javascript">

    $(function () {

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

            $("#resText").load("test.html .para");

        });

    })

    /**

     * 筛选载入的HTML文档

     *

     * load()方法的URL参数的语法结构为:"url selector",注意URL和选择器之间有一个空格

     *

     * load()方法的传递方式根据参数data来自动指定。

     *      如果没有参数传递,则采用GET方式进行传递;

     *      反之,则会自动转换为POST传递

     *

     * **/

</script>

</html>

load()方法---回调函数

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <style>

        * { margin:0; padding:0;}

        body { font-size:12px;}

        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

        .comment h6 { font-weight:700; font-size:14px;}

        .para { margin-top:5px; text-indent:2em;background:#DDD;}

    </style>

    <title></title>

</head>

<body>

<input type="button" id="send" value="Ajax获取" />

<div class="comment">已有评论</div>

<div id="resText"></div>

</body>

<script type="text/javascript">

    $(function () {

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

            $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {

                alert($(this).html());

                alert(responseText);//请求返回的内容

                alert(textStatus);//请求状态:success、error、notmodified、timeout

                alert(XMLHttpRequest);//XMLHttpRequest对象

            });

        });

    })

    /**

     *

     * load()方法的回调参数

     *

     * **/

</script>

</html>

END

以上就是本文的全部内容了,希望对大家能有所帮助。

Javascript 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
jquery获取当前日期的方法
Jan 14 #Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 #Javascript
jQuery 中DOM 操作详解
Jan 13 #Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 #Javascript
jQuery过滤选择器详解
Jan 13 #Javascript
jQuery入门介绍之基础知识
Jan 13 #Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 #Javascript
You might like
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP多线程类及用法实例
2014/12/03 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python如何使用函数做字典的值
2019/11/30 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Django封装交互接口代码
2020/07/12 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
主持人演讲稿
2014/05/13 职场文书
经费申请报告
2015/05/15 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
九年级英语教学反思
2016/02/15 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL