AJAX異步請(qǐng)求

macg0406 發(fā)布于2019-08-23 13:47 / 359人閱讀

摘要：原生操作異步請(qǐng)求第一步創(chuàng)建對(duì)象判斷用戶的瀏覽器類型，決定使用何種方式對(duì)象感知狀態(tài)，當(dāng)狀態(tài)改變是會(huì)觸發(fā)事件當(dāng)前狀態(tài)為時(shí)，數(shù)據(jù)接收完畢輸出響應(yīng)信息設(shè)置傳遞的信息小明處理中文亂碼第二步創(chuàng)建一個(gè)請(qǐng)求，并設(shè)置請(qǐng)求地址及異步請(qǐng)求方式第三步發(fā)送請(qǐng)求異步請(qǐng)

原生ajax操作

JavaScript 異步 GET請(qǐng)求

    // 第一步：創(chuàng)建ajax對(duì)象
    //判斷用戶的瀏覽器類型，決定使用何種方式ajax對(duì)象
    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狀態(tài)，當(dāng)ajax狀態(tài)改變是會(huì)觸發(fā)事件onreadystatechange
    obj.onreadystatechange = function(){
        // 當(dāng)前狀態(tài)為4時(shí)，數(shù)據(jù)接收完畢
        if (obj.readyState == 4 && obj.status == 200) {
            // 輸出響應(yīng)信息
            alert(obj.responseText);
        }
    }
 
    // 設(shè)置GET傳遞的信息
    var name = "小明";
    // 處理中文亂碼
    name = encodeURIComponent(name);
    // 第二步：創(chuàng)建一個(gè)HTTP請(qǐng)求，并設(shè)置"請(qǐng)求地址"及異步請(qǐng)求方式
    obj.open("get", "./test.php?fname=" + name + "&addr=beijing", true);
    // 第三步：發(fā)送請(qǐng)求
    obj.send();

JavaScript 異步 POST請(qǐng)求

        // 創(chuàng)建Ajax對(duì)象
        //判斷用戶的瀏覽器類型，決定使用何種方式ajax對(duì)象
        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狀態(tài)，當(dāng)Ajax狀態(tài)改變時(shí)會(huì)觸發(fā)事件onreadystatechange
        obj.onreadystatechange = function(){
            // 當(dāng)前狀態(tài)為4時(shí)，數(shù)據(jù)接收完畢
            if (obj.readyState == 4 && obj.status == 200) {
                // 輸出響應(yīng)信息
                alert(obj.responseText);
            }
        }
 
        // 創(chuàng)建一個(gè)http請(qǐng)求，并設(shè)置“請(qǐng)求地址”及異步請(qǐng)求方式
        obj.open("post", "./test.php");
        // 設(shè)置HTTP頭協(xié)議信息
        obj.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        var info = "fname=" + "小明" + "&addr=beijing";
        // 發(fā)送請(qǐng)求
        obj.send(info);

jQuery-ajax操作

自行下載并引入jquery:

jQuery 異步 GET請(qǐng)求

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

jQuery 異步 POST請(qǐng)求




    
    jquery-ajax發(fā)送post請(qǐng)求


 
Ajax無(wú)刷新評(píng)論

    姓名：
    評(píng)論：

jQuery-ajax&php跨域請(qǐng)求問(wèn)題

第一種方法JSONP

注意：JSONP只支持get請(qǐng)求

1.首先在jquery-ajax配置參數(shù)中添加這兩項(xiàng)

    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("出現(xiàn)錯(cuò)誤：" + data.msg);
                }
            },
            error: function(jqXHR){
               alert("發(fā)生錯(cuò)誤：" + jqXHR.status);
            },
        });

2.然后，在php中做修改

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

第二種方法XHR2

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

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

JavaScript-ajax請(qǐng)求xml數(shù)據(jù)

xml示例



    
        wendy
        35
        Santa Fe
    
    
        Yaphet
        32
        Balchik
    
    
        Isaiah
        35
        Caldera

js示例




    
    Ajax獲取XML信息
    


    Ajax獲取XML信息

云服務(wù)器 GPU云服務(wù)器 ajax的異步請(qǐng)求 ajax請(qǐng)求同步異步 js使用ajax異步請(qǐng)求數(shù)據(jù) js中ajax異步請(qǐng)求數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99559.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

macg0406

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

服務(wù)器硬件及RAID配置實(shí)戰(zhàn)

閱讀 1448·2021-11-25 09:43
【程序員必會(huì)十大算法】之貪心算法

閱讀 2306·2021-09-27 13:36
蘋果高管正拜訪亞洲供應(yīng)商探討蘋果汽車生產(chǎn)事宜

閱讀 1154·2021-09-04 16:40
微信小程序vedio視頻全屏無(wú)法遮擋textarea

閱讀 2025·2019-08-30 11:12
微信小程序?qū)徍瞬煌ㄟ^(guò)的解決方法

閱讀 3351·2019-08-29 14:14
CSS/兩欄并列等高布局

閱讀 615·2019-08-28 17:56
react.js避免在input/textareah中輸入(setState)時(shí)重新渲染整個(gè)頁(yè)面

閱讀 1387·2019-08-26 13:50
前端修煉之路

閱讀 1304·2019-08-26 13:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

AJAX異步請(qǐng)求

Ajax獲取XML信息

相關(guān)文章

深入淺出Ajax

深入了解ajax

AJAX面試題都在這里

異步處理方案系列- 1.callback

(轉(zhuǎn))JavaScript：同步、異步和事件循環(huán)

JavaScript：徹底理解同步、異步和事件循環(huán)(Event Loop)

發(fā)表評(píng)論

0條評(píng)論

macg0406

男|高級(jí)講師

TA的文章

服務(wù)器硬件及RAID配置實(shí)戰(zhàn)

【程序員必會(huì)十大算法】之貪心算法

蘋果高管正拜訪亞洲供應(yīng)商探討蘋果汽車生產(chǎn)事宜

微信小程序vedio視頻全屏無(wú)法遮擋textarea

微信小程序?qū)徍瞬煌ㄟ^(guò)的解決方法

CSS/兩欄并列等高布局

react.js避免在input/textareah中輸入(setState)時(shí)重新渲染整個(gè)頁(yè)面

前端修煉之路

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

AJAX異步請(qǐng)求

Ajax獲取XML信息

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！