在Java后端项目的开发过程中,由于涉及前端相关的东西,会经常遇到ajax请求的形式,学习一下,可以在开发后端的过程中更加的流畅。
ajax:Asynchronous JavaScript and XML
1、原始方法请求
function load(){
var xmlhttp;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp= newXMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp= newActiveXObject("Microsoft.XMLHTTP");
}
//设置回调函数
//onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
xmlhttp.onreadystatechange= function(){
if (xmlhttp.readyState ==4 && xmlhttp.status == 200) {//获得了请求数据
var expertinfolist = xmlhttp.responseText;
//发送请求数据到myDiv document.getElementById("myDiv").innerHTML=expertinfolist;
}
}
var url="expert_ZFTservlet?expert_name="+"tom";
//创建连接
xmlhttp.open("GET", url,true);
//发送请求
xmlhttp.send();
}
2 利用jQuery的请求
$.ajax({
type:'post',//方法类型
url:" expert_ZFTservlet?expert_name="+"曾攀",//请求地址
dataType:'json',//数据类型
data:{page:page},//请求到接口的对象
success:callback//请求成功处理函数
});
//返回函数
function callback(data){
alert(data); //获得请求返回对象;
}
三.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
四. 通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功!");
}
})
五.通过 HTTP GET 请求载入 JSON 数据。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});