ajax發送GET和POST請求

1、ajax-get請求demo

<script>
document.getElementById("buttonname").onclik=function(){
    //發送AJAX查詢請求
    var request=new XMLHttpRequest();
    request.open("GET","xxxx.jsp?name="+document.getElementById("name").value + "&old="+document.getElementById("old").value);
　　request.send();
　　request.onreadystatechange = funtion(){
　　　　if(request.readState===4){
　　　　　　if(request.status===200){
　　　　　　　　document.getElementById("div").innetHTML= request.responseText;
　　　　　　}else{
　　　　　　　　alert("請求錯誤"+request.status);
　　　　　　}
　　　　}
　　}

}
</script>

2、ajax-post請求demo

 1 <script>
 2 document.getElementById("buttonname").onclik=function(){
 3     //發送AJAX查詢請求
 4     var request=new XMLHttpRequest();
 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 　　request.send(data);
 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>

3、ajax請求-返回JSON格式

{

　　"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("請求錯誤"+data.msg);
13 　　　　　　}

15 　　}
16 
17 }
18 </script>

4、jQuery實現ajax

　　jQuery.ajax([settings])

　　　　type：類型，post或get，默認為get

　　　　url：發送請的地址

　　　　data：是一個對象，連同請求發送到服務器的數據

　　　　dataType：預期服務器返回的數據類型。如果不指定，jquery將自動根據HTTP包MIME信息來智能判斷，一般我們采用json格式，可以設置為"json"

　　　　success：是一個方法，請求成功后的回調函數。傳入返回的數據，以及包含成功代碼的字符串

　　　　error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRquest對象

　　例子：

　　　　$(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("發錯了"+data.msg);

　　　　　　　　　　　　}

　　　　　　　　　　},

　　　　　　　　　　error.funtion(jqXHR){

　　　　　　　　　　　　alert("出錯了"+jqXHR.status);

　　　　　　　　　　}

　　　　　　　　　});

　　　　　　});

　　　　}

　　)

jquery.ajax示例

$(function(){
        //請求參數
        var list = {};
        //
        $.ajax({
            //請求方式
            type : "POST",
            //請求的媒體類型
            contentType: "application/json;charset=UTF-8",
            //請求地址
            url : "http://127.0.0.1/admin/list/",
            //數據，json字符串
            data : JSON.stringify(list),
            //請求成功
            success : function(result) {
                console.log(result);
            },
            //請求失敗，包含具體的錯誤信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

 

//JSON.stringify 將對象轉為字符串
　　var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
　　var myJSON = JSON.stringify(obj);
//JSON.parse 將字符串轉化為對象
　　var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');