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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JS验证码实现代码
Sep 14 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
Vue Router中应用中间件的方法
Aug 06 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
js兼容的placeholder属性详解
2013/08/18 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python实现多线程的两种方式
2016/05/22 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python3操作mysql数据库的方法
2017/06/23 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python基础教程之while循环
2019/08/14 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python Gabor滤波器讲解
2020/10/26 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
社区活动总结报告
2014/05/05 职场文书
市场营销战略计划书
2014/05/06 职场文书
党员三严三实心得体会
2014/10/13 职场文书
辞职信格式模板
2015/02/27 职场文书
大学军训通讯稿
2015/07/18 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
python内置模块之上下文管理contextlib
2022/06/14 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript