文档章节

jQuery Ajax 使用

learn_more
 learn_more
发布于 2015/08/04 13:51
字数 2049
阅读 89
收藏 10

1 基本概念

1)使用 Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢?我们普通的 Web 程序开发基本都是同步的,意为执行一段程序才能执行下 一段, 类似电话中的通话, 一个电话接完才能接听下个电话; 而异步可以同时执行多条任务, 感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行, 但同步的模式属于阻塞模式, 这样会导致多条线路执行时又必须一条一 条执行,会让 Web 页面出现假死状态,所以,一般 Ajax 大部分采用异步模式。

2)jQuery 对 Ajax 做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容 性。对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这 层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。


2 ajax( options )

1 ) $.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。 这个方法只有一个参数,传递一个各个功能键值对的对象(options)。

2)options的基本配置如下:

$.ajax({
 type: "POST",     // 请求方式,post或get ,注意和后面的data,如果是get方式,那么data传null
 url: "some.php",  // 请求url,如果url是跨越请求,需要注意dataType类型,为 jsonp
 dataType:'text',  // 接收数据类型,这个值最好不要设置,默认情况下是服务器自动帮我们判断,而且会进行解析
 data: "name=John&location=Boston", //post 方式发送数据给服务器
 timeout: 5000,   // 如果请求数据在5秒之内没有响应数据,那么客户端将会停止请求,执行error方法
 cache: false ,   //设置浏览器缓存响应, 默认为 true。 如果 dataType 类型为 script 或 jsonp 则为 false。
 beforeSend: function(xhr){// 请求之前调用,遮罩效果
  },
 success: function(response, stutas, xhr){
// 成功请求之后(4 200),而且解析无误时调用(对服务器传来的数据ajax会自动识别格式并解析,但是如果解析出错   则不会执行这个函数,因此在4 200 都满足的情况下还要解析服务器发送的数据为对象成功之后才调用success )    
 } ,
 error: function(xhr, textStatus, errorThrown){
// 如果200 就会进入这里,如果是200,然而解析服务器发送的数据有错误,如发送的json的数据无法通过JSON.parse()转为js对象,也会进入这里。
 },
 complete: function(xhr, textStatus){
// 无论最后的请求结果是什么,这个方法都会被执行!
 }
    });

以上信息是最基本的配置,一般情况下只需以上配置就能解决问题。


3 load( url , data , fun )

1).load()方法可以携带三个参数: url(必须, 请求 html 文件的 url 地址, 参数类型为 String)、 data(可选,发送的 key/value 数据,参数类型为 Object)、callback(可选,成功或失败的回调函数,参数类型为函数 Function)。

2 )我们不可能使用这个方法与服务器后台打交道,原因就是他可以配置的参数实在太少,另外他不是jQuery的全局方法,他是jQuery对象的实例方法,然而这个方法的最大用处就是加载文件!异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可,使用方法如下:

  $('#box').load('url' , {name:value} , function(response, status, xhr){
            process( );
    });

那么这个方法的意义就是:通过异步加载html,并且这个html会覆盖之前的jQuery对象上的html,相当于

$('#box').html(response);


4 $.get(url , data , fun , type )和$.post(url , data , fun , type)

1 ) load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和 $.post()是全局方法, 无须指定某个元素。 对于用途而言, .load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。

2)$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务 器返回的内容格式:包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数, 后面三个为可选参数。

3)注意:第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断,并不 需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。如果载入的是 xml 文件,type 会智能判断。如果强行设置 html 类型返回,则会 把 xml 文件当成普通数据全部返回,而不会按照 xml 格式解析数据。

4)$.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的 不同,在用户使用上体现不出。具体区别如下: 

.GET 请求是通过 URL 提交的,而 POST 请求则是 HTTP 消息实体提交的; 

.GET 提交有大小限制(2KB) ,而 POST 方式不受限制; 

.GET 方式会被缓存下来,可能有安全性问题,而 POST 没有这个问题; 

.GET 方式通过$_GET[]获取,POST 方式通过$_POST[]获取。

具体形式如下:

        $.get( 'url' , {name:value} , function(response, status, xhr){ 
                process( ) ;
        } , 'text' );
    
       $.post( 'url' , {name:value} , function(response, status, xhr){ 
                process( ) ;
        } , 'text' );


5 $.getScript()和$.getJSON()

1 ) jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件; $.getJSON(),用于专门加载 JSON 文件。 

2 ) 有时我们希望能够特定的情况再加载 JS 文件,而不是一开始把所有 JS 文件都加载了, 这时课时使用$.getScript()方法,但是使用这种方法加载js文件要注意,他与<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>这个方法记载是两回事,使用<script>标签加载的文件会被存在内存中,然后在html任何处都能使用js文件中声明的变量,但是使用$.getScript()方法加载的js文件则不是被加载内存中,而是默认执行文件中的内容,然而这个外在js文件能够调用到内存中的任何东西(如html,javascript中的内容)。

3)具体使用方式

$.getScript('file.js', function (response, status, xhr) {
    process( ) ;
});  

$.getJSON('file.json', function (response, status, xhr) {
    process( ) ;
});


6 表单序列化

1)Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit 提交将数据传 输到服务器端。如果使用 Ajax 异步处理的话,我们需要将每个表单元素逐个获取才方能提交。这样工作效率就大大降低,因此使用jQuery为我们封装的表单序列化方法,

2)使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。而且把表单中的元素转为url参数形式,使用&,= 连接。

具体使用:var data = $('form').serialize() ; 

3 ) 需要强调的是:serialize( ) 方法不是表单特有的,只要是表单元素就能够使用它获取value值,并且转换为url参数形式。


7 对象序列化

1)在使用 data 属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法 将对象转换为字符串键值对格式。

2)注意:如果使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对,则可以更加稳 定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限,所以直接传递 obj 对象要谨慎。

3)具体使用如下:var data = $.param( obj ) ; 



© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.5K
9
10个强大的Ajax jQuery文件上传程序

上传文件和图片是许多网站的一个常用功能,无论是让注册用户上传一个个人资料图片还是上传文件共享,都离不开上传程序,虽然有很多种实现方法,但要让上传看起来更酷一点,如显示剩余时间,同...

SeanCai
2010/11/08
0
1
解决多个jquery并存冲突问题

jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3.X、1.4...

罗盛力
2011/12/02
0
0
jQuery 1.5.1 正式版发布

想必是 jQuery 1.5.0 存在太多兼容性的问题,jQuery 这次很快的发行了 1.5.1 版本。该版本主要是修复了 1.5.0 的许多bug。 下载地址: jQuery Minified (29kb Gzipped) jQuery Regular (212...

红薯
2011/02/25
7.6K
7
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hive(五)——Sqoop导入导出数据

一、

ittzg
34分钟前
3
0
抽象同步队列AQS——AbstractQueuedSynchronizer锁详解

AQS——锁的底层支持 谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资...

须臾之余
今天
2
0
springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
昨天
3
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
昨天
2
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部