ajax-使用get方法和POST方法向服务器传送参数

淡淡的烟草味﹌ 2021-09-16 23:18 237阅读 0赞

**目录**

使用get方法：

使用POST方法：

--------------------

**void open****（String method，String url，boolean** **asyncn，String username，String password）；**

**这个方法会建立对服务器的调用。****有两个必要参数，还有三个可选参数。****要提供调用的特定方法（****GET、POST 或PUT）,还要提供所调用资源的URL，是**服务器上文件的地址**。**

**与** **POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：**

**           无法使用缓存文件（更新服务器上的文件或数据库）**

**           向服务器发送大量数据（POST 没有数据量限制）**

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

**另外还可以传递一个****boolean** **值，指示这个调用是异步还是同步。默认值为true，表示请求本质上是异步的。如果这个参数为false，处理就会等待，知道从服务器返回响应为止。**

服务器接收请求

JavaScript使用XMLHttpRequest对象的POST或GET方法，将数据封装到URL或Request中，向服务器提交数据。

在ASP.NET中，可以使用QueryString、Form或Params收集客户机传上来的数据。

# 使用get方法： #

![20181110204631100.png][]

HtmlPage1.html：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            function loadXMLDoc(str)
            {
                var xmlhttp;
                if (str.length == 0)
                {
                    document.getElementById("myDiv").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest)
                {
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("GET", "re01.aspx?name="+str , true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = callback;
    
                function callback()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
                }
            }
        </script>
    </head>
    <body>
        <form name="form1">
            请输入姓名：
            <input id="Text1" name="Text1" type="text" onblur="loadXMLDoc(this.value)" />
            <br />
    
            反应：
            <div id="myDiv"></div>
        </form>
        
    </body>
    </html>

**（这里注意传值时的细节，对比：[https://blog.csdn.net/qq\_40323256/article/details/83933704][https_blog.csdn.net_qq_40323256_article_details_83933704]）**

re01.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
            {
                string n = Request.Params["name"];
                //string n = Request.QueryString["name"];
                Response.Write("你好" + n + ",祝你今天工作愉快");
            }

![20181110205436548.gif][]

# 使用POST方法： #

![20181112140323652.png][]

HtmlPage1.html：

<head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            function loadXMLDoc(str)
            {
                var xmlhttp;
                if (str.length == 0)
                {
                    document.getElementById("myDiv").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest)
                {
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST", "re01.aspx", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("name="+str );
                xmlhttp.onreadystatechange = callback;
    
                function callback()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
                }
            }
        </script>
    </head>
    <body>
        <form name="form1">
            请输入姓名：
            <input id="Text1" name="Text1" type="text" onblur="loadXMLDoc(this.value)" />
            <br />
    
            反应：
            <div id="myDiv"></div>
        </form>
    </body>

re01.aspx.cs:

![20181112140733115.gif][]

[20181110204631100.png]: /images/20210725/0e2507e1efce4de4b49cfc1cd8d2e5f3.png
[https_blog.csdn.net_qq_40323256_article_details_83933704]: https://blog.csdn.net/qq_40323256/article/details/83933704
[20181110205436548.gif]: /images/20210725/e8bbd6203dab45f49542c964d8d54f74.png
[20181112140323652.png]: /images/20210725/3fe96846d07247c685bf90b7730ed317.png
[20181112140733115.gif]: /images/20210725/b8084a44a3c143ceb3cccd354702a159.png