Question

我编写了XMLhttpRequest函数来制作ajax POST。当我添加新作业时，调用此函数并添加作业也以HTML格式显示。代码如下。

function req_add()
        {
            var hr = new XMLHttpRequest();
            var url = "To-Do.php";
            var content = document.getElementById("content").value;
            var vars = "content=" + content;

            hr.open("POST", url, true);
            hr.setRequestHeader("Content-type","application/x-www-form-
urlencoded");
            hr.onreadystatechange=function()
            {
                if(hr.readyState == 4 && hr.status == 200)
                {
                    var return_data = hr.responseText;
                    document.getElementById("result").innerHTML               
= return_data;
                }
            }
            hr.send(vars);
            document.getElementById("result").innerHTML =   

"Processing...";
        }

事先我使用$ .getJSON进行GET操作。现在我想编写一个可以完成GET和POST请求的函数。函数将是这样的=＆gt; makeRequest（type，params，URL），类型用于POST和GET。无论数据是否成功返回都会有onsuccess函数。当我编写常用函数时，我会使用hr.send（）吗？感谢。

Answer 1

这确实是可能的，当你google它时会有很多信息。搜索有关XMLHttpRequest对象的信息，以及它如何支持GET / POST请求以及如何传递参数。

是的：您可以使用常见的XMLHttpRequest对象（hr变量）和有条件/切换来处理不同类型的请求。一定要正确处理错误和事件，你现在很想念。

您可以在此处找到一些信息： http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

下面的编辑，这适用于我的本地服务器，但是有很多工作要做js。您应该测试同时请求的完整性，例如......

编辑HTML：

<html>
    <head>
        <title>To-Do</title>
        <meta name="description" content="To-Do" charset="utf-8">
        </meta>
        <script language="javascript" type="text/javascript">
            function mr(type, URL) {

                var hr = new XMLHttpRequest();

                //SET UP VARS CORRECTLY FOR GET/POST
                var content = document.getElementById("content").value;
                var vars = "content=" + content;

                if (type == 'GET')
                    URL = URL + '?' + vars;

                //SET EVENTHANDLERS (THERE ARE ALOT MORE)
                hr.onreadystatechange = function() {
                    if (hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        document.getElementById("result").innerHTML = return_data;
                    }

                }
                //OPEN THE REQUEST
                hr.open(type, URL, true);

                //SET HEADERS
                hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                switch(type) {
                    case 'GET':
                        hr.send();
                        break;
                    case 'POST':
                        hr.send(vars);
                        break;
                }

                document.getElementById("result").innerHTML = "Processing...";

            }
        </script>
        <style type="text/css">
            button {
                cursor: pointer
            }
            div {
                color: #666;
                font: normal 13px "Trebuchet MS";
                width: 350px;
                padding: 10px
            }
        </style>
    </head>

    <body>
        <div>
            Add Item:
            <input type="text" name="name" id="content">
            <br>
            <button onclick="javascript:mr('POST','post.php');" type="button" id="btn1">
                Submit
            </button>
            <br>
            <button onclick="javascript:mr('GET','get.php');" type="button" id="btn2" >
                List Jobs
            </button>
            <div id="result"></div>
        </div>
    </body>
</html>

返回的PHP文件：

get.php

<?php echo "GET\n"; if(isset($_GET)) print_r($_GET); ?>

post.php中

<?php echo "POST\n"; if(isset($_POST)) print_r($_POST); ?>

如何为GET和POST编写通用的XMLhttpRequest函数？

1 个答案: