java中应用ajax_[Java教程]jQuery中的Ajax应用

[Java教程]jQuery中的Ajax应用

0 2013-12-25 18:00:18

Ajax介绍

1.什么是Ajax

Ajax全称为"Asynchronous JavaScript and

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

2.Ajax原理

运用XHTML+CSS来表达信息;

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

运用

运用

运用JavaScript技术实现

3.Ajax的优点

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

2.优秀的用户体验

3.提高Web程序的性能

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

4.Ajax的缺点

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

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

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

4.手持设备支持性差

5.

1.readyState:HTTP请求的状态,这个状态的属性值从0增加到4.状态,名称和含义状态名称描述

0Uninitialized初始化状态.

1Openopen()方法已调用,但是send()方法未调用.请求还没有被发送.

2SentSend()方法已调用,HTTP请求已发送到Web服务器.未接受到响应.

3Receiving所有响应头部都已经接收到.响应体开始接收但未完成.

4LoadedHTTP响应已经完全接收.

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

3.response

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

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

1.abort():取消当前响应,关闭连接并且结束任何未决的网络活动.把

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个参数,分别代表请求返回的内容,请求状态和

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:(可选)返回内容格式,

$.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:(可选)返回内容格式,

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的形式存在,所有参数都是可选的,常用参数见表:常用参数参数名称参数类型参数说明

urlstring(默认:当前页地址)发送请求的地址

typestring(默认:"GET") 请求方式 ("POST"或"GET"),默认为"GET".注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持.

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

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

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

datatypestring预期服务器返回的数据类型.如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,比如

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

beforeSend(XHR)function发送请求前可修改

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

successfunction请求成功后的回调函数,参数:由服务器端返回,并根据dataType参数进行处理后的数据;描述状态的字符串,Ajax事件.

errorfunction(默认:自动判断(

complete(XHR, TS)function请求完成后回调函数(请求成功或失败之后均调用).参数

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

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

cacheboolean(默认: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请求完成时执行的函数

本文网址：http://www.shaoqun.com/a/79453.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0