第一个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>

锋利的jQuery读书笔记---jQuery中Ajax--load方法的更多相关文章

  1. 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...

  2. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  3. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  4. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  5. 锋利的jQuery读书笔记---jQuery中动画

    jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...

  6. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  7. 使用反射机制实现jQuery调用ashx类中的指定方法

    使用反射机制实现jQuery调用ashx类中的指定方法   近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...

  8. jquery中的load方法加载页面无法缓存问题

    在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...

  9. 强化学习读书笔记 - 11 - off-policy的近似方法

    强化学习读书笔记 - 11 - off-policy的近似方法 学习笔记: Reinforcement Learning: An Introduction, Richard S. Sutton and ...

随机推荐

  1. svn教程

    安装过程: 1.下载软件后,双击程序进行安装,点击“Next”: 2.在许可证协议页面,选择“I Accept the terms in the License Agreement”,点击“Next” ...

  2. 网络打洞(P2P软件穿透内网进行通信) 原理

    http://www.cnblogs.com/gansc23/archive/2010/10/20/1857066.html 首先先介绍一些基本概念:NAT(Network Address Trans ...

  3. 安装MySQldb出错解决方法

    sudo yum install mysql-devel sudo yum install python-devel _mysql.c:36:23: error: my_config.h: No su ...

  4. Delphi是座宝山，有待挖掘

    Delphi是座宝山,有待挖掘1. VCL源码是座宝山,把纷繁复杂的Windows编程封装到短短几个类里,不超过8000行代码,还额外包括许多其它的技巧2. RTL是座宝山,方便程序员使用底层运算,不 ...

  5. Java：日历类、日期类、数学类、运行时类、随机类、系统类

    一:Calendar类 java.util 抽象类Calendar   1.static Calendar getInstance()使用默认时区和语言环境获得一个日历. 2. int get(int ...

  6. PHP中对数据库操作的封装

    在动态网面设计中很多都要涉及到对数据库的操作,但是有时跟据需要而改用其它后台数据库,就需要大量修改程序.这是一件枯燥.费时而且容易出错的功作.其实我们可以用PHP中的类来实现对数据库操作的封装,从而使 ...

  7. Linux操作系统基础（四）保护模式内存管理（2）【转】

    转自:http://blog.csdn.net/rosetta/article/details/8570681 Linux操作系统基础(四)保护模式内存管理(2) 转载请注明出处:http://blo ...

  8. flex 4 写皮肤

    皮肤容器:s:SparkSkin 主机组件:  [HostComponent("spark.components.Panel")] 绘制: <s:Group left=&qu ...

  9. AOJ-2249 Road Construction(最短路）

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=45523 有一个国王想在首都与各个城市之间修建公路,但是他的预算太高,所以必须 ...

  10. task判断任务是否存在

    tasklist|find /i "qq.exe" ||exit taskkill /im qq.exe /f