Ajax异步传输方式中的GET与POST

在数据量不多的时候采用GET方式,数据量稍大的时候POST方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>GET VS. POST</title>

    <script language="javascript">

        var xmlHttp;

        //创建异步对象

        function createXMLHttpRequest(){

            //如果为IE浏览器则采用ActiveXObject方法,否则采用XMLHttpRequest函数

             if(window.ActiveXObject)

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

             else if(window.XMLHttpRequest)

                 xmlHttp = new XMLHttpRequest();

        }

       

        //用户填写的请求数据统一用一个函数编写

        function createQueryString(){

             var firstName = document.getElementById("firstName").value;

             var birthday = document.getElementById("birthday").value;

             var queryString = "firstName=" + firstName + "&birthday=" + birthday;

             return encodeURI(encodeURI(queryString));  //两次编码解决中文乱码问题

        }

       

        //GET请求,直接将数据放到URL中,send()方法不发送任何数据

        function doRequestUsingGET(){

             createXMLHttpRequest();

             var queryString = "9-3.aspx?";

             //new Date().getTime每次请求URL地址不同,解决缓存问题。否则服务器改下结果,客户端刷新页面不能看到更改的效果

             queryString += createQueryString() + "&timestamp=" + new Date().getTime();

             xmlHttp.onreadystatechange = handleStateChange;

             xmlHttp.open("GET",queryString);

             xmlHttp.send(null);

        }

       

        //POST模式,地址中没任何信息,数据统一在send()方法中发送,并且必须设置请求文件头

        function doRequestUsingPOST(){

             createXMLHttpRequest();

             var url = "9-3.aspx?timestamp=" + new Date().getTime();

             var queryString = createQueryString();

             xmlHttp.open("POST",url);

             xmlHttp.onreadystatechange = handleStateChange;

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

             xmlHttp.send(queryString);

        }

       

        //处理返回数据

        function handleStateChange(){

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

                 var responseDiv = document.getElementById("serverResponse");

                 responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码

             }

        }

    </script>

 

</head>

<body>

    <h2> 输入姓名和生日</h2>

    <form>

        <input type="text" id="firstName" /><br>

        <input type="text" id="birthday" />

    </form>

    <form>

        <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>

        <input type="button" value="POST" onclick="doRequestUsingPOST();" />

    </form>

    <div id="serverResponse"></div>

</body>

</html>

 

服务器端处理文件9-3.aspx

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

<%@ Import Namespace="System.Data" %>

<%

    //根据不同请求进行处理

     if(Request.HttpMethod == "POST")

         Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);

     else if(Request.HttpMethod == "GET")

         Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);

%>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值