维斯李

jQuery中的Ajax

一、Ajax介绍

  1.什么是Ajax

   异步的JavascriptXML技术(可简单理解为 无刷新的数据更新)

  2.Ajax原理:

    -->运用XHTML+CSS表达信息

  -->运用JS操作DOM运行动态效果

   -->运用XMLXSLT进行数据交换及操作

   --》运用XMLHttpRequestAgent与网页服务器进行异步数据交换

   --》运用JS实现

  3.Ajax优点:

    (1)不需要任何浏览器插件,在任何支持JavaScript的浏览器上运行

    (2)优秀的用户体验(在不更新整个页面的前提下维护数据)

    (3)提高了Web性能(通过XMLHttpRequest对象向服务器端提交希望提交的数据)

    (4)减轻服务器和带宽的负担;把传统方式下的一些服务器负担的工作转移到了客户端

  4.Ajax缺点:

    (1).可能破坏浏览器后退按钮的正常行为

    (2)对搜索引擎的支持不足

    (3)开发和调试工具的缺乏

    (4)手持设备支持性差

  补充:

    (1)W3C标准(站点标准):

  网页主要有三部分组成:结构、表现和行为。

  对应的标准也分三方面:结构化标准语言(XHTMLXML)、表现标准语言(CSS)、行为标准主要包括对象模型(如W3C DOMECMAScript)。

  异步请求:局部请求,局部刷新;将请求给后台处理,但程序不等待处理结果而继续运行, 程序不等待响应,在运行时也能接收响应。

  5.XMLHttpRequest对象

 Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键。Ajax利用它来发送异步请求、接收响应及执行回调。

 XMLHttpRequest对象的属性:

    (1)Readystate

   HTTP请求状态,当一个XMLHttpRequest初次建立时,这个属性的值从0开始,直到接收到完整的HTTP响应,这个值增加到4

               状态、名称和含义

状态

名称

描述

0

Uninitialized

初始化状态。XMLHttpRequest对象已创建或已被abort()方法重置

1

Open

Open()方法已调用,但send()方法为调用。请求还没有被发送

2

Send

Send()方法已调用,HTTP请求已发送到Web服务器。未接收到响应

3

Receiving

所有响应头都已就收到。响应体开始接收但未完成

4

Loaded

HTTP响应已完全接收

  ReadyState的值不会递减,除非当一个请求在处理过程中时调用了abort()open()方法。

    (2)responseText

  从服务器接收到的响应体(不包括头部),如果还没有接收到数据,就是空字符串。

  当readyState小于3,这个属性就是一个空字符串;等于3,这个属性返回目前已经接收的响应部分;等于4,这个属性保存了完整的响应体。

    (3)responseXML

  对请求的响应,解析为XML并作为Document对象返回。

    (4)Status

  由服务器返回的HTTP状态码,如200表示成功;404表示“Not Found”错误。当readystate小于3时读取这个属性会导致一个异常。

    (5)statusText

  此属性用名称而不是数字指定了请求的HTTP状态码。200---OK”,404---Not Found”。

  XMLHttpRequest对象的方法:

    (1)abort()

  取消当前响应,关闭连接并结束任何未完成的网络活动。Abort()方法把XMLHttpRequest对象的readyState属性重置为0的状态且取消所有未决的网络活动。如:请求用了太长时间,  且响应不在必要的时候,可调用此方法。

    (2)getAllResponseHeaders()

  把HTTP响应头部作为未解析的字符串返回。如果readyState小于3,这个方法返回null。否则(作为单个字符串)返回服务器发送的所有HTTP响应的头部。

    (3)getResponseHeader()

  返回指定的HTTP响应头部的值 

    (4)open()

  Open(method,url,async,username,password)

  初始化HTTP请求参数;行为:保存供send()方法使用的请求参数,及重置XMLHttpRequest对象以复用。

    (5)send()

  Send(body)

  发送HTTP请求,使用传递给open()方法的参数,及传递给该方法的可选请求体。

    (6)setRequestHeader()

  SetRequestHeader(name,value)

  Name:要设置的头部名称。这个参数不应该包括空白、冒号或换行。

  Value:头部的值。这个参数不应该包括换行。

  向一个打开但未发送的请求设置或添加一个HTTP请求

  XMLHttpRequest对象的事件句柄:

    (1)Onreadystatechange

  ReadyState属性改变的时候调用的事件句柄函数。当readyState3时,它可能被调用多次。

  6.JavaScript Ajax示例

    1)先声明一个异步请求对象

  //声明一个空对象用来装入XMLHttpRequest

  Var xmlHttpRequest=null;

    2) 给对象赋值,要考虑浏览器的兼容性

  //IE5IE6是以ActiveXObject的方式引入XMLHttpRequest

  If(window.ActiveXObject)

  {

  xmlHttpReq=new ActiveXObject(“Microsoft.XMLHTTP”);

  //IE5 IE6以外的浏览器XMLHttpRequestwindow的子对象

  }else if(window.XMLHttpRequest)

  {

  //实例化一个XMLHttpRequest

  xmlHttpReq=new XMLHttpRequest();

  }

    3)调用open()方法,指定异步请求的url

  //如果对象实例化成功

  If(xmlHttpReq!=null)

  {

  //调用open()方法并采用异步方式

  xmlHttpReq.open(“GET”,”FirstHandler.ashx”,true);

  调用send()方法,向服务器发送异步请求

  xmlHttpReq.send(null);

  xmlHttpReq.onreadystatechange=doResult;//设置回调函数

  }

  //回调函数

  //一旦readystate值改变,将会调用这个函数,readystate=4表示完成响应

  function doResult(){

  if(xmlHttpReq.readyState==4)

  {

  If(xmlHttpReq.status==200)

  {

  //xmlHttpReq.responseText的值赋给IDresText的元素

  document.getElementById(“resText”).innerHTML=xmlHttpReq.responseText;

  }

  }

  }

 

二、jQuery中的Ajax

   jQueryAjax操作进行了封装,在jQuery$.ajax()方法属于最底层的方法,第2层是load()$.get(),3层是$.getScript()$.getJSON()方法。

  1.load()方法

  通常用来载入远程HTML代码并将加载的HTML代码插入DOM中。语法如下:

  load(url[data][callback]);

  参数说明:

    url:表示请求的HTML页面的url

   data(可选);发送到服务器端的Key/value数据(一般是json格式),为object类型

   callback(可选):请求完成(无论成功或失败)时的回调函数

    1)load()加载指定的HTML文件,代码如下:

  $(function()

  {

    $("#btnload").click(function(){ //id为btnload按钮的点击事件

    $("#divComment").load("Comment.html");   //id为divComment的DIV的load事件
  })
  });
<body>
  

<div id="comment" >


        <ul>


            <li>留言:<a href="#">李四</a></li>


            <div>你好!</div>


            <li>留言:<a href="#">王五</a></li>


            <div>你在哪儿呢?</div>


            <li>留言:<a href="#">李四</a></li>


            <div class="selLoad">哈哈,不错,很精彩</div>


        </ul>


    </div>


</body>

 

    2)load()还可以筛选载入文档的HTML文档,用法是:load(url selector):

  

$(function()

          {

              $("#btnLoad").click(function()

              {

                 $("#divComment").load("Comment.html .selLad")

              });

          })

 

 

 

    3)传递方式

  Load()方法的传递方式根据参数data来自动指定

  无参数传递,get方式

  $(“#divComment”).load(“Comment.aspx”,function(){});

  有参数传递,post方式

  $(“#divComment”).load(“Comment.html”,{name:”Golsing”,age:”30”},function(){});

    4) 回调参数.

  

$("#divComment").load("Comment.html",function(responseText,textStatus,XMLHttpRequest)

            {

                alter($(this).html());//this指的是当前的DOM对象

                alter(responseText);  //请求返回的内容

                alter(textStatus);  //请求状态:success,error

                alter(XMLHttpRequest); //XMLHttpRequest对象

            });

 

 

  2.jQuery.get()方法和jQuery.post()方法

  $.get()$.post()方法是jquery中的全局函数.

      (1).jquery.get()方法

  $.get()方法使用get方式来进行异步请求,语法结构:

  $.get(url,[data],[callback],[type]);

  url:待载入页面的url地址

  data: (可选)待发送Key/value参数

  callback : (可选)载入成功时回调函数

  type: (可选)返回内容格式,xml,html,script,json,default.

    (2)jQuery.post()方法

  $.post()方法通过远程HTTP POST 请求爱如信息,语法结构同$.get();

 

  补充:GET提交方式和POST提交方式的区别:

  get请求会将参数跟在URL后进行传递,post请求则是作为HTTP消息的实体内容发送给服务器

  get方式对传输的数据有大小限制(通常不大于2KB),post传递方式在理论上不受先制

  get方式请求的数据会被浏览器缓存,如帐号.密码等.不安全性.post方式相对来说安全性要高.

  在ASP.NET,get方式传递的数据用request.QueryString获取,postRequest.Form获取,两种传递方式也都可以用Request.Params来获取

 

  3.jQuery.getScript()方法

  通过HTTP Get请求载入并执行一个JavaScript文件

    $.getScript(url,callback)

  -->待载入js文件地址

    $.getScript(“test.js”,function({}));

  4.jQuery.getJSON()方法

    $.getJSON()方法用于加载JSON文件,使用方法和getScript()方法相同.

 

  三 jQuery.ajax()方法

    $.ajax()常用参数:

 

参数名称

参数类型

参数说明

url

String

发送请求的地址

Type

String 

请求方式(get post),默认为“get;putdelete也可使用仅部分浏览器支持

Timeout

Number

设置请求超时时间(毫秒)。将覆盖全局设置

Data

Object,string

发送到服务器的数据,将自动转换为请求字符串格式

DataType

string

预期服务器返回的数据类型,如果是json就会转换成一个JavaScript对象

beforeSend(XHR)

function

发送请求前可修改XMLHttpRequest对象的函数,是一个Ajax事件

Success

Function

请求成功后的回调函数

Error

Function

请求失败时调用

Complete

Function

请求完成后回调函数,参数:XMLHttpRequest对象和一个描述成功请求类型的字符串

Async

boolean

默认设置下,所有请求均为异步请求,如要设为同步,将选项设为flase

cache

boolean

默认:true,dataTypescriptjson时默认为flase,设置为flase将不缓存页面

  dataType类型:

    xml:返回xml文档,可用jQuery处理

    html:返回纯文本HTML信息;包含的script标签在插入dom时执行

    script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了“cache”参数。

  注意:

  在远程请求时(不在同一个域下),所有post请求都将转为get请求。(因为将使用DOMscript标签来加载)

  --》“json”返回json数据。

  --》“jsonp:jsonp格式。使用jsonp形式调用函数时,如“myurl?callback=?” jquery将自动替换?为正确的函数名,以执行回调函数。

  --》“text:返回纯文本字符串

   

$.ajax({

                url:"test.html",

                cache:false,

                success:function(html){

                    $("#result").append(html);

                }

            });

 

  2.序列化元素

    当我们用Ajax提交少量的数据时,可以将字段的值逐个添加到data参数中。

   

$("#btnSubmit").click(function()

            {

                $.get("MessageHandler.ashx",

                        {

                            //json格式传递的参数,服务器端用QueryString获取

                            username:$("#txtUserName").val(),

                            contact:$("#txtContact").val(),

                            message:$("#txtMessage").val()

                        },

                        //回调函数,data成功后服务器端返回的数据,格式是xml,json,html等

                        function(data,textStatus)

                        {

                            $("#divContact").append(data);//把返回的数据追加到div中

                            //textStatus参数(可省)为请求状态:success,error,notmodified,timeout等四种状态

                            alter(textStatus);

                        }

                )

            });

 

    (1).serialize()方法

  当要提交大量数据时,为了简便操作可使用serialize()方法

  

  $("#btnSubmit").click(function()

           {

               $.get("MessageHandler.ashx",

               //json格式传递的参数,服务器用QueryString获取

                    $("#form1").serialize(),

                 //回调函数,data成功后服务端返回数据,格式是xml,json,html等

                    function(data,textStatus)

                    {

                        $("#divContent").append(data);

                        alter(textStatus);

                    }

               )

           });

 

    (2).serialieArray()方法

  将DOM元素序列化后,返回JSON对象格式的数据

    (3).$.param()方法

  Serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化

 

   jQuery中的全局事件

                        Ajax全局事件中的方法

方法名称

方法说明

ajaxSend(callback)

AJAX请求发送前执行的函数

ajaxError(callback)

AJAX请求发生错误时执行的函数

ajaxSuccess(callback)

AJAX请求成功时执行的函数

ajaxComplete(callback)

AJAX请求完成时执行的函数

posted on 2013-12-21 20:50  WS李  阅读(492)  评论(0编辑  收藏  举报

导航