JavaScript使用XMLHttpRequest 發送GET/Post 請求

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/358980

文章标签：

#javascript #ViewUI

本文介绍如何利用JavaScript中的XMLHttpRequest对象实现GET和POST请求，并提供了完整的示例代码。通过按钮触发请求，展示了如何设置请求头、发送请求及接收响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>

<html>

<head>

<title>Demo</title>

<script type="text/javascript">

     var xmlHttp; 

    //XmlHttpRequest对象

    function createXMLHttpRequest() { 

    var xmlHttp; 

    if (window.XMLHttpRequest) {  //非IE浏览器 

        xmlHttp = new XMLHttpRequest(); 

        if (xmlHttp.overrideMimeType) 

            xmlHttp.overrideMimeType('text/xml'); 

    } else if (window.ActiveXObject) {  //如果是IE浏览器

        try { 

            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 

        } catch (e) { 

            try { 

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 

            } catch (e) { 

            } 

        } 

    } 

    return xmlHttp; 

   } 

    function getStatusBack(){ 

        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ 

            var b = xmlHttp.responseText; 

            alert(b);

            console.log(b);

        } 

    } 

   function testGet(){

     xmlHttp = createXMLHttpRequest(); 

     var url = "http://xxx/xxx/xxx" 

     xmlHttp.open("GET", url, true);// 异步处理返回  

     xmlHttp.onreadystatechange = getStatusBack;   //设置回调函数

     xmlHttp.setRequestHeader("Content-Type",  "application/x-www-form-urlencoded;"); 

     xmlHttp.send();  //发送请求

    }

    function testPost(){

        var parameter = "tidList=1"

         var url = "http://xxx/xxx/xxx"; 

       xmlHttp = createXMLHttpRequest();

       xmlHttp.open("POST", url, true); 

         xmlHttp.onreadystatechange = getStatusBack; //设置回调函数 

             xmlHttp.setRequestHeader("Content-Type", 

             "application/x-www-form-urlencoded;"); 

             xmlHttp.send(); //发送请求

    }

</script>

</head>

<body>
 
        <button  onclick="testGet()">Test Get</button>

        <button  onclick="testPost()">Test Post</button>

</body>

</html>