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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
js实现简单掷骰子效果
Oct 24 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
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python元组知识点总结
2019/02/18 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Django数据库迁移常见使用方法
2020/11/12 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
普通员工辞职信
2014/01/17 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
介绍信模板
2015/01/31 职场文书
golang特有程序结构入门教程
2021/06/02 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python