jQuery与Ajax以及序列化


Posted in Javascript onFebruary 01, 2016

关于AJAX

所谓Ajax,全名Asynchronous JavaScript and XML。(也就异步的JS和XML)

简单点来讲就是不刷新页面来发送和获取数据,然后更新页面。

Ajax的优势

•无需插件支持
•优秀的用户体验
•提高web程序的性能
•减轻服务器和带宽的负担

Ajax的不足

•浏览器兼容不足
•破坏浏览器前进和后退按钮的正常功能
•对搜索引擎的支持不足
•开发和调试工具的 缺乏

好吧,这些都是几年前的不足。技术的发展很快,这些不足也会慢慢弥补,起码现在调试Ajax并不难。

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键。

传统的实现Ajax的例子就不举了,太蛋疼了,我都没记,网上一搜一大堆。

关于jQuery中的Ajax

$.ajax()方法是封装了最原始的js的Ajax方式。

load(),$.get(),$.post()是封装了$.ajax()得来

$.getScript()和$.getJSON()是进一步的封装。

•load()方法 •用处:载入远程HTML代码并插入DOM中,通常用于获取静态的数据文件,结构为:load(url [,data] [,callback])。 •url为请求的地址
•data可选,为发动到服务器的参数对象
•callback为回调函数,请求不论成功还是失败都调用
•载入页面的时候甚至可以在地址里加上筛选

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus: 请求状态:success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
});

•$.get()方法 •明显的看到调用的方式不同,所以说这函数是jQuery的全局函数。而此前的方法和load()这种都是对jQuery对象进行操作
•$.get()方法使用GET方式来进行异步请求,结构为:$.get(url [,data] [,callback] [,type]) •前三个参数就不说了,唯一不同的是callback只有请求成功才调用
•type参数为服务器端返回内容的格式,包括xml,html,script,json,text和_default
•例子

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容,可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态:success、error、notmodiffied、timeout 4种
}
)
})

•$.post()方法 •它与get方法的玩法一样,不过一个是get方式,一个是post方式。
•$.getScript()方法 •有的时候页面初次加载没必要获取所有的脚本,所以jQuery提供了getScript这种方法来直接加载js文件。
•例子

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了,不需要再对js文件进行处理
});
});

• $.getJSON()方法 •用于加载JSON文件,用法同上,只不过返回的json数据而已

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex,comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法,同样是个全局函数。他的回调函数中,第一个参数为成员的索引,第二个为变量和内容

顺便扩展一下,跨域访问的JSONP

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?"
,function(data){
//某些操作
}
)
})

//JSONP是个非官方协议,采用json与<script>标记结合的方式,主要用于web应用程序跨域

•$.ajax()方法 •这个方法是jQuery最底层的Ajax实现,所以理所当然更加强大以及复杂。

虽然它只有一个参数,但是这个参数对象包含的属性非常多,不过都是可选的。以下列出所有属性: • url:默认当前页地址,也可以手动写请求的地址

•type:默认为GET,也可以写POST
•timeout:设置请求超时时间(毫秒)
•data:发送的数据
•dataType:预期服务器返回的数据类型。
•beforeSend:发送前的调用的函数,如果次函数返回false将取消本次ajax请求。

function(XMLHttpRequest){//XMLHttpRequest是唯一的参数
this;//调用本次Ajax请求时传递的options参数
}

•complete:请求完后,无论成功还是失败都调用。

function(XMLHttpRequest,textStatus){//textStatus描述成功请求类型
this;//调用本次Ajax请求时传递的options参数
}

•success:请求成功后的回调函数

function(data,textStatus){//data为成功返回的数据
this;//调用本次Ajax请求时传递的options参数
}

•error:请求失败调用的函数

function(XMLHttpRequest,textStatus,errorThrown){
// textStatus为错误信息,errorThrown为捕获的错误对象,通常只有其中一个包含信息
this;//调用本次Ajax请求时传递的options参数
}

•global:默认为true。表示是否触发全局Ajax事件。
•序列化元素 •serialize()方法 •它能够将DOM元素内容序列化为字符串

//不仅可以序列化整个表单,也可以序列化单个元素,并且都是自动编码过的
$.post("myurl",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})

•serializeArray()方法 •它能够将DOM元素内容序列化为JSON格式
•$.param()方法 •这是serialize方法的核心,用来对一个数组或对象按照键值对进行序列化

var obj={a:1,b:2,c:3};
var k=$.param(obj);//输出为a=1&b=2&c=3

•jQuery中的Ajax全局事件 •ajaxStart()方法:当Ajax请求开始就触发
•ajaxStop()方法:当Ajax请求结束就触发

<div id="loading">加载中...</div>
$("#loading").ajaxStart(function(){
$(this).show();//ajax开始请求就显示加载中
});
$("#loading").ajaxStop(function(){
$(this).hide();//ajax开始结束就隐藏加载中
});

•ajaxComplete():当Ajax请求完成就触发
•ajaxError():当Ajax请求发生就触发,捕捉到的错误可以作为最后一个参数传递
•ajaxSend():当Ajax请求发送前就触发
•ajaxSuccess():当Ajax请求成功就触发
•如果想使某个Ajax请求不受全局事件的影响,可以在$.ajax中将global属性设置为false,这个在前面已经讲过了。当然也可以在ajax请求前:

$.ajaxPrefilter(function(options){//每次发送前请求
options.global=true;
})

好吧,写完了。最后顺带提一下,setTimeout("doMethod()",4000);为4s后执行doMethod这个函数。

//一个简单的定时发送功能
function updateMsg(){
$.post("myurl",{time:timestamp},function(xml){
//do something
});
setTimeout("updateMsg()",4000);
}
Javascript 相关文章推荐
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
js格式化输入框内金额、银行卡号
Feb 01 #Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 #Javascript
JavaScript中eval函数的问题
Jan 31 #Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 #Javascript
JavaScript中的this机制
Jan 30 #Javascript
实现高性能JavaScript之执行与加载
Jan 30 #Javascript
深入探秘jquery瀑布流的实现
Jan 30 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php中异常处理方法小结
2015/01/09 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
python基于opencv实现人脸识别
2021/01/04 Python
锐步英国官网:Reebok英国
2019/11/29 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
担保贷款承诺书
2015/04/30 职场文书
干部理论学习心得体会
2016/01/21 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS