js jquery ajax的几种用法总结(及优缺点介绍)


Posted in Javascript onJanuary 28, 2014

这篇文章,是我不知道什么是ajax到熟练运用ajax的一个历程。

一,最原始的方式来运用ajax

<SCRIPT language=javascript>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//定义了一个ajax的入口函数,供用view层用户调用
function show_type(type_id) {
// alert(id);
createXMLHttpRequest();
var url = "../ajax/shop_type_status.php?id="+type_id+"&time="+Math.random();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function(){ show_back();}
xmlHttp.send(null);
}
//回调函数,将从调用的php文件中取得的数据,反还给用户
function show_back() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//document.getElementById('cat_id').value = id;
document.getElementById('type_status').innerHTML = xmlHttp.responseText;
}
}
}
</SCRIPT>

个人分析:这种方法挺好的,简单灵活,但是有一点不好,就是冗余代码比较多,不利于后期维护。

二,js端封装的ajaxrequest

这个东西,对于习惯了用javascript的人来说,是一个不错的选择,它是装上面所说的那种方法简单的封装了一下,做了统一的调用。感觉不错,代码挺多的就不贴出来了,大家可以到google搜ajaxrequest。

//ajaxrequest.js里面有一个这个方法这个方法是供view端调用的接口,接口可以有多个,根据情况自己加

function ajax_action_fun(url,fun) {
var ajax=new AJAXRequest;
ajax.get(
url,
function(obj){alert(obj.responseText);fun()}
);
}
//html里面调用这个接口
get_shop_son_list   //是回调后执行的方法名
ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list);
function get_shop_list(resValue){
//这里就是你要的操作
}

个人分析:它弥补了第一种方法的不足,统一调用接口,可以设置回调函数,缺点如果有的话,不在ajaxrequest本身而在于javascript,举个例子吧

javascript:如果我想调用ajax_action_fun这个方法我要在html里加个东西

<a class="showshop" href='javascript:' onclick=ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list);>显示店</a>

jquery:用它可以尽量把js和html分开,这对于后期维护是很帮助的,会节省很多时间,例如,全站换html;

$(".showshop").bind("click", {url: "../ajax/shop_ajax.php?type=1",function:get_shop_list}, ajax_action_fun);
这样就可以不用在html里面写onclick事件了

三,jquery的ajax
1)

$.ajax({
   type: "POST",
   url: "test.php",           //调用的php文件
   data: "name=zhang",
   success: function(msg){            //回调函数
     alert( "Data Saved: " + msg );       //这里是操作
   }
 });

2)
//调用test.php文件,传个参数,data是返回的数据
$.post("test.php", { name: "zhang"},
   function(data){
     alert("Data Loaded: " + data);
   });
Javascript 相关文章推荐
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
js中哈希表的几种用法总结
Jan 28 #Javascript
js日期对象兼容性的处理方法
Jan 28 #Javascript
JS cookie中文乱码解决方法
Jan 28 #Javascript
JS正则表达式验证数字代码
Jan 28 #Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 #Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 #Javascript
setInterval与clearInterval的使用示例代码
Jan 28 #Javascript
You might like
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js验证表单第二部分
2006/11/25 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python3 assert断言实现原理解析
2020/03/02 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python绘制分布折线图的示例
2020/09/24 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
夜大自我鉴定
2013/10/31 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
大学生活动总结模板
2014/07/02 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
办公用房租赁协议书
2014/11/29 职场文书
志愿者事迹材料
2014/12/26 职场文书
四大名著读书笔记
2015/06/25 职场文书
2019个人半年工作总结
2019/06/21 职场文书
js Proxy的原理详解
2021/05/25 Javascript