jQuery Ajax中的事件详细介绍,jqueryajax

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

jQuery学习之旅 Item10 ajax快餐

jQuery Ajax中的事件详细介绍,jqueryajax

Ajax会触发很多事件。
有两种事件,一种是局部事件,一种是全局事件:
局部事件:通过$.ajax来调用并且分配。
复制代码 代码如下:
$.ajax({
jQuery Ajax中的事件详细介绍,jqueryajax。    beforeSend: function(){
     // Handle the beforeSend event
    },
    complete: function(){
     // Handle the complete event
    }
    // …
});

全局事件,可以用bind来绑定,用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。
复制代码 代码如下:
$(“#loading”).bind(“ajaxSend”, function(){ //使用bind
    $(this).show();
}).ajaxComplete(function(){  //直接使用ajaxComplete
    $(this).hide();
});

当然,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false
复制代码 代码如下:
$.ajax({
   url: “test.html”,
   global: false,
   // …
 });

事件的顺序如下:

ajaxStart 全局事件
开始新的Ajax请求,并且此时没有其他ajax请求正在进行。
beforeSend 局部事件
当一个Ajax请求开始时触发。如果需要,你可以在这里设置XHR对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行success和error两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有Ajax正在进行中的时候,触发。

局部事件回调的参数在文档中写的很清楚了,这里就不累述了。

全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3个参数
event, XMLHttpRequest, ajaxOptions
第一个是事件,第二个是XHR对象,第三个参数最有用,是当时调用这个ajax的时候的参数。
对于ajaxError,还有第四个参数thrownError,只有当异常发生时才会被传递。
我们可以利用ajaxOptions来写一个全局的ajax事件。
比如
复制代码 代码如下:
$(“#msg”).beforeSend(function(e,xhr,o) {
    $(this).html(“正在请求”+o.url);
}).ajaxSuccess(function(e,xhr,o) {
    $(this).html(o.url+”请求成功”);
}).ajaxError(function(e,xhr,o) {
    $(this).html(o.url+”请求失败”);
});

对于这个例子,
这样我们就可以很方便的全局地在某个地方显示当前的ajax状态。
当然,之前说了,第三个参数实际上是传递给ajax的参数。get/post/load/getScript/getJSON等方法本质上都是调用ajax方法的,所以ajaxOptions.url属性总是有效的。

还有更丰富的例子。
如果你用ajax调用,还可以传递自定义参数。下面的例子我就自定义了一个msg参数给了ajax调用
复制代码 代码如下:
//自定义参数msg
$.ajax({url:”test1.html”,type:”get”,msg:”页面一”});
$.ajax({url:”test2.html”,type:”get”,msg:”页面二”});
$.ajax({url:”test3.html”,type:”get”,msg:”页面三”});
$.ajax({url:”test4.html”,type:”get”,msg:”页面四”});
 
//这里就能获取到自定义参数msg。
//这可以用来区别对待不同的ajax请求。
$(“#msg”).beforeSend(function(e,xhr,o) {
    $(this).html(“正在请求”+o.msg);
}).ajaxSuccess(function(e,xhr,o) {
    $(this).html(o.msg+”请求成功”);
}).ajaxError(function(e,xhr,o) {
    $(this).html(o.msg+”请求失败”);
});

最后对于load方法,还有话说。

其他的简易ajax方法,比如get,post,getJSON等,他们的回调函数都是设置了success回调。

而只有load设置的其实是complete回调。

所以,load里设置的回调函数的参数应该有2个。

XMLHttpRequest和textStatus
但实际上也并非如此。
load的回调有三个参数
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
所以,你可以在load的回调里
通过textStatus==”success”或者textStatus==”error”来判断是否调用成功。
或者用XMLHttpRequest.status属性判断是200还是404或者其他的。

这点上,我认为比普通的get/post等方法更先进。如果要单数设置每get的error是不可能的。但是设置一个全局的ajaxError其实也是不错的选择。

Ajax中的事件详细介绍,jqueryajax
Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件:
局部事件:通过$.ajax来调用并…

XMLHttpRequest对象的属性及简要说明

1. 摘要

本系列文章将带您进入jQuery的精彩世界,
其中有很多作者具体的使用经验和解决方案,
即使你会使用jQuery也能在阅读中发现些许秘籍.
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.

名称

2. 前言

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课.
虽然Ajax技术并不复杂,
但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异,
并且让调用Ajax更加简单.

说明

3. 原始Ajax与jQuery中的Ajax

首先通过实例, 来看一下jQuery实现Ajax有多简单.
下面是一个使用原始Ajax的示例:

<script type=text/javascript> $(function() { var xhr = new
AjaxXmlHttpRequest(); $(#btnAjaxOld).click(function(event) { var xhr =
new AjaxXmlHttpRequest(); xhr.onreadystatechange = function() { if
(xhr.readyState == 4) { document.getElementById(divResult).innerHTML =
xhr.responseText; } } xhr.open(GET,
data/AjaxGetCityInfo.aspx?resultType=html, true); xhr.send(null); }); })
//跨浏览器获取XmlHttpRequest对象 function AjaxXmlHttpRequest() { var
xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new
XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new
ActiveXObject(Msxml2.XMLHTTP); } catch (e) { try { xmlHttp = new
ActiveXObject(Microsoft.XMLHTTP); } catch (e) {
alert(您的浏览器不支持AJAX!); return false; } } } return xmlHttp; }
</script>原始Ajax调用

 

上面的实例中, data/AjaxGetCityInfo.aspx?resultType=html
地址会返回一段HTML代码.

使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象,
判断请求状态, 编写回调函数等.

而用jQuery的Load方法, 只需要一句话:

$(#divResult).load(data/AjaxGetCityInfo.aspx, { resultType: html });

曾经我是一个原始Ajax的绝对拥护者, 甚至摒弃微软的Asp.net Ajax,
因为我想要最高的代码灵活度. 使用原始Ajax让我感觉完成自己的工作更加轻松,
即使多写了一些代码. 但是当我去翻看别人的Ajax代码并且尝试修改的时候,
我改变了我的看法——我们的代码到处分布着创建XmlHttpRequest方法的函数,
或者某些Ajax程序逻辑性和结构性很差, 很难看懂.

我们可以将通用方法放到一个js文件中, 然后告诉大家”嘿伙伴们,
都来用这个js中的方法”.
但是在某些时候有些新来的外包人员并不知道有这个js文件的存在.
而且其实这个通用的js就是一个公共的脚本类库,
我相信没有人会觉得自己开发一个类库会比jQuery更好!

所以我放弃了制造轮子的计划,
大家都使用jQuery编写Ajax相关的方法就可以解决各种差异性问题,
并且让工作更有效率.

现在只是用jQuery的Ajax函数, 我的页面变得简洁了:

<script type=text/javascript
src=scripts/jquery-1.3.2-vsdoc2.js></script><script
type=text/javascript> $(function() {
$(#btnGetHtml).click(function(event) {
$(#divResult).load(data/AjaxGetCityInfo.aspx, { resultType: html });
}); }) </script>使用jQuery的load方法

 

readyState

4. jQuery Ajax详解

jQuery提供了几个用于发送Ajax请求的函数.
其中最核心也是最复杂的是jQuery.ajax( options ),所有的其他Ajax函数都是它的一个简化调用.
当我们想要完全控制Ajax时可以使用此结果, 否则还是使用简化方法如get, post,
load等更加方便. 所以jQuery.ajax( options ) 方法放到最后一个介绍.
先来介绍最简单的load方法:

1. load( url, [data], [callback] )

Returns: jQuery包装集

说明:

load方法能够载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式,
如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST
方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM
中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”,
默认的选择器是”body>*”.

讲解:

load是最简单的Ajax函数, 但是使用具有局限性:
它主要用于直接返回HTML的Ajax接口
load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,
即使设置了回调函数也还是会加载.
不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

<script type=text/javascript
src=../scripts/jquery-1.3.2-vsdoc2.js></script><script
type=text/javascript> $(function() {
$(#btnAjaxGet).click(function(event) { //发送Get请求
$(#divResult).load(../data/AjaxGetMethod.aspx?param=btnAjaxGet_click +
&tim estamp= + (new Date()).getTime()); });
$(#btnAjaxPost).click(function(event) { //发送Post请求
$(#divResult).load(../data/AjaxGetMethod.aspx, { param:
btnAjaxPost_click }); }); $(#btnAjaxCallBack).click(function(event) {
//发送Post请求, 返回后执行回调函数.
$(#divResult).load(../data/AjaxGetMethod.aspx, { param:
btnAjaxCallBack_click }, function(responseText, textStatus,
XMLHttpRequest) { responseText = Add in the CallBack Function!

  • responseText $(#divResult).html(responseText); //或者:
    $(this).html(responseText); }); });
    $(#btnAjaxFiltHtml).click(function(event) { //发送Get请求,
    从结果中过滤掉 鞍山 这一项
    $(#divResult).load(../data/AjaxGetCityInfo.aspx?resultType=html +
    &timestamp = + (new Date()).getTime() +
    ul>li:not(:contains(‘鞍山’))); }); })
    </script>使用Load执行Get请求 使用Load执行Post请求 使用带有回调函数的Load方法 使用selector过滤返回的HTML内容

 

上面的示例演示了如何使用Load方法.

提示:

我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net
Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.
当在url参数后面添加了一个空格, 比如” “的时候,
会出现”无法识别符号”的错误, 请求还是能正常发送. 但是无法加载HTML到DOM.
删除后问题解决.

2.jQuery.get( url, [data], [callback], [type] )

Returns: XMLHttpRequest

说明:

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

讲解:

此函数发送Get请求, 参数可以直接在url中拼接, 比如:

$.get(../data/AjaxGetMethod.aspx?param=btnAjaxGet_click);

或者通过data参数传递:

$.get(../data/AjaxGetMethod.aspx, { param: btnAjaxGet2_click });

两种方式效果相同, data参数会自动添加到请求的url中,如果url中的某个参数,
又通过data参数传递, 不会自动合并相同名称的参数.

回调函数的签名如下:

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc
  this; // the options for this ajax request
}

其中data是返回的数据, testStatus表示状态码,
可能是如下值:在回调函数中的this是获取options对象的引用
type参数是指data数据的类型, 可能是下面的值:
“xml”, “html”, “script”, “json”, “jsonp”, “text”.默认为”html”.

jQuery.getJSON( url, [data], [callback] ) 方法就相当于
jQuery.get(url, [data],[callback], “json”)

3. jQuery.getJSON( url, [data], [callback] )

Returns: XMLHttpRequest

相当于: jQuery.get(url, [data],[callback], “json”)

说明:

通过 HTTP GET 请求载入 JSON 数据。 在 jQuery 1.2 中,您可以通过使用JSONP
形式的回调函数来加载其他网域的JSON数据,如 “myurl?callback=?”。jQuery
将自动替换 ? 为正确的函数名,以执行回调函数。
注意:此行以后的代码将在这个回调函数执行前执行。

讲解:

getJSON函数仅仅将get函数的type参数设置为”JSON”而已.
在回调函数中获取的数据已经是按照JSON格式解析后的对象了:

$.getJSON(../data/AjaxGetCityInfo.aspx, { resultType: json }, function(data, textStatus)
{
      alert(data.length);
      alert(data[0].CityName);
});

服务器端返回的字符串如下:

[{pkid:0997,ProvinceId:XJ,CityName:阿克苏,CityNameEn:Akesu,PostCode:843000,isHotCity:false},
 {pkid:0412,ProvinceId:LN,CityName:鞍山,CityNameEn:Anshan,PostCode:114000,isHotCity:false}]

示例中我返回的饿是一个数组, 使用data.length可以获取数组的元素个数,
data[0]访问第一个元素, data[0].CityName访问第一个元素的CityName属性.

4. jQuery.getScript( url, [callback] )

Returns: XMLHttpRequest

相当于: jQuery.get(url, null, [callback], “script”)

说明:

通过 HTTP GET 请求载入并执行一个 JavaScript 文件。 jQuery 1.2
版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用
JavaScript 文件。

讲解:

以前我使用dojo类库时官方默认的文件不支持跨域最后导致我放弃使用dojo(虽然在网上找到了可以跨域的版本,
但是感觉不够完美). 所以我特别对这个函数的核心实现和使用做了研究.
首先了解此函数的jQuery内部实现, 仍然使用get函数,
jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax(),
getScript将传入值为”script”的type参数,
最后在Ajax函数中对type为script的请求做了如下处理:

var head = document.getElementsByTagName(head)[0];            
var script = document.createElement(script);
script.src = s.url;

上面的代码动态建立了一个script语句块, 并且将其加入到head中:

head.appendChild(script);

当脚本加载完毕后, 再从head中删除:

      // Handle Script loading
            if ( !jsonp ) {
                var done = false;

                // Attach handlers for all browsers
                script.onload = script.onreadystatechange = function(){
                    if ( !done && (!this.readyState ||
                            this.readyState == loaded || this.readyState == complete) ) {
                        done = true;
                        success();
                        complete();

                        // Handle memory leak in IE
                        script.onload = script.onreadystatechange = null;
                        head.removeChild( script );
                    }
                };
            }

我主要测试了此函数的跨域访问和多浏览器支持.下面是结果:

图片 1

下面是我关键的测试语句, 也用来演示如何使用getScript函数:

$(#btnAjaxGetJSON).click(function(event)
            {
                $.getScript(../scripts/getScript.js, function(data, textStatus)
                {
                    alert(data);
                    alert(textStatus);
                    alert(this.url);
                });
            });

            $(#btnAjaxGetJSONXSS).click(function(event)
            {
                $.getScript(http://resource.elong.com/getScript.js, function(data, textStatus)
                {
                    alert(data);
                    alert(textStatus);
                    alert(this.url);
                });
            });

5. jQuery.post( url, [data], [callback], [type] )

Returns: XMLHttpRequest

说明:

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

讲解:

具体用法和get相同, 只是提交方式由”GET”改为”POST”.

6. jQuery.ajax( options )

Returns: XMLHttpRequest

说明:

通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见
$.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest
对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。

jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为
JSONP。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery
将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 “jsonp”
时,jQuery 将自动调用回调函数。

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

5、Ajax相关函数.

jQuery提供了一些相关函数能够辅助Ajax函数.

1. jQuery.ajaxSetup( options )
无返回值

说明:

设置全局 AJAX 默认options选项。

讲解:

有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项,
此后所有的Ajax请求的默认options将被更改.

比如,设置 AJAX 请求默认地址为 “/xmlhttp/”,禁止触发全局 AJAX 事件,用
POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数:

$.ajaxSetup({
  url: /xmlhttp/,
  global: false,
  type: POST
});
$.ajax({ data: myData });

2. serialize( )

Returns: String

说明:

序列表表格内容为字符串,用于 Ajax 请求。
序列化最常用在将表单数据发送到服务器端时. 被序列化后的数据是标准格式,
可以被几乎所有的而服务器端支持. 为了尽可能正常工作,
要求被序列化的表单字段都有name属性, 只有一个eid是无法工作的.

像这样写name属性:

讲解:

serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串.
便于我们使用Ajax发送时获取表单数据. 这和一个From按照Get方式提交时,
自动将表单对象的名/值放到url上提交差不多.
比如这样一个表单:

图片 2

生成的字符串为:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1

3. serializeArray( )

Returns: Array

说明:

序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。
注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

讲解:

看说明文档让我有所失望, 使用此函数获取到的是JSON对象,
但是jQuery中没有提供将JSON对象转化为JSON字符串的方法.
在JSON官网上没有找到合适的JSON编译器,
最后选用了jquery.json这个jQuery插件:

使用起来异常简单:

var thing = {plugin: 'jquery-json', version: 1.3};
var encoded = $.toJSON(thing);              //'{plugin: jquery-json, version: 1.3}'
var name = $.evalJSON(encoded).plugin;      //jquery-json
var version = $.evalJSON(encoded).version;  // 1.3

使用serializeArray( ) 再配合 $.toJSON 方法,
我们可以很方便的获取表单对象的JSON, 并且转换为JSON字符串:

$(#results).html( $.toJSON( $(form).serializeArray() ));

结果为:

[{name: single, value: Single}, {name: param, value: Multiple}, {name: param
, value: Multiple3}, {name: check, value: check2}, {name: radio, value: radio1}]

onreadystatechange

6、全局Ajax事件

在jQuery.ajaxSetup( options ) 中的options参数属性中,
有一个global属性:global 值类型:布尔值, 默认值: true,

说明:
是否触发全局的Ajax事件.
这个属性用来设置是否触发全局的Ajax事件.
全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:

第一列 第二列
ajaxComplete( callback ) AJAX 请求完成时执行函数
ajaxError( callback ) AJAX 请求发生错误时执行函数
ajaxSend( callback ) AJAX请求发送前执行函数
ajaxStart( callback ) AJAX请求开始时执行函数
ajaxStop( callback ) AJAX请求结束时执行函数
ajaxSuccess( callback ) AJAX 请求成功时执行函数

用一个示例讲解各个事件的触发顺序:

<script type=text/javascript
src=../scripts/jquery-1.3.2.min.js></script><script
type=text/javascript> $(document).ready(function() {
$(#btnAjax).bind(click, function(event) {
$.get(../data/AjaxGetMethod.aspx); })
$(#divResult).ajaxComplete(function(evt, request, settings) {
$(this).append(‘

ajaxComplete

‘); }) $(#divResult).ajaxError(function(evt, request, settings) {
$(this).append(‘

ajaxError

‘); }) $(#divResult).ajaxSend(function(evt, request, settings) {
$(this).append(‘

ajaxSend

‘); }) $(#divResult).ajaxStart(function() { $(this).append(‘

ajaxStart

‘); }) $(#divResult).ajaxStop(function() { $(this).append(‘

ajaxStop

‘); }) $(#divResult).ajaxSuccess(function(evt, request, settings) {
$(this).append(‘

ajaxSuccess

‘); }) }); </script>
发送Ajax请求

 

结果如图:

图片 3

我们可以通过将默认options的global属性设置为false来取消全局Ajax事件的触发.

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

7. 注意事项

如果在Get请求发送的url中有两个同名参数, 比如两个param参数:

使用服务器端方法获取param参数:

if (!String.IsNullOrEmpty(HttpContext.Current.Request[Param]))
        {
            param = HttpContext.Current.Request[Param];
        }

此时获取到得param是一个用”,”分隔多个值的字符串:
Multiple,Multiple3

responseText

8. 总结

本文介绍如何使用jquery实现Ajax功能. 用于发送Ajax请求的相关函数如load,
get, getJSON和post这些渐变Ajax方法, 对于核心的ajax 方法没有过多介绍,
主要是通过配置复杂的参数实现完全控制Ajax请求.
另外讲解了ajax的辅助函数比如用于序列化表单对象为字符串的serialize()方法,
用于将表单对象序列化为JSON对象的serializeArray()方法.
这些在使用脚本获取数据实现与服务器端交互是很有用,
JSON格式的数据在处理大对象编程时将我们从混乱的属性字符串中解放出来.

jQuery还提供录入全局ajax事件这一个特殊的事件,
并且可以在一个对象上设置这些事件,
在发送Ajax请求的各个生命周期上会调用这些事件,
可以通过修改默认的options对象的global属性打开或关闭全局事件.

Item10 ajax快餐 1. 摘要
本系列文章将带您进入jQuery的精彩世界,
其中有很多作者具体的使用经验和解决方案, 即使你会使用jQu…

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

responseXML

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

status

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

statusText

HTTP响应的状态代码对应的文本

readyState属性代码

代码

说明

0

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

1

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

2

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

3

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

4

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

复制代码 代码如下:

Ajax

ajax.js的内容:复制代码 代码如下:var
xmlRequest;function CreateRequest(){/* 创建XMLHttpRequest对象
*/if{return new ActiveXObject;}else if(window.XMLHttpRequest){return
new XMLHttpRequest();}}function
ResponseHandler(){if(xmlRequest.readyState == 4 && xmlRequest.status ==
200){/* 如果通信成功,并且响应正常,执行以下操作 */var reqContent =
xmlRequest.responseText;document.getElementById.innerHTML =
reqContent;document.getElementById.value = reqContent;}}function
AjaxAccess(){/* 异步请求百度首页 */xmlRequest = CreateRequest();
//创建XMLHttpRequest对象xmlRequest.onreadystatechange = ResponseHandler;
//设置回调函数xmlRequest.open(“GET”,””);
//初始化请求对象xmlRequest.send; //发送请求信息/*
触发事件以后提示正在打开百度首页 */var brow =
document.getElementById;brow.innerHTML = “

正在打开百度搜索

“;}window.onload = function(){document.getElementById.onclick =
AjaxAccess;
//设置按扭单击事件}3:jQuery中的Ajax$.ajax方法options是以“键/值”对的形式设置的,用于设置Ajax请求的参数,如请求方式、请求URL、回调函数等。常用属性如下:url:
发送请求的地址type:请求方式,GET和POST,默认为GETtimeout:
设置请求超时时间,该属性为数值型,单位为毫秒data:
发送到服务器的数据,“键/值”对形式,该属性可以是对象或者字符串,如果是对象,则自动转换为字符串dataType:
预期服务器返回的数据类型,该属性为字符串类型。可选值如下:
xml、html:返回纯文本HTML信息,包含的标签会在文本插入DOM的时候执行、
script:返回纯文本JS代码、json、jsonp、textcontentType:
发送信息至服务器时内容编码类型,该属性为字符串类型,默认值为”application/x-www-form-urlencoded”,一般不用设置,因为默认值适合大多数应用场合beforeSend:
请求发送前的事件,该属性为其设置事件处理程序,可用于发送前修改XMLHttpRequest的参数,如头信息。复制代码 代码如下:function {this;
/*这里this关键字用于访问.ajax()方法的options参数对象*/ } complete:
请求完成后的事件,无论请求成功与否,都将触发该事件。function(XMLHttpRequet,
textStatus) {this;
/*这里this关键字用于访问.ajax()方法的options参数对象*/
}textStatus参数返回当前请求的执行状态success:
请求执行成功时的事件。function {this;
/*这里this关键字用于访问.ajax()方法的options参数对象*/ } error:
请求执行失败时的事件function(XMLHttpRequest, textStatus, errorThrown)
{this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}global:
是否触发全局Ajax事件,该属性为Boolean类型,默认值为false复制代码 代码如下:$.ready{$.click{var xmlReq =
$.ajax({type:’GET’,url:’
load(url, [data], [callback]);复制代码 代码如下:

Load

回复列表

Load.js 复制代码
代码如下:$.ready{$.click{/* 要访问的页面URL,根据你实际情况做相应修改
*/var url =
” 代码如下: var xmlReq = $.get(url,
[data], [callback], [type]); $.get(“www.baidu.com”, { user:
‘zhangsan’ } ); callback: function {}复制代码 代码如下:

Get

分类:所有CSS.NET

Get.js复制代码
代码如下:$.ready{$.click{/* 使用Get方式请求指定URL
*/$.get(” :
$},function.html;$; //触发一次单击事件});BlogList.aspx复制代码 代码如下:

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

Post

用户登录

Username:
Password:

Submit

Post.js 复制代码
代码如下:$.ready{$.click{$.post(”
: $(“input[name=’username’]”).val(),password :
$(“input[name=’password’]”).val{$;});});});Login.aspx 复制代码 代码如下:欢迎你
你的身份是管理员

修改资料

注销登录

7:$.getJSON()方法var xmlReq = $.getJSON(url, [data],
[callback]);复制代码 代码如下:

getJSON

Name

Age

Sex

getJSON.js 复制代码
代码如下:$.ready{/* 异步请求,载入 JSON 数据 */
$.getJSON(”
遍历请求结果 */$.each(data,function{var html = “

” + p.name + “

” + p.age + “

” + (p.isMale ? “male” : “female”) + “

“$.append;PeopleList.aspx 复制代码
代码如下:[{“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;复制代码 代码如下:

getScript

使用getScript()方法异步加载JavaScript文件

getScript.js 复制代码
代码如下:$.ready{$.click{$.getScript(“Test.js”, function;});Test.js
复制代码 代码如下:function
showMsg(){alert;}9:序列化表单数据jQuery为了解决参数很多的问题,提供了序列化的方法简化对表单数据的收集和格式化。复制代码 代码如下:

serialize

serialize.js 复制代码
代码如下:$.ready{$(“button[name=’btnSubmit’]”).click{$.post(“,
//序列化表单数据function{$.append(“

” + data + “

“);});});});Register.aspx 复制代码
代码如下:Username:
Age:
IsMale:
Email:
Details:10:serializeArray()方法该方法将页面表单序列化成一个JSON结构的对象,该对象以”键/值”对集合的形式封装了表单里的所有元素值。这里注意的是该方法返回的是一个JSON对象,而不是JSON字符串该JSON对象结构如下:复制代码 代码如下: [ {“name”: “name1” ,
“value”: “value1”}, {“name”: “name2” , “value”: “value2”}, {“name”:
“name3” , “value”: “value3”} ] var jsonData = $.serializeArray(); var
textName = jsonData[0].name; var textValue =
jsonData[0].value;11:设置全局Ajax默认选项在应用中,经常编写大量的Ajax方法来实现各种功能,每次都在$.ajax()方法中设置大量参数,非常不方便,jQuery提供了$.ajaxSetup()方法,可以设置全局的Ajax默认参数项。$.ajaxSetup;复制代码 代码如下:$.ajaxSetup({ url:
‘Test.html’, type: ‘POST’, global: false, //禁止触发全局事件 dataType:
‘json’, error: function(xhr, textStatus, errorThrown) {
alert;12:jQuery全局事件ajaxComplete;
//请求完成时触发该事件ajaxError; //请求出现错误时触发该事件ajaxSend;
//请求发送前触发该事件ajaxStart; //请求开始时触发该事件ajaxStop;
//请求结束时触发该事件ajaxSuccess;
//请求成功时触发该事件ajaxStart()方法和ajaxStop方法的事件处理程序是一个无参的函数,其余都可以有3个参数,语法格式如下:复制代码 代码如下: function {
event是触发的事件对象 XHR是XMLHttpRequest对象 settings是Ajax请求配置参数
}复制代码 代码如下:

AjaxGlobalEvent

Load

AjaxGlobalEvent.js 复制代码
代码如下:$.ready.ajaxStart.append(“

Run ajaxStart

“);});$.ajaxStop.append(“

Run ajaxStop

“);});$.ajaxComplete.append(“

Run ajaxComplete

“);});$.ajaxError.append(“

Run ajaxError

“);});$.ajaxSend.append(“

Run ajaxSend

“);});$.ajaxSuccess.append(“

Run ajaxSuccess

“);});$(“button[name=’btnLoad’]”).click{$.get(“);

网站地图xml地图