Ajax——jQuery实现

一、load()方法

load() 方法师jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中。它的机构是：load(url[,data][,callback])

参数名称	类型	说明
url	String	请求HTML页面的URL地址
data（可选）	Object	发送到服务器的key/value数据,json格式
callback(可选)	Function	请求完成时的回调函数，无论请求成功或失败

①、方法细节

如果只需要加载目标HTML页面的某些元素，则可以通过load()方法的URL参数来达到目的。通过URL参数指定选择符，就可以方便的从加载过来的HTML文档中选出所需要的内容。load()方法的URL参数的语法结构为“url selector”(注意：url和选择器之间有一个空格)
传递方式：load()方法的传递参数根据参数data来自动自动。如果没有参数传递，采用GET方式传递，否则采用POST方式
对于必须在加载完才能继续的操作，load()方法提供了回调函数，该函数有三个参数：代表请求返回内容的data；代表请求状态的textStatus对象和XMLHttpRequest对象

②、load方法的Demo

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

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

    <script type="text/javascript">

      $(function(){

            $("a").click(function(){

                  //选择HTML片段，h2 元素节点下的a节点

                  var url=this.href+" h2 a";
　　　　　　　　　　　//json格式的参数

                  var args={"time":new Date()};

                  //任何一个html节点都可以使用load方法来加载Ajax，结果将直接插入html节点中

                  $("#details").load(url,args);

                return false;

                  });

            });

      </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.html">Andy</a></li>

           <li><a href="files/richard.html">Richard</a></li>

           <li><a href="files/jeremy.html">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

二、$.get()(或$.post())方法

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

参数名称	类型	说明
url	String	请求HTML页面的URL地址
data(可选)	Object	发送到服务器的key/value数据，附加到请求URL中，Json格式
callback(可选)	Function	载入成功时回调函数（只有当Response的返回状态是success时才调用该方法）自动将请求结果和状态传递给该方法
type（可选）	String	服务器返回内容的格式，包括XML，HTML，json,script,text和_default

$.get()方法的回调函数只有两个参数：data代表返回的内容，可以是XML文档，JOSN文件，HTML片段等；textstatus代表请求状态，其值可能为：success，error，notmodify和timeout 4种。

①、解析XML格式数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

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

  <script type="text/javascript">

      $(function(){

        $("a").click(function(){

            var url=this.href;

            var args={"time":new Date()};

            $.get(url,args,function(data){
　　　　　　　　　//将Dom对象转换为jQuery对象

                var name=$(data).find("name").text();

                var email=$(data).find("email").text();

                var website=$(data).find("website").text();
　　　　　　　　　//向父元素节点追加子节点前，先清空父元素

                $("#details").empty()

                        .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                        .append("<a href='"+website+"'>"+website+"</a>");

                });

            return false;

        });

      })

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.xml">Andy</a></li>

           <li><a href="files/richard.xml">Richard</a></li>

           <li><a href="files/jeremy.xml">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

②、解析JOSN格式数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

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

  <script type="text/javascript">

  //url:ajax请求的目标url

  //args:传递的参数：json类型

  //data:ajax响应成功后的数据，可能是xml,html,json

      $(function(){

        $("a").click(function(){

            var url=this.href;

            var args={"time":new Date()};

            //使用$.getJSON方法回调函数返回的数据是json对象

            $.getJSON(url,args,function(data){

                var name=data.person.name;

                var email=data.person.eamil;

                var website=data.person.website;

                $("#details").empty()

                        .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                        .append("<a href='"+website+"'>"+website+"</a>");

                });

            return false;

        });

      })

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.js">Andy</a></li>

           <li><a href="files/richard.js">Richard</a></li>

           <li><a href="files/jeremy.js">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

其他方式

$.get(url,args,function(data){

},"JSON")

$.post(url,args,function(data){

},"JSON")

巴特西

Ajax——jQuery实现

一、load()方法

①、方法细节

②、load方法的Demo

二、$.get()(或$.post())方法

①、解析XML格式数据

②、解析JOSN格式数据

最新文章

热门文章