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 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python控制Firefox方法总结
2019/06/03 Python
Python中turtle库的使用实例
2019/09/09 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
strstr()的简单实现
2013/09/26 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
教育专业自荐书范文
2013/12/17 职场文书
党组织公开承诺书
2014/03/29 职场文书
个人承诺书怎么写
2014/05/24 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
老龙头导游词
2015/02/11 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
redis内存空间效率问题的深入探究
2021/05/17 Redis
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL