脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js jquery ajax

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

 更新时间：2014年01月28日 10:14:40   作者：  
本篇文章只要介绍了js jquery ajax的几种用法总结(及优缺点介绍)，需要的朋友可以过来参考下，希望对大家有所帮助

这篇文章，是我不知道什么是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){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//回调函数
     alert( "Data Saved: " + msg ); &nbsp; &nbsp; &nbsp; //这里是操作
   }
 });

2）
//调用test.php文件，传个参数，data是返回的数据
复制代码 代码如下:

$.post("test.php", { name: "zhang"},
   function(data){
     alert("Data Loaded: " + data);
   });

您可能感兴趣的文章:

相关文章

  • Javascript变量的作用域和作用域链详解

    Javascript变量的作用域和作用域链详解

    这篇文章主要介绍了Javascript变量的作用域和作用域链详解,本文用一个实例和运行结果来讲解这两个知识,需要的朋友可以参考下
    2015-04-04
  • JS中with的替代方法与String中的正则方法详解

    JS中with的替代方法与String中的正则方法详解

    最近这几天在升级自己的MVVM 框架,遇到很多小问题,所以想着就在这里统一解决了。文中主要介绍了关于Javascript中with的替代方法与String中的正则方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • JS 自动完成 AutoComplete(Ajax 查询)

    JS 自动完成 AutoComplete(Ajax 查询)

    实现类似于百度或谷歌的搜索下拉列表的，就是打开百度往里输入你要查询的条件，只要你一输入他就自动弹出一个下拉列表框，并显示相关所有搜索内容
    2009-07-07
  • js实现的牛顿摆效果

    js实现的牛顿摆效果

    本文给大家分享的是使用javascript实现牛顿排球的特效，非常不错，这里推荐给大家，有相同需求的小伙伴能够参考下。
    2015-03-03
  • js引擎垃圾回收机制示例详解

    js引擎垃圾回收机制示例详解

    最近看到一些面试的回顾,不少有被面试官问到谈谈JS垃圾回收机制,下面这篇文章主要给大家介绍了关于js引擎垃圾回收机制的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • javascript实现fetch请求返回的统一拦截

    javascript实现fetch请求返回的统一拦截

    这篇文章主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • js实现Select列表各项上移和下移的方法

    js实现Select列表各项上移和下移的方法

    这篇文章主要介绍了js实现Select列表各项上移和下移的方法,涉及javascript动态操作页面元素属性值的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS动态高度虚拟列表实现原理解析

    JS动态高度虚拟列表实现原理解析

    这篇文章将和大家一起探讨一下动态高度虚拟列表原理并指出常见虚拟列表采用累计高度方式存在缺点,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • 简单实现jQuery轮播效果

    简单实现jQuery轮播效果

    这篇文章主要教大家如何简单实现jQuery轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序实现录音功能

    微信小程序实现录音功能

    这篇文章主要为大家详细介绍了微信小程序实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论