摘要：原生操作異步請求第一步創建對象判斷用戶的瀏覽器類型，決定使用何種方式對象感知狀態，當狀態改變是會觸發事件當前狀態為時，數據接收完畢輸出響應信息設置傳遞的信息小明處理中文亂碼第二步創建一個請求，并設置請求地址及異步請求方式第三步發送請求異步請

原生ajax操作

JavaScript 異步 GET請求

    // 第一步：創建ajax對象
    //判斷用戶的瀏覽器類型，決定使用何種方式ajax對象
    if (typeof ActiveXObject != "undefined") {
        var version = [
            "Msxml2.XMLHTTP.6.0",
            "Msxml2.XMLHTTP.5.0",
            "Msxml2.XMLHTTP.3.0",
            "Msxml2.XMLHTTP",
            "Microsoft.XMLHTTP"
        ];
        for (var i = 0; i <= version.length; i++) {
            try {
                var obj = new ActiveXObject(version[i]);
                if (typeof obj != "undefined") {
                    break;
                }
            } catch(ex) {
 
            }
        }
    } else {
        var obj = new XMLHttpRequest();
    }
    
    // 感知ajax狀態，當ajax狀態改變是會觸發事件onreadystatechange
    obj.onreadystatechange = function(){
        // 當前狀態為4時，數據接收完畢
        if (obj.readyState == 4 && obj.status == 200) {
            // 輸出響應信息
            alert(obj.responseText);
        }
    }
 
    // 設置GET傳遞的信息
    var name = "小明";
    // 處理中文亂碼
    name = encodeURIComponent(name);
    // 第二步：創建一個HTTP請求，并設置"請求地址"及異步請求方式
    obj.open("get", "./test.php?fname=" + name + "&addr=beijing", true);
    // 第三步：發送請求
    obj.send();

JavaScript 異步 POST請求

        // 創建Ajax對象
        //判斷用戶的瀏覽器類型，決定使用何種方式ajax對象
        if (typeof ActiveXObject != "undefined") {
            var version = [
                "Msxml2.XMLHTTP.6.0",
                "Msxml2.XMLHTTP.5.0",
                "Msxml2.XMLHTTP.3.0",
                "Msxml2.XMLHTTP",
                "Microsoft.XMLHTTP"
            ];
            for (var i = 0; i <= version.length; i++) {
                try {
                    var obj = new ActiveXObject(version[i]);
                    if (typeof obj != "undefined") {
                        break;
                    }
                } catch(ex) {
 
                }
            }
        } else {
            var obj = new XMLHttpRequest();
        }
        
        // 感知Ajax狀態，當Ajax狀態改變時會觸發事件onreadystatechange
        obj.onreadystatechange = function(){
            // 當前狀態為4時，數據接收完畢
            if (obj.readyState == 4 && obj.status == 200) {
                // 輸出響應信息
                alert(obj.responseText);
            }
        }
 
        // 創建一個http請求，并設置“請求地址”及異步請求方式
        obj.open("post", "./test.php");
        // 設置HTTP頭協議信息
        obj.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        var info = "fname=" + "小明" + "&addr=beijing";
        // 發送請求
        obj.send(info);

jQuery-ajax操作

jQuery 異步 GET請求

// 1.直接請求
// $(function(){
//     $.ajax("./test.php", {
//         data:{name:"tom",age:23},
//         success:function(msg){
//             alert(msg);
//         }
//     });
// });
 
 
// 2.配置setting參數請求
// $(function(){
//     $.ajax({
//         type:"GET",
//         url:"./test.php",
//         data:{name:"tom", age:23},
//         success:function(msg){
//             alert(msg);
//         }
//     });
// });
 
 
// 3.通過$.ajaxSetup()方法預先設置全局參數
// $(function(){
//     // 預先設置全局參數
//     $.ajaxSetup({
//         type:"GET",
//         url:"./test.php",
//         data:{name:"tom",age:23},
//         success:function(msg){
//             alert(msg);
//         }
//     });
//     // 執行ajax操作，使用全局函數
//     $.ajax();
// });
 
// 4.利用$.get()方法請求
//只發送get請求
// $(function(){
//     $.get("./test.php");
// });
 
// 發送get請求并接受返回結果
// $(function(){
//     $.get("./test.php", function(msg){
//         alert(msg);
//     });
// });
 
// 發送請求并傳遞數據
// $(function(){
//     $.get("./test.php", {name:"tom",age:23}, function(msg){
//         alert(msg);
//     });
// });
 
// 發送get請求并傳遞數據，接受返回結果，顯示返回格式
// $(function(){
//     $.get("./test.php", {name:"tom",age:23}, function(msg){
//         alert(msg.name + " " + msg.age);
//     }, "json");
// });
 
// 使用$.getJSON()可以實現同樣的功能
$.getJSON("./test.php", {name:"tom", age:23}, function(msg){
    alert(msg.name + " " + msg.age);
});

jQuery 異步 POST請求

    
    


 
Ajax無刷新評論

    
姓名：
    
評論：



 

jQuery-ajax&php跨域請求問題

第一種方法JSONP

注意：JSONP只支持get請求

    dataType: "jsonp",
    jsonp: "callback",

例如

        $.ajax({
            type: "GET",
            url: "http://127.0.0.1/ajax2/serverjsonp.php?number=" + $("#keyword").val(),
            dataType: "jsonp",
            jsonp: "callback",
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出現錯誤：" + data.msg);
                }
            },
            error: function(jqXHR){
               alert("發生錯誤：" + jqXHR.status);
            },
        });

$jsonp = $_GET["callback"];
echo $jsonp . "({"success":false,"msg":"參數錯誤"})";  //輸出的字符串前面要拼接上jsonp

第二種方法XHR2

注意：其他瀏覽器都支持，但是IE必須得IE10以上，只需要服務端接口加上以下頭信息

header("Access-Control-Allow-Origin:*");  //允許所有訪問
header("Access-Control-Allow-Origin", "http://my.domain.cn:8080");  //只允許特定域名訪問
header("Access-Control-Allow-Methods:POST,GET");    //允許跨域請求的方法，可以做限定
header("Access-Control-Allow-Credentials:true");    //請求的時候是否帶上cookie信息

JavaScript-ajax請求xml數據

xml示例

    
        wendy
        35
        Santa Fe
    
    
        Yaphet
        32
        Balchik
    
    
        Isaiah
        35
        Caldera
    

js示例

    
    
    


    
Ajax獲取XML信息