首頁 > 開發者 > Ajax

Ajax基礎教程學習(1)_發送請求

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1,XMLHttpRequest對象的open()方法會指定將發出的請求。open()方法取3個參數：一個是指示所用方法（通常是GET或POST）的串；一個是表示目標資源URL的串；一個是Boolean值，指示請求是否是非同步

2,XMLHttpRequest對象的send()方法把請求發送到指定的目標資源。send()方法接受一個參數，通常是一個串或一個DOM對象。這個參數作為請求體的一部分發送到目標URL。當向send()方法提供參數時，要確保open()中指定的方法是POST。如果沒有資料作為請求體的一部分被發送，則使用null

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Simple XMLHttpRequest</title>

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest() {    if (window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }    else if (window.XMLHttpRequest) {        xmlHttp = new XMLHttpRequest();    }

}

function startRequest() {    createXMLHttpRequest();    xmlHttp.onreadystatechange = handleStateChange;    xmlHttp.open("GET", "simpleResponse.xml", true);    xmlHttp.send(null);

}

function handleStateChange() {    if(xmlHttp.readyState == 4) {        if(xmlHttp.status == 200) {            alert("The server replied with: " + xmlHttp.responseText);        }    }

}

</script>

</head>

<body>    <form action="#">        <input type="button" value="Start Basic Asynchronous Request"                onclick="startRequest();"/>    </form>

</body>

</html>

 

 

發送請求參數

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Sending Request Data Using GET and POST</title>

<script type="text/javascript">
var xmlHttp;
function createXmlHttp(){
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
   
}
function createQueryString()
{
    var firstName=document.getElementByIdx_x_x_x_x_x_x_x_x("firstName").value;
    var middleName=document.getElementByIdx_x_x_x_x_x_x_x_x("middleName").value;
    var birthday=document.getElementByIdx_x_x_x_x_x_x_x_x("birthday").value;
    var queryString="firstName="+firstName+"&middleName="+middleName+"&birthday="+birthday;
    return queryString;
}

function doRequestUsingGET()
{
    createXmlHttp();
    var queryString="Default.aspx?";
    queryString=queryString+createQueryString()+"timeStamp="+new Date().getTime();
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.open("Get",queryString,true);
    xmlHttp.send(null);
}
function doRequestUsingPOST()
{
    createXmlHttp()
    var url="Default.aspx?timeStamp="+new Date().getTime();
    var queryString=createQueryString();
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.open("Post",url,true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlHttp.send(queryString);
   
}
function handleStateChange()
{
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
        getResult();
       }
    }

}

function getResult()
{
    var responseDiv=document.getElementByIdx_x_x_x_x_x_x_x_x("serverResponse");
    if(responseDiv.hasChildNodes()){
        responseDiv.removeChild(responseDiv.childNodes[0]);
    }
    var responseText=document.create_r_r_r_r_r_r_r_rTextNode(xmlHttp.responseText);
    responseDiv.appendChild_xss(responseText);
   
}
</script>

</head>

<body>
<h1>Enter your first name, middle name, and birthday:</h1>
<table>    <tbody>       
<tr>            <td>First name:</td>            <td><input type="text" id="firstName"/>        </tr>
<tr>            <td>Middle name:</td>            <td><input type="text" id="middleName"/>        </tr>       
<tr>            <td>Birthday:</td>            <td><input type="text" id="birthday"/>        </tr>    </tbody> </table>
<form action="#">   
<input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>    <br/><br/>   
<input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/> </form>
<br/> <h2>服務端返回</h2> <div id="serverResponse"></div>

</body>

</html>

 

請求參數作為XML發送

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>無標題頁</title>
    <script>
        var xmlHttp=null;
        function createHttpRequest(){
            if(xmlHttp==null){
                if(window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    try{
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                       }catch(e){
                            try{
                                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                            }catch(e){
                                alert("xmlHttp建立失敗!");
                            }
                       }
                }
            }
           
        }
       
        function createXML()
        {
            var xml="<?xml version='1.0' encoding='utf-8'?><pets>";
            var options=document.getElementByIdx_x_x_x("petTypes");
            var option=null;
            for(var i=0;i<options.length;i++){
                option=options[i];
                if(option.selected){
                    xml=xml+"<type>"+option.value+"<\/type>";
                }
            }
            xml=xml+"<\/pets>";
            return xml;
        }
       
        function sendPetTypes(){
            if(xmlHttp==null){
                createHttpRequest();
                if(xmlHttp==null)
                {
                    alert("xmlHttp建立失敗");
                }
            }
            var xml=createXML();
            var url="Default.aspx?timeState="+new Date().getTime();
            xmlHttp.open("Post",url,true);
            xmlHttp.onreadystatechange=handleStateChange;
            xmlHttp.setRequestHeader("Content_Type","application/x-www-form-urlencoded;")
            xmlHttp.send(xml);
        }
       
        function handleStateChange(){
            if(xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                    parseResults();
                }
            }
        }
       
        function parseResults(){
            var responseDiv=document.getElementByIdx_x_x_x("serverResponse");
            if(responseDiv.hasChildNodes()){
                responseDiv.removeChild(responseDiv.childNodes[0]);
               
            }
            var responseText=document.create_r_r_rTextNode(xmlHttp.responseText);
            responseDiv.appendChild_xss(responseText);
        }
       
       
    </script>
</head>
<body> <h1>Select the types of pets in your home:</h1>
<form action="#">   
<select id="petTypes" size="6" multiple="true">       
<option value="cats">Cats</option>       
<option value="dogs">Dogs</option>       
<option value="fish">Fish</option>       
<option value="birds">Birds</option>       
<option value="hamsters">Hamsters</option>       
<option value="rabbits">Rabbits</option>
</select> <br/><br/>
<input type="button" value="Submit Pets" onclick="sendPetTypes();"/>

</form>

<h2>Server Response:</h2>

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

</html>

伺服器端代碼

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Xml;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        XmlDocument xmlDoc = new XmlDocument();
        xmlDoc.Load(Request.InputStream);
        XmlNodeList nodeList = xmlDoc.getElementsByTagName_r("type");
        String  type = null;
        String responseText = "Selected Pets: ";
        for (int i = 0; i < nodeList.Count; i++)
        {
            type = nodeList[i].FirstChild.Value;
            responseText = responseText + " " + type;
        }
        Response.Write(responseText);
        Response.End();
    }
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More