使用 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()
。
参考源码:
- 使用 $.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 。
- 使用 $.get() 发送 get 请求
function fun() {
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
<input type="button" value="使用$.get()发送异步get请求" onclick="fun();">
- 使用 $.post() 发送 post 请求
function fun() {
$.post("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
<input type="button" value="使用$.post()发送异步post请求" onclick="fun();">