第一个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. Struts2 Convention插件的使用（2）return视图以及jsp的关系

    package com.hyy.action; import com.opensymphony.xwork2.ActionSupport; public class HelloWorld extend ...

  2. VISO下载地址

    http://pan.baidu.com/share/home?uk=4011207371#category/type=0

  3. win7系统中任务计划程序的使用与查询

    任务计划程序是电脑中的一个好工具,用好了,会让我们使用电脑变的很便捷,具体经验教程如下所示: 工具/原料 装有win7系统的电脑 方法/步骤 在桌面找到“我的电脑”,右击,弹出窗口,找到“管理”,如下 ...

  4. jmeter 302请求测试

    需求,测试url:  http://test.123.com/123.action,请求该url之后会进行302跳转,判断跳转的页面是不是http://www.haha.com. 这个其实本质还是普通 ...

  5. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  6. php curl getinfo

    <?php    $ch = curl_init("http://www.baidu.com/"); echo "<pre>";print_r ...

  7. CentOS7安装配置DNS服务器

    准备工作(假设名称为bigcloud.local) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #更改主机名称 #vi /etc/sysconfig/netwo ...

  8. Android 使用全局变量传递数据

    使用全局变量传递数据,所谓的全局变量类似于jee开发中的application变量.申明后,全局调用.只有当内存被清理后,才被销毁.否则一直可以调用. 还是使用点击一个button,传递一个数据到另一 ...

  9. jquery Deferred demo

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. javascript 阻止冒泡

    JS  阻止冒泡 function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.stopPropagation) { //因此它 ...