- 浏览: 439503 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
cbo365:
叁陆伍视讯公司的网络摄像机支持RTMP协议,可自定义流媒体服务 ...
nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器 -
藏在心底:
用HTML5canvas绘制一个圆环形的进度表示 -
mdqy195905:
Java 代码:
package com.wing;
imp ...
JSR356标准Java WebSocket -
redstarofsleep:
dwangel 写道好像可以直接用 apt-get insta ...
ubuntu14.04安装ffmpeg -
dwangel:
好像可以直接用 apt-get install吧
ubuntu14.04安装ffmpeg
Jquery提供了Ajax的前端封装,今天学习了一下,使用还是非常的方便的。
Jquery中的Ajax操作一共提供了6个方法,分别是$.ajax(),load(),$.get(),$.post,$getScript(),$getJSON()。这6个方法中$.ajax()是最底层的,其它的方法都是基于这个方法的.
注:我这里的例子使用的是JSP和Struts2
1.load()方法
load()方法的使用方法是最简单的,可以在元素上直接使用这个方法,load()方法可以有3个参数,分别是url,data,callback,其中url是必须参数,代表接受请求的URL,另外2个是可选参数,其中data是发送至服务器的key:value数据,callback是回调函数.
例子1:
页面上有一个按钮,一个DIV
<input type="button" value="JAjax1" onclick="tryAjax1();"></input> <div id="JAjax"></div>
按钮的onclick事件如下:
var url = 'test.html'; function tryAjax1() { $('#JAjax').load(url); }
test.html的代码如下:
<table id="insert"> <tr><td>aaa</td></tr> <tr><td>aaa</td></tr> </table>
就这么几行简单的代码,就完成了一个Ajax示例,点击"JAjax1",id为"insert"的Table就插入了"JAjax"这个DIV中.
例子1这种方式对于载入一些静态的内容是非常好的,像这样只带一个参数的load方法发送的GET请求,但是如果想载入动态内容有时候就会出问题,因为GET方式的请求会数据会被浏览器缓存起来,导致第二次再点击按钮是不再发送请求.(至少我在IE8下试验是这样的,在Firefox中每次点击按钮都会发送请求),但是如果load方法加上了第二个参数,也就是发送到服务器的数据,这样的话,load方法会以PSOT方式发送请求,POST请求每次都会提交到服务器端.
例子2:
页面上依旧还是只有一个DIV和按钮:
<input type="button" value="JAjax1" onclick="tryAjax1();"></input> <div id="JAjax"></div>
按钮的onclick事件进行了修改:
var url = 'testajax!testAjax.action'; function tryAjax1() { $('#JAjax').load(url, {'content':'Jquery Ajax load1'}, callback1); } function callback1(responseText, textStatus, XMLHttpRequest) { alert(responseText); alert(textStatus); }
这次,把请求发到了Struts2的一个Action,传递了一个参数{'content':'Jquery Ajax load1'},并且添加了一个回调函数callback1,这个回调函数没有什么实际意义,纯粹的打印服务器返回的数据而已.
action的代码:
package action; import com.opensymphony.xwork2.ActionSupport; public class AjaxAction extends ActionSupport { private static final long serialVersionUID = -8023333659379228177L; private String content; public String testAjax() { System.out.println("%%%%%%%%%" + content); return "ajax2"; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } }
action里返回的"ajax2"指向了一个JSP页面,这个页面的代码如下:
<table id="insert"> <tr><td>aaa</td></tr> <tr><td>${content}</td></tr> </table>
现在再点击按钮,能看到id 为"insert"的这个Table被插入到了id 为"JAjax"这个DIV里"${content}"被替换成了"Jquery Ajax load1".这个例子结合Struts2实现了将动态内容载入页面,在实际中这种方式很使用,使用也非常方便.
load方法还支持id选择器,在load()方法的URL最后加入一个ID选择器,就可以载入指定的元素了,在上面的例子中,在url后加上#insert,url现在变成了"testajax!testAjax.action #insert"这样就载入id为insert的元素了,但是要注意,URL和ID选择器之间有一个空格!
最后,提一下load方法的回调函数,load方法的回调函数有3个参数,第一个是请求返回的内容,第二个是状态:success,error,notmodified,timeout,4种,第三个参数是XMLHttpRequest对象.在load方法中,无论Ajax请求是否成功,回调函数就会被触发.而且回调函数的触发是在内容被插入到页面之后的,从上面的例子中就可以看出来,在alert的时候,内容实际上已经插入页面了.
2. $.get()方法
$.get()方法是用GET方式来提交请求的.
$.get()方法最多可以有4个参数,分别是url,data,callback,type
其中url是必选参数,其它三个是可选参数,type参数是指服务器端返回的内容的格式,可以是xml,html,script,json,text或_default.其它几个参数的含义与load方法是一样的.
例子3:
还是和上面的例子一样,这次用$.get()方法来做:
页面上还是一个按钮和一个DIV
<input type="button" value="JAjax2" onclick="tryAjax2();"></input> <div id="JAjax"></div>
Javascript代码如下:
var url = testajax!testAjax.action'; function tryAjax2() { $.get(url,{'content':'Jquery Ajax load2'},callback2,'html'); } function callback2(data, textStatus) { $('#JAjax').append(data); }
Action代码和返回的JSP的代码和例子2的是一样的.
$.get()方法的回调函数有两个参数,分别是服务器返回的数据和请求状态,请求状态和load()方法一样,也是那4种.与load()方法不同的是,$.get()方法的回调函数只有当数据成功返回后才被调用.回调函数中可以根据服务器返回的不同类型数据(html,xml,json等)做相应的处理即可.
3. $.post()方法
$.post()方法的形式和使用方法和$.get()方法是完全相同的,只是一个是GET请求,一个是POST请求而已.
4. $.getScript()方法
这个方法用来载入JS文件,加载过来的JS文件不需要做任何处理,Javascript文件会自动执行.$.getScript()方法也有回调函数,可以在回调函数中调用载入的JS文件中的方法.回调函数没有参数.
5. $.getJSON()方法
这个方法是用来加载JSON文件的,用法与上一个$.getScript()一样.
6. $.ajax()方法
这个方法是JQuery里最底层的Ajax方法,方法只有一个参数,但是用法确是最复杂的.虽然这个方法只有一个参数,但是这个参数可以包含很多东西,参数都是以键值对的形式组织到一起的,所有参数都是可选的,例如可以这样写:$.ajax({url:'ajax.html',type:'GET'}).
还可以有很多其它的参数,有关这个方法的用法这里就先不讨论了,下次(已经写了,在这个地址 http://redstarofsleep.iteye.com/blog/857502 )专门再研究.(个人认为上面这些方法已经足够用了,这个方法的用处不大).
今天就先写到这吧.
评论
多谢支持
多谢支持
发表评论
-
JSR356标准Java WebSocket
2013-11-14 11:16 15317文章搬至CSDN, 最新内容请访问: http://blo ... -
用HTML5canvas绘制一个圆环形的进度表示
2013-08-02 10:05 21625文章搬至CSDN, 最新内 ... -
Javascript面向对象之:一.创建类
2012-05-09 16:53 1052Javascript语言到目前为止,本身并没有提供类似于cla ... -
知识点整理之Java的Cookie操作
2012-05-07 10:17 3445创建Cookie // new一个Cookie对象,键值对为 ... -
基于Tomcat的WebSocket(5月8日更新)
2012-04-17 17:05 598302014年2月更新: 此API为Tomcat私有,当时Ja ... -
表格表头固定,内容多时滚动内容(2)[改进版]
2011-12-31 15:52 2508之前写过一个,把表头的固定,内容多时滚动内容:http://r ... -
HTML5 WebSocket做聊天室(服务器端基于Jetty8)
2011-12-13 08:33 26948早就厌倦了Ajax轮询,一直想试试Web Socket.这次终 ... -
引入CSS 的两种方式:link和@import的区别[转]
2011-09-20 09:43 1368引入css 外部文件的两种方法为在html页面通过link ... -
纯JS网页上的动态折线图
2011-07-03 23:05 7781用Javascript写了一个网页 ... -
JS画线,虽然很原始,但是兼容所有浏览器
2011-06-29 10:31 14789用Javascript画线的方法很多,有SVG,VML、can ... -
表格表头固定,内容多时滚动内容
2011-04-20 22:13 14090不多写废话了,都在代码注释中 <html> ... -
网上找的代码太多,自己用JQuery写一个横向滑动切换效果,代码超少
2011-04-05 18:14 17140CSS代码: 回帖的问的比较多,解释一下,CSS中的两 ... -
JQuery选择器总结(3)
2011-03-27 22:13 0继续筛选,过滤选择器 过滤选择器 (1) :head 标 ... -
JQuery选择器总结(2) 基础过滤选择器
2011-03-06 17:12 4611上一次总结了JQuery的一些基础选择器(http://red ... -
JQuery选择器总结(1)基础篇
2011-02-25 23:29 9141一个优秀的Javascript库必定要有一个强大的选择器,强大 ... -
CSS3圆角,阴影,透明
2011-02-15 21:35 22642CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用 ... -
JQuery的Ajax学习(2)
2011-01-01 23:42 3724上一次主要学习了JQuery的Ajax的几个上层方法(http ... -
HTML实体字符
2010-12-09 08:42 1171显示结果 描述 实体名称 实体编号 ... -
AJAX处理以XML返回的响应
2010-12-03 16:40 5180Ajax请求,服务器端返回XML形式的数据,在页面上用Java ... -
谷歌字体(Google Font)初探 [翻译自Google官方文档]
2010-12-02 22:24 5211这个指南解释了如何使用Google Font的API,把网络字 ...
相关推荐
ajax、jquery这个是实际开发中使用最多的脚本,js在兼容性上有待提高,学会这些电子书,那么已经可以算是初步入门,可以进行实际开发了。
ajax(jquery)学习二.1 请只打开来源可靠的网址 来自: http://hi.baidu.com/jacobi19871112/blog/item/60c39509ebb8fda62eddd4a1.html
javascript+jquery+ajax相关学习资料PPT
jquery + struts1 + ajax学习例子
里面有jquery的一些基本常用语法。动态效果处理。ajax支持。js 处理等。
jQuery+AJAX学习笔记
jquery+ajax学习大全 有源码和.pdf书
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
jquery+ajax 学习必备的源码个书籍(推荐) 最新的资料集 2009年12月12号的
jqyery ajax $.ajax $.post 两种方式 此例子,分别用了两种处理方式实现, 用tomcat6.0 servlet jsp 调试很方便 下载解压后 直接用myeclipse导入,就可以调试,没有用数据库,适合新手学习。 如果调试不成功的,...
非常好的jQuery ajax学习资料,来源于 精通jQuery+javascript这本书的作者,写的非常的好哦!
通过Jquery实现的前台输入验证,用Ajax传输到Servlet 再使用DButils开源库实现数据库查询 返回结果 适合初学者学习
这是一个学习jquery-ajax的实例,实例中应用到了bean -json的转化, 页面上应用到了jqury如何解析返回的json数据。
这是本人在练习jquery时写的一个简单的小例子,主要采用了jquery的$.ajax方法。希望能对学习jquery的同学有所帮助
例子 jquery 的AJAX运用C#..........
jQuery Ajax 全解析.pdf 学习javaScript 异步通信 局部刷新
学习使用JQuery的笔记!供大家参考!!详细的学习步骤与图解!Json数据,页面缓存问题等有完美的解答!
该视频目的在于让更多的人学习ajax和jquery,新手小白更易上手,这里举了两个例子!
ajax极好的实例代码集锦,部分实例应用了jquery框架,代码极其规范,实用价值极强,极具学习和参考的价值。
jquery ajax java实例非常实用,非常简单,对学习jquery很有帮助