Jquery中的Ajax_jquery $.get callback-CSDN博客

本文链接：https://blog.csdn.net/wj8023/article/details/42836791

前一篇文章，我们简单就“原始”Ajax和jquery中Ajax做了简单的对比。发现jquery是Ajax的使用变得极其简

单。之所以变得简单，是jquery针对我们平时的开发需要，对ajax进行了一些封装，而我们都知道，封装可以使复杂

的工作变得简单，简单的工作变得更加简单。

jquery中的Ajax封装分为三层：

最底层的Ajax，也就是基础Ajax的一些操作。
load，get，post，封装了jquery的Ajax。
getScript，getJosn，封装了get。

函数介绍：

$.ajax(options) 把远程数据加载到XMLHttpRequest 对象中
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.get(url,data,callback,type) 使用HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的JavaScript 文件

参数说明：

(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型(html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项

函数分析：

$.ajax(options)

是jquery对$,ajax的最基础封装，可以实现所有情况下的异步处理。当然，能实现的功能多，也就预示着他比较复

杂。因此它包含的参数比较多，我们就不详细的说明了，简单列一下我们经常用到的。

//一个Ajax过程
$.ajax({ type:"post", //以post方式与后台沟通
url : "login.html", //数据提交路径
dataType:'json',//从html返回的值以JSON方式 解释
data:'username='+username+'&password='+password, //发给html的数据
success:function(json){//如果调用html成功
$('#result').html("姓名:"+ json.username + "<br/>密码:" + json.password); //把html中的返回值显示在预定义的result定位符位置
}
});

$(selector).load(url,data,callback)

精简版的$.ajax(options) ，这个功能非常使用，巧妙的利用load借口，不仅可以实现我们想要的效果，而且可以降

低代码量，但是简单必然带来一点的局限性。

1.它主要用于直接返回HTML的Ajax接口

2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回

调函数也还是会加载.

3.我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime()来保证每次发送的URL

不同, 可以避免浏览器缓存.

实例：（来源于网络）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/javascript" src="../scripts/jquery-1.4.3-vsdoc2.js"></script>

  <script type="text/javascript">
    $(function()
    {
      $("#btnAjaxGet").click(function(event)
      {
        //发送Get请求
        $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
      });

      $("#btnAjaxPost").click(function(event)
      {
        //发送Post请求
        $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
      });

      $("#btnAjaxCallBack").click(function(event)
      {
        //发送Post请求, 返回后执行回调函数.
        $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
        {
          responseText = " Add in the CallBack Function! <br/>" + responseText
          $("#divResult").html(responseText); //或者: $(this).html(responseText);
        });
      });

      $("#btnAjaxFiltHtml").click(function(event)
      {
        //发送Get请求, 从结果中过滤掉 "鞍山" 这一项
        $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
      });

    })
  </script>

</head>
<body>  
  <button id="btnAjaxGet">使用Load执行Get请求</button><br />
  <button id="btnAjaxPost">使用Load执行Post请求</button><br />
  <button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
  <button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
  <br />
  <div id="divResult"></div>
</head>

<body>
</body>
</html>