jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。

函数 描述
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素，返回 JSON 数据结构数据。

1、load()方法

load()方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。.load()方法是局部方法，需要一个包含元素的jQuery对象作为前缀。

语法格式：

    load(url,data,function(response,status,xhr))

参数说明：

url：必须，请求html文件的url 地址，参数类型为String

data：可选，发送的key/value 数据，参数类型为Object

function(response,status,xhr)：可选，成功或失败的回调函数，参数类型为函数Function。

response - 包含来自请求的结果数据；status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）；xhr - 包含 XMLHttpRequest 对象。

备注：XMLHttpRequest对象属于JavaScript 范畴，可以调用一些属性如下：

xhr对象的status属性的值，如果成功返回数据则为：success，否则为：error。xhr对象的statusText属性值如下：

样例：

--让Ajax异步载入一段HTML内容，若不选择data参数，采用get方式提交，否则为post方式提交

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax学习</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(‘input‘).click(function(){
                $(‘#box1‘).load(‘test1.html .title‘,{username:‘qing‘});
                $(‘#box2‘).load(‘test2.html‘);
            });
        });

    </script>
</head>
<body>
    <input type="button" value="Ajax加载数据" />
    <div id="box1"></div>
    <hr color="red">
    <div id="box2"></div>
</body>
</html>

test1.html文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span class="title">新疆大学</span>
    <span class="url">www.xju.edu.cn</span>
</body>
</html>

test2.html文件：

<span class="title">新疆大学</span>
<span class="url">www.xju.edu.cn</span>

输出结果：

--让Ajax异步载入服务器文件

Ajax1.htm文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax学习</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘input‘).click(function () {
                $(‘#box1‘).load(‘http://localhost:5567/WebForm1.aspx?id=123‘, { username: ‘qing‘ }, function (response, status, xhr) {
                    alert(‘返回的值为：‘ + response + ‘，状态为：‘ + status + ‘，状态是：‘ + xhr);
                    //console.dir(xhr);
                    //console.log("xhr:", xhr);
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="Ajax加载数据" />
    <div id="box1"></div>    
</body>
</html>


WebForm1.aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

WebForm1.aspx.cs文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblMessage.Text = "Hello,Ajax!" + Request["id"].ToString();
        }
    }
}

输出结果如下：

2、$.get()和$.post()

$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

$.get()方法通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

$.get()方法和$.post()有四个参数，前面三个参数和.load()一样，多了一个第四参数dataType，即服务器返回的内容格式：包括xml、html、script、json、jsonp 和text。第一个参数为必选参数,后面三个为可选参数。

该函数是简写的 Ajax 函数，等价于：

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.ajax({

type: ‘POST‘,

url: url,

data: data,

success: success,

dataType: dataType

});

--通过直接在url问号紧跟传参

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax学习</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘input‘).click(function () {
                $.get(‘http://localhost:5567/WebForm1.aspx?id=123&UserName=qing&pass=123456‘, function (response, status, xhr) {
                    if (status == "success") {
                        $("#box1").html(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="Ajax加载数据" />
    <div id="box1"></div>    
</body>
</html>

WebForm1.aspx.cs文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblMessage.Text = "Hello,Ajax! id:" + Request["id"].ToString() + ",UserName:" + Request["id"].ToString() + ",pass:" + Request["pass"].ToString();
        }
    }
}

    注意：第四参数dataType是指定异步返回的类型。一般情况下DataType参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。若本身是纯文本，如果强行按照xml或者json数据格式返回的话，那么就无法获取数据。

结果：

等效于：

--通过第二个参数data，对象形式的键值对传参

<script type="text/javascript">
        $(function () {
            $(‘input‘).click(function () {
                $.get(‘http://localhost:5567/WebForm1.aspx‘, {id:123, UserName: ‘qing‘, pass: 123456 }, function (response, status, xhr) {
                    if (status == "success") {
                        $("#box1").html(response);
                    }
                });
            });
        });
</script>

$.post()方法的使用和$.get()基本上一致，基本都是背后的不同，在用户使用上体现不出。具体区别如下：

1.GET 请求是通过URL 提交的，而POST 请求则是HTTP 消息实体提交的；

2.GET 提交有大小限制（2KB），而POST 方式不受限制；

3.GET 方式会被缓存下来，可能有安全性问题，而POST 没有这个问题；

--和上面结果相同样例：

<script type="text/javascript">
        $(function () {
            $(‘input‘).click(function () {
                $.post(‘http://localhost:5567/WebForm1.aspx?id=123‘, {UserName: ‘qing‘, pass: 123456 }, function (response, status, xhr) {
                    if (status == "success") {
                        $("#box1").html(response);
                    }
                });
            });
        });
</script>

3、$.getScript()和$.getJSON()

$.getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法格式：

$.getScript(url,success(response,status))

$.getScript(url,success(response,status))

参数说明：

url：将要请求的 URL 字符串。

success(response,status)：可选。规定请求成功后执行的回调函数。额外的参数：response - 包含来自请求的结果数据；status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

该函数是简写的 Ajax 函数，等价于：

$.ajax({

url: url,

dataType: "script",

success: success

});

$.ajax({

url: url,

data: data,

success: callback,

dataType: json

});

4、$.ajax()方法

$.ajax()是所有ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。















jQuery学习笔记10：Ajax技术,布布扣,bubuko.com

时间： 2024-10-26 16:24:16

jQuery学习笔记10：Ajax技术的相关文章

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

学习笔记：ajax使用规则讲解

ajax: 局部数据更新:1.ajax 由 html css Dhtml  js xml json dom 的一种结合. ajax 是一种技术,它是一种解决方案.  具有一些互动性的不需要页面刷新,减少用户的心理等待时间,并能够及时响应数据的一种解决方案2.ajax 的特点:    ajax 是基于标准的html css xml的构造    使用dom对象动态的显示和交互数据     它的数据交互格式 文本格式 xml  json    使用基于浏览器的xmlHTTPRquest 对象进行数据同

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

《C++ Primer Plus》学习笔记10

<C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<&

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

Js脚本之jQuery学习笔记（1）

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习笔记--JqGrid相关操作 方法列表（上）

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

Android:日常学习笔记(10)———使用LitePal操作数据库

Android:日常学习笔记(10)---使用LitePal操作数据库 引入LitePal 什么是LitePal LitePal是一款开源的Android数据库框架,采用了对象关系映射(ORM)的模式,将平时开发时最常用的一些数据库功能进行了封装,使得开发者不用编写一行SQL语句就可以完成各种建表.増删改查的操作.并且LitePal很"轻",jar包大小不到100k,而且近乎零配置,这一点和Hibernate这类的框架有很大区别.目前LitePal的源码已经托管到了GitHub上. 关