ajax開啟請求的兩種方式(get,post)

來源:互聯網
上載者:User
ajax有三種開啟服務的方式分別是get,post,head
head主要是擷取伺服器的一些標頭檔的資訊,比如說charset,cont-type之類
這裡主要討論前兩種方式,是實際中應用頻繁的

一、get方式
get方式是最為常見的,一般實現使用者登入,修改密碼用的都是get方式

1,建立一html文檔,body標籤內容如下

<body style="text-align: center">
    <input type ="text" id ="txt" />
    <br />
    <input type ="button" value ="get方式回調"  onclick ="get()" />
</body>2,js代碼檔案var xhr=getXHR();//獲得xmlhttprequest對象,getXHR函數的具體實現這裡不給出,因為非常簡單

function get()
{
    var str=document.getElementById ("txt").value;
    var url="PageAjax.aspx?argument="+escape(str);//編碼str
    xhr.open("get",url,true);
    xhr.onreadystatechange=renew;
    xhr.send(null);//不發送任何內容,因為url中包含了參數資料
}
function renew()
{
    if (xhr.readystate==4)
    {
        if (xhr.status==200)
        {
            var response=xhr.responsetext;
            var res=response.split('\n');
            alert(res[0]);
        }
    }
}3,伺服器端PageAjax.aspx.cs檔案代碼如下    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["argument"] != null)
        {
            string res ="成功實現post方式回調!傳入的參數是:"+ Request["argument"].ToString()+"\n";
            Response.Write(res);
        }
    }4,到此一個簡單的get方式回調完成。二、post方式由於get方式每次都要傳入參數到url地址上,像使用者名稱,密碼之類的參數由於字元比較少,完全可以考慮這中傳遞方式,但是當有很多參數、並且參數的字串值很長時(比如部落格,你不可能把整篇部落格的內容都以參數的方式傳遞到url上),這種方式就不好了,由於有了post方式的出現。1,建立一html文檔,body標籤內容如下<textarea id="TextArea1" style="width: 323px; height: 76px"></textarea>
    <br />
    <input id="Button1" type="button" value="post方式回調" onclick="post()" />2,js代碼檔案var xhr=getXHR();//獲得xmlhttprequest對象,getXHR函數的具體實現這裡不給出,因為非常簡單
function post() 
{
    var str=document.getElementById ("TextArea1").value;
    var poststr="arg="+str;
    var url="PageAjax.aspx?time="+new Date();//加一時間戳記,放置發回的資料是伺服器緩衝的資料
    xhr.open("post",url,true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //告訴伺服器發送的是文本
    //xhr.setRequestHeader("Content-Type", "text/xml"); //告訴伺服器發送的是一個xml檔案
    xhr.onreadystatechange=update;
    xhr.send(poststr);//發送poststr資料到伺服器
}
function update()
{
    if (xhr.readystate==4)
    {
        if (xhr.status==200)
        {
            var response=xhr.responsetext;
            var res=response.split('\n');
            alert(res[0]);
        }
    }
}3,伺服器端PageAjax.aspx.cs檔案代碼如下    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["arg"] != null)
        {
            string res = "成功實現get方式回調!傳入的參數是:" + Request["arg"].ToString() + "\n";
            Response.Write(res);
        }
    }4,到此一個簡單的post方式回調完成。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.