jQuery之ajax技术的详细介绍

2024-12-08 02:55:20

1：Ajax技术包含以下几点：
基于Web标准(XHTML + CSS)的展示
使用DOM进行动态显示和交互
使用XMLHttpRequest进行数据交换和相关操作
使用javascript将所有内容绑定在一起
Ajax的核心是JavaScript的XMLHttpRequest对象，它是一种支持异步请求的技术。简而言之，使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应，
而不影响用户对页面的正常访问。对于XMLHttpRequest对象，不同的浏览器提供了不同的支持，IE是将其作为ActiveX控件集成到浏览器中的，而其他主流的浏览器直接
作为一般的JS对象来创建。

2：JS中的Ajax

XMLHttpRequest对象的属性及简要说明

名称

说明

readyState

通信的状态，当XMLHttpRequest对象把一个HTTP请求发送到服务器，到接收到服务器响应信息，整个过程将经历5种状态，该属性取值为为0-4

onreadystatechange

设置回调事件处理程序，当readyState属性的值改变时，会激发此事件

responseText

服务器返回的text/html格式的文档

responseXML

服务器返回的text/xml格式的文档

status

描述了HTTP响应short类型的状态代码，100表示Continue, 101表示Switching protocols数据交换，200表示执行正常，404表示未找到页面，500表示内部程序错误

statusText

HTTP响应的状态代码对应的文本(OK, not found)

readyState属性代码

代码

说明

代表未初始化的状态。创建了一个XMLHttpRequest对象，尚未初始化

代表连接状态，已经调用了open方法，并且已经准备好发送请求

代表发送状态，已经调用了send方法发出请求，尚未得到响应结果

代表正在接收状态，已经接收了HTTP响应的头部信息，正在接收响应内容

代表已加载状态，此时响应内容已完全被接收

代码如下:

</style>
</head>
<body>
<input id="Access" type="button" value="Access" />
<br />
<textarea id="content"></textarea>
<div id="browser"></div>
</body>
</html>

ajax.js的内容：

代码如下:

var xmlRequest;
function CreateRequest()
{
/* 创建XMLHttpRequest对象 */
if(window.ActiveXObject)
{
  return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
  return new XMLHttpRequest();
}
}
function ResponseHandler()
{
if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
{
  /* 如果通信成功，并且响应正常，执行以下操作 */

var reqContent = xmlRequest.responseText;
document.getElementById("browser").innerHTML = reqContent;
document.getElementById("content").value = reqContent;
}
}
function AjaxAccess()
{
/* 异步请求百度首页 */

xmlRequest = CreateRequest(); //创建XMLHttpRequest对象
xmlRequest.onreadystatechange = ResponseHandler; //设置回调函数
xmlRequest.open("GET","http://www.baidu.com"); //初始化请求对象
xmlRequest.send(null); //发送请求信息

/* 触发事件以后提示正在打开百度首页 */
var brow = document.getElementById("browser");
brow.innerHTML = "<h1>正在打开百度搜索</h1>";
}
window.onload = function()
{
document.getElementById("Access").onclick = AjaxAccess; //设置按扭单击事件
}

3：jQuery中的Ajax
$.ajax(options)方法
options是以“键/值”对的形式设置的，用于设置Ajax请求的参数，如请求方式、请求URL、回调函数等。
常用属性如下：
url: 发送请求的地址
type:请求方式，GET和POST，默认为GET
timeout: 设置请求超时时间，该属性为数值型，单位为毫秒
data: 发送到服务器的数据，“键/值”对形式，该属性可以是对象或者字符串，如果是对象，则自动转换为字符串
dataType: 预期服务器返回的数据类型，该属性为字符串类型。可选值如下： xml、html：返回纯文本HTML信息，包含的标签(script标签或者style标签)会在
文本插入DOM的时候执行、 script：返回纯文本JS代码、json、jsonp、text
contentType: 发送信息至服务器时内容编码类型，该属性为字符串类型，默认值为"application/x-www-form-urlencoded"，一般不用设置，因为默认值适合大多数应用场合
beforeSend: 请求发送前的事件，该属性为其设置事件处理程序，可用于发送前修改XMLHttpRequest的参数，如头信息。

代码如下:

function(XMLHttpRequest) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
complete: 请求完成后的事件，无论请求成功与否，都将触发该事件。
function(XMLHttpRequet, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
textStatus参数返回当前请求的执行状态(succss和error等)
success: 请求执行成功时的事件。
function(data, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
error: 请求执行失败时的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
global: 是否触发全局Ajax事件，该属性为Boolean类型，默认值为false

代码如下:

$(document).ready(function(){
$("#Access").click(function(){
  var xmlReq = $.ajax({
      type:'GET',
      url:'http://www.sougou.com',
      success:function(reqContent)
      {
       $("#browser").html(reqContent);
       $("#content").text(reqContent);
      }});
  $("#browser").html("<h1>正在打开搜狗搜索</h1>");
});
});

4：load方法
load(url, [data], [callback]);

代码如下:

</style>
</head>
<body>
<h2>回复列表</h2>
<input type="button" id="refresh" value="刷新列表" />
<div id="commentList"></div>
</body>
</html>

Load.js

代码如下:

$(document).ready(function(){
$("#refresh").click(function(){
  /* 要访问的页面URL，根据你实际情况做相应修改 */
  var url = "http://www.sogou.com";
  $("#commentList").load(url); //加载相应内容
});
});

5：$.get()方法
是一个全局方法，该方法使用GET方式来进行异步请求，语法格式如下：

代码如下:

var xmlReq = $.get(url, [data], [callback], [type]);
         $.get("www.baidu.com",
             {
                  user: 'zhangsan'
             }
             );
         callback: function(data, textStatus) {}

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Get</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Get.js"></script>
<style type="text/css">
body{ padding:30px 80px; font-size:14px; }
#blogList{ width:240px; height:120px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#blogList span{ display:inline-block; width:50px; text-align:right; margin-right:20px; color:#999; }
</style>
</head>
<body>
分类：
<select id="blogClass">
<option selected="selected" value="">所有</option>
<option>CSS</option>
<option>.NET</option>
</select>
<input type="button" id="Search" value="Search" />
<div id="blogList"></div>
</body>
</html>

Get.js

代码如下:

$(document).ready(function(){
$("#Search").click(function(){

/* 使用Get方式请求指定URL */
  $.get("http://localhost:2154/Web/BlogList.aspx",
  {
   key : $("#blogClass").val()
  },
  function(data){
   $("#blogList").html(data);
  });
});

$("#Search").click(); //触发一次单击事件
});

BlogList.aspx

代码如下:

<%@ Page Language="C#" %>
<%
    /*
     * 分别向数组里添加一些数据，
     * 这些数据一般来自数据库，
     * 这里只是模拟，就静态添加了
     */
    string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
    string[] blogTitle = { "CSS中的padding", "CSS入门", "C#中的类",
                           "C#基础知识", "C#面向对象", "C#设计模式" };

string key = Request["key"]; //获取请求服务器的关键字
    /*
     * 遍历数组集合
     */
    for (int i = 0; i < blogClass.Length; i++)
    {
        /*
         * 如果关键字为空，显示所有的记录
         * 如果关键字等于分类名称，显示该分类下的记录
         */
        if (key == null || key == string.Empty || key == blogClass[i])
        {
            %>
            <div>
            <span><%= blogClass[i]%></span><%= blogTitle[i]%>
            </div>
            <%
        }
    }
%>

6：$.post()方法
var xmlReq = $.post(url, [data], [callback], [type]);
$.get()方法是以GET方式提交的数据，所有的参数信息都将追加到URL后面，而Web请求一般对URL长度有一定限制，所以$.get()方法传递的数据长度也有一定的上限，
而$.post()方法是将参数作为消息的实体发送到服务器的，对数据无长度上的影响。

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Post</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Post.js"></script>
<style type="text/css">
body{ padding:20px 80px; font-size:14px; }
#login{ width:240px; height:160px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#login h4{ color:#666; margin:5px 0; font-size:18px; }
#login span{ font-size:15px; line-height:40px; font-weight:700; }
input,button{ margin:15px 0 0 0; line-height:14px; }
input{ height:15px; }
</style>
</head>
<body>
<div id="login">
<h4>用户登录</h4>
Username:<input name="username" />
    <br />
    Password:<input name="password" type="password" />
    <br />
    <button id="submit">Submit</button>
</div>
</body>
</html>

Post.js

代码如下:

$(document).ready(function(){
$("#submit").click(function(){
  $.post("http://localhost:2154/Web/Login.aspx",
  {
   username : $("input[name='username']").val(),
   password : $("input[name='password']").val()
  },
  function(data){
   $("#login").html(data);
  });
});
});

Login.aspx

代码如下:

<%@ Page Language="C#" %>
<span>欢迎你  <font color="red"><%= Request.Form["username"] %></font>
<br />
你的身份是  <font color="red">管理员</font>
<br />
  <button>修改资料</button>
  <button>注销登录</button>
</span>

7：$.getJSON()方法
var xmlReq = $.getJSON(url, [data], [callback]);

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getJSON.js"></script>
<style type="text/css">
body{ padding:20px; }
#peoples{ background:#999; border:solid 2px #333; width:300px; }
#peoples td{ padding:5px; }
#peoples thead{ background:#555; color:#FFF; font-weight:700; font-size:16px; }
#peoples tbody{ font-size:13px;background:#fff; }
</style>
</head>
<body>
<table id="peoples" cellspacing="1">
<thead>
<tr><td>Name</td><td>Age</td><td>Sex</td></tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

getJSON.js

代码如下:

$(document).ready(function(){
/* 异步请求，载入 JSON 数据 */
$.getJSON("http://localhost:2154/Web/PeopleList.aspx",
  function(data){
   /* 遍历请求结果 */
   $.each(data,
    function(index, p){
     var html = "<tr><td>" + p.name + "</td><td>" + p.age +
     "</td><td>" + (p.isMale ? "male" : "female") + "</td></tr>"
     $("#peoples>tbody").append(html);
    });
  });
});

PeopleList.aspx

代码如下:

<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
"isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
"age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35,
"isMale" : false
},{
"name" : "Elizabeth Jones",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith",
"age" : 25,
"isMale" : true
}]

8：$.getScript()方法
var xmlReq = $.getScript(url, [callback]);

代码如下:

getScript.js

代码如下:

$(document).ready(function(){
$("#input").click(function(){
  $.getScript("Test.js", function(data){
   showMsg();
  });
});
});

Test.js

代码如下:

function showMsg(){
alert("This is Message");
}

9：序列化表单数据
jQuery为了解决参数很多的问题，提供了序列化的方法简化对表单数据的收集和格式化。

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>serialize</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/serialize.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>
<body>
<table>
<tbody>
<form onsubmit="return false;" >
<tr><td>Username:</td><td><input name="username" /></td></tr>
<tr><td>Age:</td><td><input name="age" /></td></tr>
<tr><td>Sex:</td><td>
<select name="isMale">
    <option value="true">男</option>
        <option value="false">女</option>
    </select></td></tr>
<tr><td>Email:</td><td><input name="email" /></td></tr>
<tr><td>Details:</td><td><textarea name="details"></textarea></td></tr>
<tr><td></td><td><button name="btnSubmit">Submit</button></td></tr>
</form>
</tbody>
</table>
</body>
</html>

serialize.js

代码如下:

$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
  $.post("http://localhost:2154/Web/Register.aspx",
   $("form").serialize(), //序列化表单数据
   function(data){
    $("table tbody").append("<tr><td colspan=2>" + data + "</td></tr>");
   });
  });
});

Register.aspx

代码如下:

<%@ Page Language="C#" %>
Username:<%= Request["username"] %>
<br />
Age:<%= Request["age"] %>
<br />
IsMale:<%= Request["isMale"]%>
<br />
Email:<%= Request["email"]%>
<br />
Details:<%= Request["details"]%>

10：serializeArray()方法
该方法将页面表单序列化成一个JSON结构的对象，该对象以"键/值"对集合的形式封装了表单里的所有元素值。
这里注意的是该方法返回的是一个JSON对象，而不是JSON字符串
该JSON对象结构如下：

代码如下:

[
           {"name": "name1" , "value": "value1"},
           {"name": "name2" , "value": "value2"},
           {"name": "name3" , "value": "value3"}
       ]
     var jsonData = $("form").serializeArray();
     var textName = jsonData[0].name;
     var textValue = jsonData[0].value;

11：设置全局Ajax默认选项
在应用中，经常编写大量的Ajax方法来实现各种功能，每次都在$.ajax()方法中设置大量参数，非常不方便，jQuery提供了$.ajaxSetup()方法，可以设置
全局的Ajax默认参数项。
$.ajaxSetup([options]);

代码如下:

$.ajaxSetup({
     url: 'Test.html',
     type: 'POST',
     global: false, //禁止触发全局事件
     dataType: 'json',
     error: function(xhr, textStatus, errorThrown) {
           alert(textStatus);
      }
     });

12：jQuery全局事件
ajaxComplete(callback); //请求完成时触发该事件
ajaxError(callback); //请求出现错误时触发该事件
ajaxSend(callback); //请求发送前触发该事件
ajaxStart(callback); //请求开始时触发该事件
ajaxStop(callback); //请求结束时触发该事件
ajaxSuccess(callback); //请求成功时触发该事件
ajaxStart()方法和ajaxStop方法的事件处理程序是一个无参的函数，其余都可以有3个参数，语法格式如下：

代码如下:

function(event, XHR, settings) {
               event是触发的事件对象
               XHR是XMLHttpRequest对象
              settings是Ajax请求配置参数
         }

代码如下:

AjaxGlobalEvent.js

代码如下:

$(document).ready(function(){
$("#show").ajaxStart(function(){
$(this).append("<p>Run ajaxStart</p>");
});
$("#show").ajaxStop(function(){
$(this).append("<p>Run ajaxStop</p>");
});

$("#show").ajaxComplete(function(){
$(this).append("<p>Run ajaxComplete</p>");
});

$("#show").ajaxError(function(){
$(this).append("<p>Run ajaxError</p>");
});

$("#show").ajaxSend(function(){
$(this).append("<p>Run ajaxSend</p>");
});

$("#show").ajaxSuccess(function(){
$(this).append("<p>Run ajaxSuccess</p>");
});
$("button[name='btnLoad']").click(function(){
$.get("http://www.sohu.com");
});
});

JQuery AJAX 中文乱码问题解决

解决方案: 提交和接收均为utf-8或gbk编码对提交的数据调用JQuery函数encodeURI进行编码再提交或显示或链接既可 url = encodeURI(url); //url为数据. 注:注意浏览器和发布的项目的缓存问题,很多时候会影响解决. 记事本默认gbk编码
jQuery+php实现ajax文件即时上传的详解

很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像.本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息. HTML本示例基于jQuery以及相当出色的jquery.form插件,所以,先要载入jquery库和form插件.<script type="text/javascript" src="jquery.min.js"><
你的jquery ajax无效和你的jquery引入路径有关

Jquery不必多说,你能阅读到该篇文章,肯定知啊都jquery是js框架. 大家在做项目的时候肯定或多或少都需要用到ajax. 而如果用到jquery的ajax,那么就需要将jquery引入到jsp页面. 当你发现你的jquery ajax无效的时候,不妨使用 fire bug调试一下,这时你会发现,提示"$"无效,为什么会有这种提示呢?原因很简单,就是你引入jquery.js的路径有问题. 所以大家遇到此类问题的时候,首先要做的就是看看自己的jquery路径是不是有问题. jque
JQuery的AJAX实现文件下载的小例子

复制代码代码如下: var form=$("<form>");//定义一个form表单form.attr("style","display:none");form.attr("target","");form.attr("method","post");form.attr("action","exportData"
ajax.net +jquery 无刷新三级联动的实例代码

复制代码代码如下: <!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></titl
使用jquery实现简单的ajax

-->html页复制代码代码如下: <!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> <
jquery ajax同步异步的执行最终解决方案

大家先看一段简单的jquery ajax 返回值的js 代码复制代码代码如下: function getReturnAjax{ $.ajax({ type:"POST", http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx", data:"username="+vusername.value, success:function(msg){ if(msg=="ok"
jQuery之ajax技术的详细介绍

1:Ajax技术包含以下几点:基于Web标准(XHTML + CSS)的展示使用DOM进行动态显示和交互使用XMLHttpRequest进行数据交换和相关操作使用javascript将所有内容绑定在一起Ajax的核心是JavaScript的XMLHttpRequest对象,它是一种支持异步请求的技术.简而言之,使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应,而不影响用户对页面的正常访问.对于XMLHttpRequest对象,不同的浏览器提供了不同的支持,IE是将其作为
jquery和ajax的关系详细介绍

JQuery.AJAX都是Javascript的一个框架,各有各自不同的功能,如果把Javascript比作父亲的话,JQuery和AJAX就是Javascript的亲生儿子.在Javascript中非常复杂的功能,让他们实现起来是极其的方便快捷.下面来总结一下他们各自的功能及特点和应用的场合. JQuery是轻量级的js库,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+).jQuery使用户能更方便地处理HTML docum
php基于jquery的ajax技术传递json数据简单实例

本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi
Jquery的Ajax技术使用方法

Jquery的Ajax技术(重点) jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中经常使用的有三种: 1)$.get(url, [data], [callback], [type]) 2)$.post(url, [data], [callback], [type]) 区别:get有字节码乱码问题,post无字节码乱码问题(获取请求页面数据到后台,后台response.se
Tab页界面，用jQuery及Ajax技术实现

到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来.特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式. 网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用.实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据). 自己的开发的代码自己最清楚,用起
Tab页界面用jQuery及Ajax技术实现(php后台)

网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用.实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据). 自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕.代码如下,还在不断修改中. 代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
JQuery入门—JQuery程序的代码风格详细介绍

<jQuery权威指南>第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法:后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础.本节为大家介绍jQuery程序的代码风格. 1.1.5 jQuery程序的代码风格 1．"$"美元符的使用在jQuery程序
给artDialog 5.02 增加ajax get功能详细介绍

之前用过artDialog 5.0之前版本,非常佩服作者的创意和敬业精神,现在新版的功能朝着轻量级js的方便发展,我还是比较喜欢之前artDialog.open的功能,直接方便.但就是之前版本有点大,我现在只想在artDialog增加一点从ajax get远程内容,我的代码如下: 复制代码代码如下: $.extend({ _htmlDataArr:new Array(), _findHTML:function(url){ var hd_len= $._htmlDataArr.length; f
利用jQuery及AJAX技术定时更新GridView的某一列数据

看到一个问题:定时更新GridView的某一列中的状态文本.马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果. 具体实现: 准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新. getuserlist.xml 定义一个UserList的根节点,下边每个UserItem对应一条数据,UI
jQuery 数据缓存模块进化史详细介绍

数据缓存系统最早应该是jQuery1.2引入的,那时它的事件系统完成照搬DE大神的addEvent.js,而addEvent在实现有个缺憾,它把事件的回调都放到EventTarget之上,这会引发循环引用,如果EventTarget是window对象,又会引发全局污染.有了数据缓存系统,除了规避这两个风险外,我们还可以有效地保存不同方法产生的中间变量,而这些变量会对另一个模块的方法有用,解耦方法间的依赖.对于jQuery来说,它的事件克隆乃至后来的列队实现都是离不开缓存系统. jQuery1.2

jQuery之ajax技术的详细介绍

相关推荐

随机推荐