jQuery中的Ajax
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load(),$.get()和$.post()方法，第三层是$.getScript()和$.getJson()方法。首先介绍第2层得方法，使用效率很高。
load()方法
1.载入HTML文档
 load()方式jQuery中最为简单的Ajax方法，能载入远程HTML代码并插入DOM中，它的结构为:
 load(url[,data][,callback]);
 load()方法参数解释如表6-1所示。
  
 load参数说明：
 参数名称    类型           说明
 url        string       请求html的url地址
 data(可选) object       发送至服务器的key/value数据
 callback   function     请求完成时的回调函数，
<!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>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
  $(function(){
      $("#send").click(function(){
              $("#resText").load("test.html");
      })
  })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div  class="comment">
    已有评论：
</div>
<div id="resText" ></div>
</body>
</html>
test.html 页面里并没有添加样式，但现在加载的内容有样式了，这些样式是在主页面中添加的，
即主页面相应的样式会立即应用到新加载的内容上。
传递方式
load()方法得传递方式根据参数data来自动指定，如果没有参数传递，则采用get方式传递;反之，
则自动转换为post方式。
//无参数传递
$("#resText").laod("test.php",function(){
   
});
//有参数传递，则是post方式
$("#resText").laod("test.php",{name:"rain",age:"22"},function(){
});
回调参数
对于必须加载完后才能继续操作，load()方法提供了回调函数(callback),该函数有3个参数，
分别代表请求返回的内容，请求状态和XMLHttpRequest 对象，jQuery代码如下:
 $("#resText").laod("test.html",function(responseText,textStatus,XMLHttpRequest)){
    //请求返回的内容
    //请求状态  success error notmodiffed,timeout 4种
    //XMLHttpRequest:     XMLHttpRequest
}
在load()方法中，无论Ajax请求是否成功，只要当请求完成complete后，回调函数(callback)就被触发，对应下面将介绍$.ajax()方法中的complete回调函数。
$.get()方法和$.post()方法
laod()方法通常用来从web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器的页面，那么可以使用$.get()或者
$.post()方法，或者是$.ajax()方法。
$get()和$post()方法是jQuery中的全局函数，而在此之前得jQuery方法都是对jQuery对象进行操作的。
$.get()方法
$.get()方法使用GET方式来进行异步请求。
它的结构为
$.get(url[,data][,callback][,type])
$.get()方法参数解释
参数名称           类型                         说明
url                string                 请求的HTML页的URL地址
data(可选)         object                 发送至服务器的key/value数据会作为QueryString附加到请求url中
callback(可选)     function               载入成功时回调函数(只有当response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选)         string                 服务器端返回内容的格式,包括xml,html,script,json text 和_default
(1) 使用参数
首先，需要确定请求页面的URL地址
$("#send").click(function(){
    $.get("get1.php",data参数，回调函数);
});
然后，在提交之前，需要获取 "姓名" 和 "内容" 的值为data参数传递给后台。
$("#send").click(function(){
  $.get("get1.php"),{
        username:$("#usernmae").val(),
        content:$("#content").val()
        },回调函数
     }
} )
$.get()方法得回调函有两个参数
function(data,textstatus){
 //data 返回的内容，可以使xml文档，json文件，HTML片段等等
 //testStatus: 请求状态: success,error,notmodified,timeout4种
}
data 代表请求的参数，state代表请求的状态，回调函数只有当翻书success可以被调用。
由于服务器端返回的数据格式可能有多种，他们都可以完成同样的任务，分别介绍一下
HTML片段
返回的是HTML片段，不需要特殊的处理，就可以将新的数据插入到主页面中。
$(function(){
    $("#send").click(function(){
     $.get("get1.php",{
      username: $("#username").val(),
      content: $("#content").val()
      },function(data,textStatus){
         $("#resText") .html(data);//将返回的数据添加到页面上
      });
 })
})
HTML 片段实现起来比较简单，但是不一定能够在其他的web应用程序中得到重用。
处理XML文档
游湖服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理，前面的章节已经介绍过jQuery强大的DOM处理能力，处理XML文档与处理HTML文档一样
可以使用常规的attr(),find(),filter()以及其他方法
$(function(){
   $("#send").click(function(){
     $get("get2.php",{
      username:$("#username").val(),
      content:$("#content").val()
     },function(data,textStatus){
      var username = $(data).find("comment").attr("username");
      var content =  $(data).find("comment content").text();
      var txtHtml = "<div class='comment'><h6>"
       +username+":</h6><p class='para'>"
       +content+"</p></div>";
      $('#resText').html(txtHtml);//将返回的数据添加到页面上
     })
   })
})
json 文件
xml文档体积大和难以解析.json 文件和xml文档一样，也可以方便的被重用,而且json 文件简洁，容易阅读
由于服务器返回的数据格式是json 文件，因此需要对放回的数据进行处理之后，才可以将新的HTML数据调价到主页面中。
$(function(){
  $("#send").click(function(){
     $("get3.php",{
      username:$("#username").val(),
       content:$("#content").val()
     },function(data,textStatus){
       var username = data.username;
       var  content = data.content;
       var  txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>;
       $("#resText").html(textHtml);
      })
  })
},"json")
在上面的代码中，将$.get()方法得第4个参数(type)设置为json 来代表期待服务器端返回的数据格式。
$.post()方法
 它与$.get()方法得结构和使用方式多相同，不过他们之间仍然有一些区别
 GET 请求会将参数跟在URL后进行传递，而POST 请求则是作为HTTP消息的实体内容发送给WEB服务器。
 当然在ajax请求中，这种区别对用户是不可见的。
  
 GET 方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要不GET方式大的多(理论上不受限制)。
 GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。
 在某种情况下，GET方式会带来严重的安全性问题，而POST 方式相对来说可以避免这些问题。
  
 建议是用POST请求
 $(function(){
   $("#send") .click(function(){
     $post("post1.php",{
      username:$("#username").val(),
      content:$("content").val()
     },function(data,textStatus){
       $("#resText").append(data);  //将返回的数据添加到页面上
     });
   });
})
$ajax()方法不仅能实现与load(),$.get() 和$.post()方法相同的功能，而且还可以设定beforeSend(提交钱回调函数)，
error(请求失败后处理),success（请求成功后处理）以及complete（请求完成后处理）回调函数，通过这些回调函数，可以给哟高呼更多的ajax提示信息
另外，还有一些参数，可以设置Ajax请求的超时时间或者页面的“最后更改 ”状态等等。关于$.ajax()方法将在后面的章节中进行详解。
$getScript方法和$getJson方法
1.$getScript()
有时候，在页面初次加载时就去的所需的全部JavaScipt文件是完全没有必要的，虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，jQuery代码如下:
$(document.createElement("script")).attr("src","test.js");.appendTo("head");
或者
$("<script type='text/javascript' src='text.js'/>").appendTo("head");
这种方式并不理想，jquery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便。不要对javascript文件进行处理。
$(function(){
   $("#send").click(function(){
     $.getScript('test.js');  
   });
})
$getJSON()
$getJSON()方法用于加载JSON文件，与$.getScript()方法得用法相同。
jQuery代码如下：
$(function(){
   $('#send').click(function(){
     $.getJson('test.json');
   })
})
单击按钮"加载"按钮后，网页上没有效果，虽然加载了json文件但是并没有告诉javascript对返回的数据处理，为此jquery 提供回调函数,在回调函数里面处理返回的数据。
$(function(){
    $("#send").click(functioin(){
        $.getJSON('test.json',function(data){
           //data 返回数据
       })
    })
})
可以在函数中通过data变量来遍历相应的数据，也可以使用迭代方式为每个项构建相应的HTML代码。
$each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第1个参数，
以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个位对象的成员或数组的索引，第2个为对应变量或内容。
$(function(){
 $('#send').click(function(){
    $.getJSON('test.json',function(data){
      $('#resText').empty();
      var html='';
      $each(data,functioin(commentindex,comment){
        html+='<div class="comment"><h6> '
        +comment['username']+':</h6><p class="para">'
        +comment['content']+'</p></div>';
      });
     $("#resText").html(html);
    }) 
 })
})

出处：http://www.cnblogs.com/liuyong/

转载于:https://www.cnblogs.com/moyiqun/archive/2013/06/06/3121170.html

jQuery 学习笔记之十 (jQuery ajax )相关推荐

  1. JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理

    今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

  2. jQuery 学习笔记之二 (jQuery代码风格)

    jquery 学习之代码风格 对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...

  3. jQuery 学习笔记之二 (jQuery代码风格)

    jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...

  4. Jquery学习笔记：获取jquery对象的基本方法

    jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...

  5. jQuery学习教程二十: jQuery 遍历 - 后代

    后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...

  6. jQuery 学习笔记之十二 (选项卡)

    jQuery 实现的一个简单的选项卡. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. jQuery 学习笔记之十六 评分

    单击产品小图片时,上面对应的大图片需要切换,并且大图片的放大镜效果和遮罩效果也必须同时切换. 实现这个效果并不难,但为了使程序更加简单,需要为图片使用基于某种规则的命名. 例如为小图片命名blue_o ...

  8. jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)

    第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

  9. jQuery 学习笔记之九 (jQuery 图片提示 )

    案例研究 网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了.HTML 代码如下:<a href="#" ti ...

  10. jquery学习笔记（-）

    Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...

最新文章

  1. android ui 最新教程,Android更新UI的五种方式，androidui五种
  2. hbase或hadoop错误及解决方法
  3. GitHub 大热！也许会成为你心中的OCR开源工具NO1！
  4. springcloud alibab + sentinel1.8.1集成文档
  5. 自我认为挺全面的【Web Service渗透测试总结】
  6. hbuilderx简单网页代码_Python爬取网页数据
  7. 使用indent格式化代码
  8. javascript一些基础用法
  9. monkey测试_安卓测试之monkey
  10. ts获取服务器数据_怎么使用Satruts2实现页面列表数据导出到Excel表格
  11. Lombok的使用方法
  12. block--内存管理
  13. ant 时 --java.lang.NoSuchMethodError: org.apache.tools.ant.util.FileUtils.getFileUtils 解决方法
  14. Hello IDEA
  15. json字符串中的大括号转义传到后台_string.format格式化字符串中转义大括号“{}”...
  16. sqlserver中的函数
  17. 杰奇小说2.3独家定制版淡绿唯美模板自动采集关关采集器带WAP
  18. linux USB从设备使用gadget实现大容量存储设备
  19. caxa 二次开发 应用程序框架分析
  20. iOS @available 和 #available 的用法

热门文章

  1. EditPlus v2.20 Build 205
  2. Docker镜像的创建、存出、载入
  3. ubuntu10.04 MTK开发环境
  4. Nginx 凭啥并发数可以达到 3w？
  5. 别乱提交代码了，你必须知道的 Git 分支开发规范！
  6. 可怕！你没看错，这次确实是纯手工实现一个MyBatis框架！
  7. 微软终于屈服和妥协：宣布加入 OpenJDK，贡献构建Java生态
  8. 为什么 String hashCode 方法选择数字31作为乘子？
  9. 今天我必须要全网曝光这几个公众号
  10. 原来有这么多的国产“自主研发”早就把开源项目抄哭了