使用jquery来完成AJAX操作

jQuery对Ajax操作进行了封装，在jQuery中最底层的方法是$.ajax()，第二个是load()，$.get()和$.post()，第三层是$.getscript()和$.getJSON()。

　　load()方法

　　-load()方法是jquery中最为简单和常用的ajax方法，能载入远程的HTML并插入到DOM中，它的结构是：load(url [，data][，callback])；

　　url　　　　　string　　　　　　请求HTML页面的URL地址

　　data可选　　object　　　　　　发送到服务器的key/value数据

　　callback　　function　　　　　　请求完成时的回调函数，无论请求成功或失败

　　-程序员只需要使用jquery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递更给load()方法即可

　　细节

　　-如果需要加载目标HTML页面内的某些元素，则可以通过load()方法的url参数来达到目的，通过url参数指定选择符，就可以方便的从加载过来的HTML文档中选出所需要的内容，load()方法的url参数的语法结构为“url selector”(注意：url和选择器之间有一个空格)

　　-传递方式：load()方法的传递参数根据data来自动自定，如果没有参数，采用GET方式传递，否则采用POST方式

　　-对于必须在加载完才能继续的操作，load()方法提供了回调函数，该函数由三个参数：代表请求返回内容的data；代表请求状态的textStatus对象和XMLHttpRequest对象

　　-laod()方法只能用于 txt和html 数据传输

<body>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
         //使用jquery来操作Ajax
         $("a:first").on("click",function(){
             var url=this.href;   //直接填写url就行  默认方式是get
 
             $("#show").load(url);
             return false;
         });
        });
 
    </script>
 
<ul>
    <li><a href="content1.txt">content</a></li>
    <li><a href=""></a>container</li>
    <li><a href=""></a>conmand</li>
 
</ul>
    <div id="show"></div>
 
</body>

    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
         //使用jquery来操作Ajax
         $("a:first").on("click",function(){
             //<h2><a href="">www.zhongguo.com</a></h2>
             //如果只想要a标签  可以这么写
             var url=this.href+" a";  
 
             $("#show").load(url);
             return false;
         });
        });
 
    </script>

    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
         //使用jquery来操作Ajax
         $("a:first").on("click",function(){
             var data={"time":new Date()};  //post请求JSON格式，清理缓存
             //<h2><a href="">www.zhongguo.com</a></h2>
             //如果只想要a标签  可以这么写
             var url=this.href+" a";  
 
             $("#show").load(url,data);
             return false;
         });
        });
 
    </script>

　　$.get() $.post方法

　　$.get()方法使用GET方式来进行异步请求，它的结构是：$.get(url,[,data][,callback][,type]);

　　参数名称　　　　　　　　　　类型　　　　　　　　　　说明

　　url　　　　　　　　　　　　string　　　　　　　　　　请求HTML页面的url地址

　　data(可选)　　　　　　　　　object　　　　　　　　　　发送到服务器的key/value数据作为QueryString

　　　　　　　　　　　　　　　　　　　　　　　　　　　　附加到请求url中

　callback(可选)　　　　　　　　　　function　　　　　　　　载入成功时，回调函数（只有当response返回

　　　　　　　　　　　　　　　　　　　　　　　　　　　　状态时，success才调用该方法）

　　type （可选）　　　　　　　　string　　　　　　　　　服务器返回内容的格式，包括 xml、html json

　　　　　　　　　　　　　　　　　　　　　　　　　　　　script text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("a:first").on("click",function(){
                var url=this.href;
                //解析xml数据格式使用$.get()，其中返回的对象在回调函数function中 a
                $.get(url,function(a){
                    //获取a子元素from的文本
                    var name=$(a).find("from").text();
                    //添加到DIV中
                    $("#show").append(name);
                });
 
                return false;
            });
        });
    </script>
 
<ul>
    <li><a href="content3.xml">content</a></li>
    <li><a href=""></a>container</li>
    <li><a href=""></a>conmand</li>
</ul>
    <div id="show"></div>
</body>
</html>

　　$.post()方法和$.get()方式参数都是一样的只是请求不一样一个是GET 一个是POST

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("a:first").on("click",function(){
                var url=this.href;
                //解析xml数据格式使用$.get()，其中返回的对象在回调函数function中 a
                $.post(url,function(a){
                    //获取a子元素from的文本
                    var name=$(a).find("from").text();
                    //先清空div中的元素  之后在添加元素，防止多次点击的时候重复添加
                    $("#show").empty().append(name);
                });
 
                return false;
            });
        });
    </script>
 
<ul>
    <li><a href="content3.xml">content</a></li>
    <li><a href=""></a>container</li>
    <li><a href=""></a>conmand</li>
</ul>
    <div id="show"></div>
</body>
</html>

　　$.getJSON()方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("a:first").on("click",function(){
                var url=this.href;
 
                $.getJSON(url,function(a){
                    //getJSON 返回的是json格式的数据，原生的js，不需要解析，而且也不需要返回jquery对象
                    //返回的xml对象，jquery要是想使用，必须转换jquery对象
                    //获取a子元素from的文本
                    var name=a.email;
                    //先清空div中的元素  之后在添加元素，防止多次点击的时候重复添加
                    $("#show").empty().append(name);
                });
 
                return false;
            });
        });
    </script>
 
<ul>
    <li><a href="content.js">content</a></li>
    <li><a href=""></a>container</li>
    <li><a href=""></a>conmand</li>
</ul>
    <div id="show"></div>
</body>
</html>