第十节（jQuery - AJAX ）

浏览数：23 / 时间：2015年06月09日

1:jQuery - AJAX 简介


  AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新

 什么是 AJAX？

    AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
   
    简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示


 关于 jQuery 与 AJAX
   
   jQuery 提供多个与 AJAX 有关的方法。

   通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或    

   JSON - 同时您能够把这些外部数据直接载入网页的被选元素

2:
 
  用于通过 HTTP GET 或 POST 请求从服务器请求数据

  HTTP 请求：GET vs. POST
  
  两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
  
  GET - 从指定的资源请求数据
  
  POST - 向指定的资源提交要处理的数据
  
  GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
  
  POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据



例题：
js文件夹里的test.js的内容：
/*
$(function(){
    alert("亲爱的徒弟们，你就才是这个行业未来的精英，只有懂得坚持并且有梦想的人才是这个最可爱的人 ！");
    alert("太帅了 ！");
});

*/

<body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

    $.ajax({
        type:"get",
        url:"js/test.js",
        dataType:"script"
    });
</script>
</body>
///////////////////////////////////////////////////////////////////////

data文件夹里面的data.html的内容为
/*
[
    {name:"Ming",sex:"男"},
    {name:"小明",sex:"男"},
    {name:"keke",sex:"男"}
]
*/


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

    $.ajax({
        type:"get",
        url:"data/data.html",
        success:function(data){
            // alert(data);
            //$("p").text(data);
            var arr = eval(data);
            for(var i = 0; i < arr.length; i++){
                $("p").append("姓名："+arr[i].name+"------性别："+arr[i].sex+"<br /><br />");
            }
        }


    });


</script>

</body>