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代码
Mar 25 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
node跨域请求方法小结
Aug 25 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
家长学校实施方案
2014/03/15 职场文书
社区先进事迹材料
2014/05/19 职场文书
创文明城市标语
2014/06/16 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技