码迷,mamicode.com
首页 > Web开发 > 详细

第十节(jQuery - AJAX )

时间:2015-01-24 11:33:53      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

第十节(jQuery - AJAX )

标签:

原文地址:http://www.cnblogs.com/Deng1185246160/p/4245477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!