文章目录
一、 在 JavaScript 中发起请求并处理响应二、 jQuery 优化异步请求代码
使用 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");
}
使用 $.post() 发送 post 请求
function fun() {
$.post("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
精彩内容
发表评论