servlet和jsp数据交互六：jQuery中的Ajax-蜗牛学苑

16
07月

servlet和jsp数据交互六：jQuery中的Ajax

上一期博客分别介绍了js实现Ajax和jQuery的Ajax()方法实现Ajax。随着WEB前端技术的发展，开发中很少使用纯js实现Ajax，取而代之的是jQuery的Ajax实现。

上一期博客分别介绍了js实现Ajax和jQuery的Ajax()方法实现Ajax。随着WEB前端技术的发展，开发中很少使用纯js实现Ajax，取而代之的是jQuery的Ajax实现。jQuery的Ajax实现除了上期博客中介绍的Ajax()方法外，还有load()、$.get()、$.post()、$.getScript()、$.getJson()等方法。

load()方法是jQuery中最为简单的方法，使用它可以远程载入HTML代码，并插入DOM中，它的语法结构为：load(url [, data] [, callback])。参数url的类型是String，它表示请求的HTML页面的URL地址；data参数是可选参数，类型为Object，它表示发送到服务器的key / value数据；callback参数也是可选的，类型是函数，该函数将在请求完成是触发执行，不管请求失败还是成功，都将执行。下面例一给出load()方法的核心代码：

// 页面标签

<body>

<p id="show">请求数据如下：</p>

</div>

</body>

// js代码，包含在ajaxMethod方法内

// load() 方法

var url = "jsp/conHtml.html";

$("#showText").load(url, function(){

alert("html文件载入成功");

});

该例子中，conHtml.html的内容会被加载到id为showText的页面元素中。参数url后面可以添加jQuery选择器，选择器和 url 之间需要一个空格。需要注意一点：load() 方法不是全局的。回调函数有三个参数，分别是请求返回的内容responseText，请求状态textStatus和XMLHttpRequest对象。

$.get()方法可以传递参数给服务器，它是jQuery的全局函数。$.get()方法使用GET方式来进行异步请求，它的语法结构：$get(url [, data] [, callback] [,type])。其参数url类型为字符串型，指向请求的HTML文件的url地址；参数data（可选）类型为Object，表示发送到服务器的键值对数据，data会被附加到url中；callback（回调函数，可选）是Function类型，当请求成功时（Response的返回状态是success）才调用改方法，请求结果和状态会自动传递给改方法；type（可选）参数类型为String，它表示服务器端返回内容的格式（格式包括xml、html、json、text等）。$.get()方法的回调函数有两个参数，data和textStatus，分别表示请求返回的内容和请求状态。下面例二展示如何从服务器请求一个html片段。

例二：

// 页面标签

<body>

<h3>请求数据如下：</h3>

</div>

</body>

// js代码

function ajaxMethod(){

// $.get() 方法

var url = "ajaxDemo";

var data = {name:"张三",sex:"M",age:22};

$.get(url, data,

function(data, textStatus){

//返回数据为html片段，不需要处理，可以直接添加到页面

$("#show").html(data);

}, "html" // type 参数一般不用设置

);

}

// servlet代码

response.setContentType("text/html");

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

out.println(" <span id=\"text\">返回html格式数据</span>");

out.flush();

out.close();

如果返回到前端的汉字显示乱码，需要在返回前添加response.setCharacterEncoding("utf-8")可以避免前端取出的中文数据乱码。返回html格式数据处理起来很方便，但是这种数据格式不一定能够在其他的web引用程序中得到重用。下面例三展示如何获取XML文档。由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理。处理XML文档与处理HTML文档类似，也可以使用常规的attr()、find()、filter()以及其他方法。

例三：

// 页面标签和例二一样，此处省略

// js 代码

function ajaxMethod(){

// $.get() 方法

var url = "ajaxDemo";

var data = {name:"张三",sex:"M",age:22};

$.get(url, data,

function(data, textStatus){

//返回数据为xml文档

var id = $(data).find("comment").attr("id");

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment").text();

alert(content);

var html = "<p id='" + id +"'>" + username + "," + content + "</p>";

$("#show").html(html);

}, "xml" // type 参数一般不用设置

);

}

// servlet代码

request.setCharacterEncoding("utf-8");

response.setContentType("text/xml");

response.setCharacterEncoding("utf-8");

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

System.out.println(name);

PrintWriter out = response.getWriter();

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

out.println("<comment id=\"userid\" username=\"张三\">张三大学本科毕业，后学习于成都蜗牛学院!</comment>");

out.flush();

out.close();

代码request.setCharacterEncoding("utf-8")用来设置请求对象中值的字符集，解决后台取出中文值乱码问题。返回数据格式为XML文档，其体积相对较大，与其他文件格式相比，解析和操作他门的速度较慢，但是XML格式数据的可移植性非常强，因此这种格式提供的数据的重用行将极大提高。

由于XML文档体积较大，解析相对比较困难和速度较慢，因此在应用中常常用到JSON文档。标准JSON对象数据格式为{"sex":"男2","age":32,"name":"小马驹2","addr":"成都2"}。想要了解更多的JSON文档知识，可以访问http://json.org/网站。$.get()方法提交到后台，返回的JSON格式数据不能像HTML文档一样直接插入到前端页面中，需要作处理才能将数据添加到主页面中。下例四介绍解析JSON数据。

例四：

// 页面标签省略

// js代码

function ajaxMethod(){

var url = "ajaxDemo";

var data = {name:"张三",sex:"M",age:22};

$.get(url, data,

function(data, textStatus){

var html = "获取到的人员姓名：";

alert(data.length);

//返回数据为JSON文档(对象和数组)

$.each(data, function(index, item){

//this为当前访问的对象，和item一样

html += this.name + ", ";

});

$("#show").html(html);

}, "json"

);

}

// servlet代码

request.setCharacterEncoding("utf-8");

// response.setContentType("text/xml");

// response.setContentType("text/html");

response.setContentType("text/json");

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

People p1 = new People("小马驹0", "男0", "成都0", 30);

People p2 = new People("小马驹1", "男1", "成都1", 31);

People p3 = new People("小马驹2", "男2", "成都2", 32);

List<People> list = new ArrayList<People>();

list.add(p3);

list.add(p2);

list.add(p1);

// list集合转成JSON数组需要三方包支持

JSONArray ja = JSONArray.fromObject(list);

System.out.println(ja.toString());

out.println(ja);

out.flush();

out.close();

例四中的$.each(data, function(index, item){}是jQuery的全局遍历函数，详情请查看jQuery的API。JSON数据格式要求非常严格，必须是{"sex":"男2"}，不能是{"sex":"男2"}，甚至{‘sex’:"男2"}在js（JavaScript）中也可能导致整个js脚本停止运行。

通过$.get()方法的这几个例子对数据格式的使用可以看出，在不需要与其他应用程序共享数据的时候，使用HTML格式返回数据处理起来最为简单；如果需要重用数据，那么JSON格式数据是不错的选择，它文件小，性能好；当远程应用程序未知时，最好使用XML数据格式，因为它在常用的应用程序中都可以解析，就像英语一样。

$.post()方法的使用方式和$.get()方法一样，但他们还是有一定的区别，例如get请求传递参数可见，还会被浏览器缓存起来，而post请求则不会；另外，post请求传递参数的数量在理论上是没有限制的，而get方法则有限制，一般大小不超过2KB。$.post()方法的使用方式请参考$.get()方法。

$.getScript()方法允许用户加载远程的.js文件，目的是解决.js文件按需添加问题，因为有的js文件并不是一开始进入页面就需要加载的，或者一些操作不需要该js文件。其一般语法结构为：$.getScript(url , function(){ })。加载完成的.js文件不需要处理，它会自动执行。由于使用方式比较简单，这里就不举例演示。

在jQuery的Ajax方法中有一个与$.getScript()方法用法相同的方法 --- $.getJSON() 。该方法用来加载远程的.JSON文件，一般语法格式为：$.getJSON(url, function(data){ })。回调函数中的data表示请求的数据，可以使用for循环或者$.each()函数对其遍历，数据的解析方式请参考例四。

如果需要实现更复杂的Ajax功能，请使用$.ajax()，详情参考：http://www.woniuxy.com/blog/1109.html。

蜗牛学院，只为成就更好的你！

你！敢不敢！用你三个月的时间，换你不一样的未来！

赶快关注蜗牛学院官方微信，了解更多信息吧！

上一篇:蜗牛学院联合巴人互动，重磅推出“宝贝鱼计划”，践行互联网产品+团队一站式人才孵化模式

下一篇:立秋|重庆校区迎来了一批新朋友，他们为同一个梦想而来

热门推荐
最新文章

学科分类

页面导航