学习jQuery中的Ajax——$.get()方法

load()方法通常用来从Web服务器上获取静态的数据文件。

在项目中，如果要传递参数给服务器中的页面，那么可以使用$.get()或$.post(),$.ajax()。

注意：$.get()和$.post()是jQuery中的全局函数，而在此之前讲的jQuery方法都是对jQuery对象进行操作的。

 

$.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

$(function(){

            $("#send").click(function(){

                  $.get("get1.jsp", {

                     username :  encodeURI( $("#username").val() ) ,

                     content :   encodeURI( $("#content").val() )

                  }, function (data, textStatus){

$("#resText").html(decodeURI(data)); // 把返回的数据添加到页面上

                  });

            })

       })

$.get()方法的回调函数只有两个参数,代码如下：

function(data, textStatus){

    // data：请求返回的内容，可以是XML文档、JSON文件、HTML片段等

    //textStatus：请求状态：success,error,notmodified,timeout 4种

}

注意： 回调函数只有当数据成功返回(success)后才被调用，这点与load()方法不一样。

 

数据格式

HTML片段：

 

 

XML文档：

    注意：由于期待服务器端返回的数据格式是XML文档，因此需要在服务器端设置Content-Type类型，代码如下：

    response.setContentType("text/xml");

JSON文件：

get3.jsp文件的内容：

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

<%

  String username = request.getParameter("username");

  String content = request.getParameter("content");

  out.println("{ username : '"+username+"' , content : '"+content+"'}");

%>

 

 

get3.html文件：

<script type="text/javascript">

       $(function(){

            $("#send").click(function(){

                  $.get("get3.jsp", {

                     username : encodeURI($("#username").val()),

                     content :  encodeURI($("#content").val())

                  }, function (data, textStatus){

                        var username=data.username;

                        var content=data.content;

                        username=decodeURI(username);

                        content=decodeURI(content);

                        var txtHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+

                        content+"</p></div>";

                        $("#resText").html(txtHtml);

                  },"json");    //”json”代表期待服务器端返回的数据格式

            })

       })

    </script>

 

 

学习总结：

    在不需要与其它应用程序共享数据时，使用HTML片段来提供返回数据最简单；

如果数据需要重用，那么JSON文件是不错的选择，它在性能和文件大小方面具有优势；

而当远程应用程序未知时，XML文档时明智的选择，它是WEB服务领域的”世界语”。