第一个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. lintcode:最小差

    最小差 给定两个整数数组(第一个是数组 A,第二个是数组 B),在数组 A 中取 A[i],数组 B 中取 B[j],A[i] 和 B[j]两者的差越小越好(|A[i] - B[j]|).返回最小差. ...

  2. linux下tomcat下部署项目如何打包压缩备份

    范例一:将整个 /etc 目录下的文件全部打包成为 /tmp/etc.tar[root@linux ~]# tar -cvf /tmp/etc.tar /etc <==仅打包,不压缩![root ...

  3. Linux进程调度原理

    Linux进程调度原理 Linux进程调度机制 Linux进程调度的目标 1.高效性:高效意味着在相同的时间下要完成更多的任务.调度程序会被频繁的执行,所以调度程序要尽可能的高效: 2.加强交互性能: ...

  4. 对QT的理解——能在公司里不做Java，不做很偏门的产品，不使用偏门的语言，还有钱挣，要有感恩的心

    我的理解: QT做应用软件可以很强大,界面足够漂亮(最有意思的是QSS,让我刮目相看),应该是足够了.同时QT也提供了源码,不过超级复杂,难以理解,所以还是无法深入底层.另外它提供了一个额外的好处,就 ...

  5. http://www.cnblogs.com/wzh206/archive/2010/03/21/1691112.html

    http://www.cnblogs.com/wzh206/archive/2010/03/21/1691112.html

  6. MyBatis学习总结_01_MyBatis快速入门

    一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...

  7. Data Flow ->> Fuzzy Lookup & Fuzzy Grouping

    这两个任务的作用是数据清洗(Data Cleansing). Fuzzy Lookup通过引用另外一张数据库表或者索引来进行相似值匹配.这种组件对于标准化和查找可能错误的客户端数据非常有用.例如像地址 ...

  8. 感知机（python实现）

    感知机(perceptron)是二分类的线性分类模型,输入为实例的特征向量,输出为实例的类别(取+1和-1).感知机对应于输入空间中将实例划分为两类的分离超平面.感知机旨在求出该超平面,为求得超平面导 ...

  9. Android OpenCV样例调试+报错处理

    1.OpenCV样例调试:<OpenCV Sample - image-manipulations>       blog+报错:E/CAMERA_ACTIVITY(17665): Cam ...

  10. perl install module as non-root user

    install to local directory. 1. cpan 初始化,不用local::lib,mannual就行,其他auto2. 修改cpan 配置文件 cpan > o conf ...