Ajax数据交互扩展(二)

使用Ajax返回HTML内容

前文介绍的Ajax实现中，复杂结构的响应数据有服务器通过JSON格式发送，客户端接收后再经过JavaScript提起数据并构建HTML文档结构进行展示。
除此之外，服务器端还可以直接产生HTML格式的响应结果，客户端则可以将响应结果直接套用在现有页面中。下面了解下。

示例：

$(document).ready(function(){
	function initNews(){//使用Ajax技术获取新闻列表数据
		$.ajax({
			"url":"../util/news",
			"type":"GET",
			"data":"opr=list",
			"dataType":"html",
			"success":process
		});
	}
	function process(data){//展示新闻列表
		$("#opt>ul").html(data);
	}
	......//其他代码
});

在回调函数中没有对data做任何的处理，而是将其直接设置成列表的内容。
调整代码示例：

List<News> list =newService.findAllNews();
News news=null;
StringBuffer sb=new StringBuffer("");
for(int i=0;i<list.size();){
	news=list.get(i);
	sb.append("<li>"+....+"</li>");
}
out.print(sb);

Servlet中按照页面展示需要，直接生成列表

• 内容，客户端可以直接使用。或者为了避免在Servlet中编写大量构建HTML内容的代码，还可以将查询结果发送至专门的展示页面生成HTML内容。

• .load()方法

  对于通过Ajax请求直接加载HTML内容到当前页面的使用场景，jQuery也提供了一个.load()方法作为简易实现。该方法通过发送Ajax请求从服务器加载数据，并把响应的数据直接添加到指定的元素中。
  语法：$(selector).load(url[,data][,complete]);

  表.load()方法常用参数。
  常用参数如下表：

  参数	类型	说明
  url	String	必选，规定将请求发送到哪个URL
  data	PlainOBject 或 String	可选，规定连同请求发送到服务器的数据
  complete	Function(String responseText,String textStatus,jqXHR jqxhr)	可选，对每个匹配的元素设置完内容后都会触发该函数，参数 responseText可选：可选，服务器返回的结果数 参数textStatus ：可选，描述请求状态的字符串 参数：jqxhr：可选，jqXHR 是XMLHttpRequest 的超集

  该方法默认使用GET方法发送请求。除非提供的data参数时一个对象，则使用POST方法发送。该方法是最简单的从服务获取数的Ajax()方法，它几乎与$.get(url,data,success)方法等价。不同的是它不是全局函数，而是针对与选择器匹配的元素执行，并且它拥有匿名的回调函数，当请求成功后，.load()方法自动将返回的数据设置为匹配元素的HTML内容。

  示例：

  $(documnet).ready(function(){
  	function initNews(){//使用Ajax技术获取新闻列表
  		$("#opt>ul").load("../util/news","opr=list");
  	}
  	initNews();//执行新闻列表初始化工作
  	...//省略其他部分代码
  
  });
  

  以上代码实现了异步发送GET请求到服务器端，并且当服务器端成功返回列表数据时，自动将HTML格式的结果隐式地添加到调用load(）方法的JQuery对象中。上面代码部分等价下面：

  $.get("../util/news","op",function(data)){
  	$("#op>ul").html(data);
  });
  

  知识扩展 .load() 方法还可以仅加载远程文档的某个部分，通过url参数的特殊语法可以实现。url参数中可以通过空格连接决定加载内容的jQuery选择器，如下代码：

  $("#result").load("article.html #target");
  

  jQuery会取回article.html的内容，然后解析返回文档，查找id为target的元素。该元素连同其内容会被插入id的result的元素，所取回文档的其他部分则被丢弃。

  小结：

  以上介绍的 $.get(), $.post(), $.getJSON(), .load()等常用Ajax方法都是基于 $.ajax(）方法封装的，相比于 $.ajax()方法更加简洁，方便。通常情况下，对一般的Ajax功能需求使用以上Ajax方法即可满足，如果需要更多的灵活性，可以使用 $.ajax()方法指定更多参数。