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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
使用js画图之画切线
Jan 12 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
纯js实现倒计时功能
Jan 06 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python的Tqdm模块的使用
2018/01/10 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python从Oracle读取数据生成图表
2020/10/14 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
个人贷款担保书
2014/04/01 职场文书
讲党性心得体会
2014/09/03 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
辞职信怎么写
2015/02/27 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL