1, ajax-get request demo
1 <script> 2 document.getElementById("buttonname").onclik=function(){ 3 //发送AJAX查询请求 4 var request=new XMLHttpRequest(); 5 request.open("GET","xxxx.jsp?name="+document.getElementById("name").value + "&old="+document.getElementById("old").value); 6 request.send(); 7 request.onreadystatechange = funtion(){ 8 if(request.readState===4){ 9 if(request.status===200){ 10 document.getElementById("div").innetHTML= request.responseText; 11 }else{ 12 alert("请求错误"+request.status); 13 } 14 } 15 } 16 17 } 18 </script>
2, ajax-post requests demo
1 1 <script> 2 2 document.getElementById("buttonname").onclik=function(){ 3 3 //发送AJAX查询请求 4 4 var request=new XMLHttpRequest(); 5 5 request.open("POST","xxxx.jsp");
var data="name="+document.getElementById("name").value
+"&old="+document.getElementById("old").value;
requeat.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
6 6 request.send(data); 7 7 request.onreadystatechange = funtion(){ 8 8 if(request.readState===4){ 9 9 if(request.status===200){ 10 10 document.getElementById("div").innetHTML= request.responseText; 11 11 }else{ 12 12 alert("请求错误"+request.status); 13 13 } 14 14 } 15 15 } 16 16 17 17 } 18 18 </script>
3, ajax request - JSON format
{
"success":"true",
"msg":"text"
}
1 <script>
2 document.getElementById("buttonname").onclik=function(){
3 //发送AJAX查询请求
4 var request=new XMLHttpRequest();
5 request.open("GET","xxxx.jsp?name="+document.getElementById("name").value + "&old="+document.getElementById("old").value);
6 request.send();
7 request.onreadystatechange = funtion(){
8 if(request.readState===4){
9 if(request.status===200){
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById("div").innetHTML= data.msg;
}else{
12 document.getElementById("div").innetHTML= data.msg;
13 }
10 }else{
12 alert ( "Error Request" + data.msg); 13 is}
15 } 16 17 } 18 </script>
4, jQuery achieve ajax
jQuery.ajax([settings])
type: type, post or get, to get the default
url: Please send address
data: is an object that transmits the data to the server along with a request
dataType: expected data type returned by the server. If not specified, jQuery will automatically be intelligent information according to the HTTP MIME package is determined, we generally use json format, it can be set to "json"
success: a method is, after a successful callback request. Incoming data is returned, and the code string contains successful
error: is a method, this function is called if the request fails. Incoming XMLHttpRquest objects
example:
$(document).ready(funtion(){
$("#name").click(funtion(){
$.ajax({
type:"GET",
url:"XXX.jsp?name="+$("#name").val(),
dataType:"json",
success:funtion(data){
if(data.success){
$("#name").html(data.msg);
}esle{
$ ( "# Name") html ( "made a mistake" + data.msg).;
}
},
error.funtion(jqXHR){
alert ( "wrong" + jqXHR.status);
}
});
});
}
)