使用 Ajax 加载部分网页

使用 Ajax 加载部分网页，你需要在 script 标签中发起请求，指定请求路径如 ajaxServlet ，响应信息同样在 script 标签中处理。

一、 在 JavaScript 中发起请求并处理响应

参考源码：

// 1. 创建核心对象 XMLHttpRequest 
var xmlhttp;
if (window.XMLHttpRequest){
          
   
	// 所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。
	xmlhttp=new XMLHttpRequest();
}else{
          
   
	// 老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象创建
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 建立连接 xmlhttp.open(请求方法,URL,async)
xmlhttp.open("GET","ajaxServlet?username=tom",true);
// 3. 发送请求
xmlhttp.send();
// 4. 接收并处理来自服务器端的响应结果
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange = function(){
          
   
	//判断readyState就绪状态是否为4，判断status响应状态码是否为200
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
          
   
		//获取服务器的响应结果
		var responseText = xmlhttp.responseText;
		alert(responseText);
	}
}

建立连接 xmlhttp.open(请求方法,URL,async) ：

请求方法有 GET / POST 。 URL 可以是 servlet 或 .jsp 资源，参数也可以放在使用 POST 方法提交时的 xmlhttp.send() 中。 async ，是否使用异步请求。

二、 jQuery 优化异步请求代码

jQuery 中实现 Ajax 有三种方法：$.ajax() 、$.get() 、$.post() 。

参考源码：

1. 使用 $.ajax() 发送异步请求

$.ajax({
          
   
	url:"ajaxServlet1111" , // 请求路径
	type:"POST" , //请求方式：get或者post
	//data: "username=jack&age=23",
	data:{
          
   "username":"jack","age":23},
	success:function (data) {
          
   
		alert(data);
	},//响应成功后的回调函数
	error:function () {
          
   
		alert("出错啦...")
	},//表示如果请求响应出现错误，会执行的回调函数
	dataType:"text"//设置接收到的响应数据的格式
});

请求参数建议使用JSON数据：data:{"username":"jack","age":23}，而非字符串 data: "username=jack&age=23" 。

接收到的响应数据的格式，包括 xml、html、text、script、json、jsonp 。

2. 使用 $.get() 发送 get 请求

function  fun() {
          
   
	$.get("ajaxServlet",{
          
   username:"rose"},function (data) {
          
   
		alert(data);
	},"text");
}

<input type="button" value="使用$.get()发送异步get请求" onclick="fun();">

3. 使用 $.post() 发送 post 请求

function  fun() {
          
   
	$.post("ajaxServlet",{
          
   username:"rose"},function (data) {
          
   
		alert(data);
	},"text");
}

<input type="button" value="使用$.post()发送异步post请求" onclick="fun();">