[引言]
前二回小傅老师给大伙讲解了AJAX的原理与底层实现,很多小伙伴发信给我说“老师,前端JS代码太多了。一个问题找了个半天,原来是个单词拼错了:-(。有没有简单点的方法实现AJAX啊?”真是应正了小傅老师的预测,好多小伙伴期待有代码少、简洁的方式来实现AJAX。这回老师就带小伙伴们用最少的代码来实现的AJAX应用。
[JS框架]
很多小伙伴都听说过框架,那框架到底是什么、能给我们程序带来哪些好处。其实框架即framework,就是某种应用的半成品,就是一组组件,供你选用完成你自己的系统。简单说就是使用别人搭好的舞台,你来做表演。而且,框架一般是成熟的,不断升级的软件。
JS框架市面也有很多,比如Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery、Mochikit、mootools 、moo.fx等等。其由Jquery以体积小、功能强大、免费而占据市场半隔江山。
[JQUERY]
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
小伙伴可以参考以下网页,来获取jQuery
jQuery官网:
[JQUYER实现AJAX]
JQUERY对JS进行了封装,它提供方便、简洁实现AJAX的方法。我们不用再判断浏览器,不用见到XMLHttpRequest对象,而且提供多种提交方式,使得开发人员应用起来更加灵活。
JQUERY提供了三个函数,实现AJAX的操作。
1.$.ajax()
$.ajax()返回其创建的XMLHttpRequest 对象。$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。
2.$.get()
通过远程HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。
3.$.post()
通过远程HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax。
[代码]
服务器端代码不用作调整,我们只要将前端代码重写即可。
怎么样小伙伴们,小傅老师通过JQUERY将第一弹中近百行JS代码压缩成20多行,编码效率得到质的提升,是不是感觉很爽啊?快自己实战下吧。
其实JQUERY不仅在操作AJAX方面很有优式,且在数据校验、DOM元素操作、CSS的动态修改、动画等都有非常优秀的表现。感觉兴趣的小伙伴们可以查看小傅老师的相关文章,保你有更大的收获。
好了,AJAX系列小傅老师就讲到这边,我们下回见。