田克(sailor)

不骄不躁,勇往直前!

导航

JQUERY中的AJAX应用

Ajax介绍

1.什么是Ajax

  Ajax全称为"Asynchronous JavaScript and XML",是由客户端js所发起的http请求代号.

  实现无刷新的数据更新界面效果.

2.Ajax原理

  运用XHTML+CSS来表达信息;

  运用JavaScript操作DOM(Document Object Model)运行动态效果;

  运用XML和XSLT进行数据交换及操作;

  运用XMLHttpRequest为Agent与网页服务器进行异步数据交换;

  运用JavaScript技术实现

3.Ajax的优点

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

  2.优秀的用户体验

  3.提高Web程序的性能

  4.减轻服务器和带宽的负担

 4.Ajax的缺点

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

  2.对搜索引擎的支持的不足

  3.开发和调试工具的缺乏

  4.手持设备支持性差

5.XMLHttpRequest对象

  XMLHttpRequest对象的属性:

    1.readyState:HTTP请求的状态,这个状态的属性值从0增加到4.

状态,名称和含义
状态 名称 描述
0 Uninitialized 初始化状态.XMLHttpRequest对象已创建或被abort()方法重置.
1 Open open()方法已调用,但是send()方法未调用.请求还没有被发送.
2 Sent Send()方法已调用,HTTP请求已发送到Web服务器.未接受到响应.
3 Receiving 所有响应头部都已经接收到.响应体开始接收但未完成.
4 Loaded HTTP响应已经完全接收.

    2.responseText:目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串.

    3.responseXML:对请求的响应,解析为XML并作为Document对象返回.

    4.status:由服务器返回的HTTP状态代码.

    5.statusText:对应status状态的状态名称.

  XMLHttpRequest对象的方法:

    1.abort():取消当前响应,关闭连接并且结束任何未决的网络活动.把XMLHttpRequest对象的readyState属性重置为0的状态,并且取消所有未决的网络活动.

    2.getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回.如果readyState小于3,这个方法返回null.

    3.getResponseHeader():返回指定的HTTP响应头部的值.

    4.open():初始化HTTP请求参数,例如URL和HTTP方法,但是并不发送请求.

      语法:

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

      参数说明:

        method:是用于请求的HTTP方法.

        url:参数是请求的主体.

        Async:参数指示请求使用应该异步地执行.如果这个参数是false,请求是同步的.

        username和password参数是可选的,为url所需的授权提供认证资格.

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

    6.setRequestHeader():向一个打开但未发送的请求设置或添加一个HTTP请求.

jQuery中的Ajax

1.load()方法

  load()方法是jQuery中最为简单和常用的Ajax方法,通常用来载入远程HTML代码并将加载的HTML代码插入DOM中.

  语法:

load(url[, data][, callback]);

  参数说明:

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

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

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

  1)load()加载指定的HTML文件

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

  3)传递方式.load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则采用GET方式传递,反之,则会自动转换为POST方式.

  4)回调参数.对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和XMLHttpRequest对象.

      load()方法中.无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发.

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

  1.jQuery.get()方法

    $.get()方法使用GET方式来进行异步请求.

      语法:

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

 

      参数说明:

        url:待载入页面的URL地址;

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

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

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

    $.get()方法的回调函数:

//回调函数
function(data, textStatus{
        //代码       
}

      参数说明:

        data:参数代表请求返回的内容,

        textStatus:参数代表请求状态,对应有success,error,notmodified,timeout等四种状态.

  2.jQuery.post()方法

    $.post()方法通过远程HTTP POST请求载入信息.

      语法:

$.post(url[, data][, callback][, type])

      参数说明:

        url:待载入页面的URL地址;

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

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

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

      

      GET提交方法与POST提交方法存在如下的区别:

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

        GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制).

        GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码.在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说安全性要高.

        GET方式和POST方式传递的数据在服务器端的获取也不相同.在ASP.NET中,GET方式的数据可以用Request.QueryString获取,而POST方式可以用Request.Form获取,两种方式也都可以用Request.Params来获取.

  3.jQuery.getScript()方法

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

      语法:

$.getScript(url,callback)

      参数说明:

        url:待载入JS文件地址.

        callback(可选):成功载入后回调的函数.

  4.jQuery.getJSON()方法

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

3.jQuery.ajax()方法 

   $.ajax()方法是jQuery底层AJAX实现.简单易用的高层实现是$.get(),$.post()等.

    结构:

$.ajax(options)

    该方法只有一个参数,参数以key/value的形式存在,所有参数都是可选的,常用参数见表:

常用参数
参数名称 参数类型 参数说明
url string (默认:当前页地址)发送请求的地址
type string (默认:"GET") 请求方式 ("POST"或"GET"),默认为"GET".注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持.
timeout number 设置请求超时时间(毫秒).此设置将覆盖全局设置.
data object,string

发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL后.查看processData选项说明以禁止此自动转换.

必须为key/value格式.如果为数组,jQuery将自动为不同值对应同一个名称.

datatype string

预期服务器返回的数据类型.如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,比如XML MIME类型就被识别为XML.在1.4中,JSON就会生成一

个JavaScript对象,而script则会执行这个脚本.随后服务器端返回的数据会根据这个值解析后,传递给回调函数.

beforeSend(XHR) function

发送请求前可修改XMLhttpRequest对象的函数,如添加自定义HTTP头.XMLHttpRequest对象是唯一的参数.

这是一个Ajax事件.如果返回false可以取消本次ajax请求.

success function 请求成功后的回调函数,参数:由服务器端返回,并根据dataType参数进行处理后的数据;描述状态的字符串,Ajax事件.
error function (默认:自动判断(xml或html))请求失败时调用此函数.有以下三个参数:XMLHttpRequest对象,错误信息,(可选)捕获的一场对象
complete(XHR, TS) function 请求完成后回调函数(请求成功或失败之后均调用).参数XMLHttpRequest对象和一个描述成功请求类型的字符串.
async boolean

(默认:true)默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为false.

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行.

cache boolean (默认:true,dataType为script和jsonp时默认为false) jQuery1.2新功能,设置为false将不缓存此页面.

4.序列化元素

  1.serialize()方法:序列表表格内容为字符串. 能够将DOM元素内容序列化为字符串,用于Ajax请求.

  2.serializeArray()方法:将DOM元素序列化后,返回JSON对象格式的数据,需要使用插件或者第三方库进行字符串化操作.

  3.$.param()方法:serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.

5.jQuery中的Ajax全局事件

Ajax全局事件中的方法
方法名称 方法说明
ajaxStart(callback) AJAX请求开始的时候
ajaxStop(callback) AJAX请求结束后
ajaxSend(callback) AJAX请求发送前执行的函数
ajaxError(callback) AJAX请求发生错误时执行的函数
ajaxSuccess(callback) AJAX请求成功时执行的函数
ajaxComplete(callback) AJAX请求完成时执行的函数
 
 
 

posted on 2014-03-07 17:29  田克  阅读(183)  评论(0编辑  收藏  举报