Ajax中GET和POST应用-优快云博客

本文详细介绍了Ajax的基本步骤及GET与POST请求的区别与应用场景。包括如何创建与配置XMLHttpRequest对象，实现异步数据交互，以及如何通过示例代码演示这两种请求方式的具体使用。

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

1、Ajax基本步骤：
·生成xmlHttpRequest对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
以上是简单写法，实际应用中要根据浏览器进行扩展

·设置异步方式
xmlHttp.open("POST",url,true);
或
xmlHttp.open("GET",url,true);
这里的TRUE表示为异步方式，FALSE 为同步方式

·设置回调过程
xmlHttp.onreadystatechange=process;
这里的process为回调过程

·发送至服务处理程序
xmlHttp.send(content);//适合post方式
或
xmlHttp.send(null);//适合get方式

·回调过程处理
function process()
{
   if(xmlHttp.readyState==4)//表示成功返回
      if(xmlHttp.status==200)//HTTP返回值，表示成功！
      {
    //在这里做你该做的........
      }
}

2、POST 和 GET 方式的应用
·GET方式
   get方式是以明文传输，并且传输字符串是有长度要求的。
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
   在url中用？和&号连接字符串，构成传输URL，send参数设为NULL，表示不发送实际数

据，数据已在URL中给定。

·POST方式
   这种方式稍微复杂一些，有几个地方必须设置
   一个是：
    xmlHttp.open("POST",url,true);
    这里的URL为不带？的URL
   二个是：
    xmlHttp.send(content);
    content为发送的实际内容。
   三个是：
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-

urlencoded");
设置发送内容为表单数据，否则在处理程序端将收不到正确数据。

实例如下：
GET方式

客户端:
<script type="text/javascript" >
        var xmlHttp;
        function createxmlHttp()
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        function addNum()
        {
            var url="Handler.ashx?Num1="+document.getElementById

("num1").value+"&Num2=" + document.getElementById("num2").value;

            createxmlHttp();
            //alert(url);
            xmlHttp.open("GET",url,true);
            xmlHttp.onreadystatechange=callback;
            xmlHttp.send(null);

        }
        function callback()
        {
            //document.getElementById("result").value=xmlHttp
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    document.getElementById

("result").value=xmlHttp.responseText;
                }
            }
            document.getElementById("result").value=xmlHttp.responseText;
            //document.getElementById("result").value="xmlHttp.readyState";
        }
    </script>

处理程序GET
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int num1, num2,result;
        try
        {
            num1 = Convert.ToInt32(context.Request.QueryString["Num1"]);
        }
        catch
        {
            num1 = 0;
        }
        try
        {
            num2 = Convert.ToInt32(context.Request.QueryString["Num2"]);
        }
        catch
        {
            num2 = 0;
        }
        result = num1 + num2;
        context.Response.Write(result);
    }

    public bool IsReusable {
        get {
            return true;
        }
    }

}

POST方式
<script type="text/javascript">
        var xmlHttp;
        function createxmlHttp()
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        function sendXML()
        {
            createxmlHttp();
            url="Handler2.ashx";
            content="name="+document.getElementById("myname").value + "&age=";
            content+=document.getElementById("myage").value;
            xmlHttp.onreadystatechange=process;

            xmlHttp.open("POST",url,true);
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-

urlencoded");
            xmlHttp.send(content);

        }
        function process()
        {
            if(xmlHttp.readyState==4)
                if(xmlHttp.status==200)
                {
                    document.getElementById

("result").value=xmlHttp.responseText;
                }
        }
    </script>

处理程序POST方式
%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;

public class Handler2 : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string str;
        //str = "你的姓名是："+context.Request.QueryString["name"];
        //str += "你的年龄是：" + context.Request.QueryString["age"];
        str = "你的姓名是：" + context.Request.Form["name"];
        str += "你的年龄是：" + context.Request.Form["age"];
        str += "类型信息：" + context.Request.ContentType.ToString();
        context.Response.Write(str);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}