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 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
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读书笔记整理_结构语句详解
2016/07/01 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
ASP Json Parser修正版
2009/12/06 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
用python做游戏的细节详解
2019/06/25 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python模拟实现斗地主发牌
2020/01/07 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
大一新生学期自我评价
2014/04/09 职场文书
婚育证明样本
2015/06/16 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python