War diese Seite hilfreich?
Ihr Feedback ist uns wichtig. Teilen Sie uns Ihre Meinung mit.
Weiteres Feedback?
1500 verbleibende Zeichen
MSDN Library

Einführung in domänenübergreifende Anforderungen (XDR)

Neu für Windows Internet Explorer 8

Mithilfe der domänenübergreifenden Anforderung ("XDR") in Internet Explorer 8 können Entwickler Szenarios für die siteübergreifende Datenzusammenführung erstellen. Vergleichbar mit dem XMLHttpRequest-Objekt, aber mit einem einfacheren Programmiermodell, ist diese Anforderung mit der Bezeichnung XDomainRequest die einfachste Möglichkeit, um anonyme Anforderungen an Websites von Drittanbietern zu senden, die XDR unterstützen und der domänenübergreifenden Bereitstellung ihrer Daten zustimmen. Drei Codezeilen sind erforderlich, um siteübergreifende Anforderungen zu stellen. Dadurch wird sichergestellt, dass diese Datenzusammenführung für öffentliche Websites, z. B. Blogs oder Social Networking-Anwendungen, einfach, sicher und schnell erfolgt.

In diesem Thema sind die folgenden Abschnitte enthalten.

Hintergrund

Webbrowser besitzen eine Sicherheitsrichtlinie, die den Zugriff von Webseiten aus anderen Domänen blockiert. Websites umgehen diese Richtlinie häufig, indem ihr Server Inhalte vom Server einer anderen Website im Back-End anfordert und somit die Überprüfung im Browser umgeht. Das folgende Diagramm veranschaulicht diesen Prozess für eine typische Hybridanwendungssite und Internet Explorer 7 und für früher Versionen.

Dd573303.xdr1.gif

In Internet Explorer 8 können Webseiten einfach eine domänenübergreifende Datenanforderung im Browser senden, indem das neue XDomainRequest-Objekt anstelle einer Server-zu-Server-Anforderung verwendet wird. Das folgende Diagramm veranschaulicht eine domänenübergreifende Anforderung in Internet Explorer 8.

Dd573303.xdr2.gif

Für domänenübergreifende Anforderungen ist die gegenseitige Zustimmung zwischen der Webseite und dem Server erforderlich. Sie können eine domänenübergreifende Anforderung auf Ihrer Webseite initiieren, indem Sie ein XDomainRequest-Objekt des window-Objekts erstellen und eine Verbindung zu einer bestimmten Domäne öffnen. Der Browser fordert Daten vom Server der Domäne an, indem er einen Origin-Header mit dem Wert des Ursprungs sendet. Er stellt die Verbindung nur her, wenn der Server mit einem Access-Control-Allow-Origin-Header von * oder der genaue URL der anfordernden Seite antwortet. Dieses Verhalten ist Teil des Entwurfsframework der Arbeitsgruppe für Webanwendungen des World Wide Web Consortium (W3C) zur clientseitigen, domänenübergreifenden Kommunikation, mit der das XDomainRequest-Objekt integriert wird.

Die ASP-Seite (Active Server Pages) eines Servers könnte z. B. den folgenden Antwortheader einschließen.

<% Response.AddHeader("Access-Control-Allow-Origin","*") %>
Sicherheitshinweis Sicherheitswarnung: Zum Schutz von Benutzerdaten sind domänenübergreifende Anforderungen anonym, das bedeutet, das die Server nicht einfach herausfinden können, von wem Daten angefordert werden. Daher sollten Sie nur domänenübergreifende Daten anfordern und senden, die nicht vertraulich oder persönlich identifizierbar sind.

API-Dokumentation

Im folgenden JavaScript-Code werden das XDomainRequest-Objekt und seine Ereignisse, Eigenschaften und Methoden eingeführt. Die XDomainRequest-Referenzseite enthält mehr Details, als hier aufgeführt sind.

// Creates a new XDR object.
xdr = new XDomainRequest();  

// Indicates there is an error and the request cannot be completed. 
xdr.onerror = alert_error;
                        
// The request has reached its timeout. 
xdr.ontimeout = alert_timeout;
                        
// The object has started returning data.
xdr.onprogress = alert_progress;
                        
// The object is complete. 
xdr.onload = alert_loaded;

// Sets the timeout interval.
xdr.timeout = timeout;

// Gets the content-type header in the request.
var content_type = xdr.contentType;

// Gets the body of the response.
var response = xdr.responseText;
                        
// Creates a connection with a domain's server. 
xdr.open("get", url);
 
// Transmits a data string to the server. 
xdr.send();

// Terminates a pending send.
xdr.abort();

Codebeispiel

XDR besteht aus zwei Komponenten: Eine Clientseite, die eine Datenanforderung domänenübergreifend an eine URL sendet, und eine Serverseite, die mit dem Access-Control-Allow-Origin-Header von * oder der genauen URL der anfordernden Seite antwortet, plus die Daten, die Internet Explorer dann für die anfordernden Domäne zur Verfügung stellt, nachdem Sicherheitsüberprüfungen durchgeführt wurden.

Diese Beispielseite nimmt eine URL und führt eine get-Anforderung aus. Die Schaltfläche "Read" (Lesen) ruft eine Methode auf, um die Antwortdaten auszugeben, sofern Sie dieses ausgewählt haben. Das erste Codebeispiel, das folgt, ist die anfordernde Seite.

Hinweis: Um XDR ordnungsgemäß zu veranschaulichen, sollten Sie diese Seite auf einen Webserver in einer anderen Domäne kopieren. Sie können auch Microsoft-Internetinformationsdienste (IIS) auf dem Computer aktivieren und den Dienst lokal über "C:\inetpub\wwwroot" hosten. Suchen Sie im Menü "Start" in "Hilfe und Support" nach "IIS", um weitere Informationen zum Installieren von IIS zu erhalten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Internet Explorer 8 - Cross-domain Request Code Sample</title>
<script type="text/javascript">
    var xdr;

    function read_data()
    {
        var output = document.getElementById('text_response');
        if(output)
        {
        // To view the responseText on the page, click the Read button. 
            output.innerText = xdr.responseText;
        }

        // The Read button also displays the content type and length of 
        // response in alerts.  
        alert("Content-type: " + xdr.contentType);
        alert("Length: " + xdr.responseText.length);
    }

    function alert_error()
    {
        alert("XDR onerror");
    }

    function alert_timeout()
    {
        alert("XDR ontimeout");
    }

    function alert_loaded()
    {
        alert("XDR onload");
        alert("Got: " + xdr.responseText);
    }

    function alert_progress()
    {
        alert("XDR onprogress");
        alert("Got: " + xdr.responseText);
    }

    function req_abort()
    {
        if(xdr)
        {
            xdr.abort(); // Abort XDR if the Stop button is pressed. 
        }
    }

    function req_init()
    {
        var url = 
        document.getElementById('input_url').value;
        var timeout = 
            document.getElementById('input_timeout').value;
        if (window.XDomainRequest) // Check whether the browser supports XDR. 
        {
            xdr = new XDomainRequest(); // Create a new XDR object.
            if (xdr)
            {
                // There is an error and the request cannot be completed. 
                // For example, the network is not available.
                xdr.onerror     = alert_error;
                        
                // This event is raised when the request reaches its timeout. 
                xdr.ontimeout   = alert_timeout;
                        
                // When the object starts returning data, the onprogress event 
                // is raised and the data can be retrieved by using responseText.
                xdr.onprogress  = alert_progress;
                       
                // When the object is complete, the onload event is raised and 
                // the responseText ensures the data is available. 
                xdr.onload      = alert_loaded;

                xdr.timeout     = timeout;
                        
                // The URL is preset in the text area. This is passed in the 
                // open call with a get request.
                xdr.open("get", url);
                        
                // The request is then sent to the server.  
                xdr.send();
            }
            else
            {
                alert('Failed to create new XDR object.');
            }
        }
        else
        {
            alert('XDR does not exist.');
        }
    }

</script>
</head>

<body>

<div class="body">
	<h1>Internet Explorer 8 - Cross-domain Request Demo</h1>
	<form action="">
		<!-- Assign URL and timeout values from their text boxes to variables. -->
		<p>URL:	<input id="input_url" type="text" 
		value="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Ajax/xdomain.response.movies.aspx"
		style="width: 700px"></p>
		
		<p>Timeout: <input id="input_timeout" type="text" value="10000"></p>
		
		<p><input onclick="req_init()" type="button" value="Get">&nbsp;&nbsp;&nbsp;
		<input onclick="req_abort()" type="button" value="Abort">&nbsp;&nbsp;&nbsp;
		<input onclick="read_data()" type="button" value="Read"></p>
	</form>
	<div id="text_response">
	</div>
</div>

</body>

</html>

Show Me

Klicken Sie auf die Schaltfläche "Show Me" (Anzeigen), um diese zu testen. Beachten Sie die zwei Felder und die drei Schaltflächen:

  • Das URL-Feld wird mit eine URL voreingestellt, an die von der Seite die get-Anforderung gesendet wird. Die URL für die Datei ist "http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Ajax/xdomain.response.movies.aspx".
  • Das Feld "Timeout" ist mit einem Timeoutwert von 10.000 Millisekunden (10 Sekunden) voreingestellt.
  • Die Schaltfläche "Get" (Abrufen) sendet die Anforderung an die angegebene URL.
  • Die Schaltfläche "Stop" (Beenden) bricht die get-Anforderung ab.
  • Die Schaltfläche "Read" (Lesen) liest den Antworttext und schreibt es in die Seite, und liest dann sowohl den Inhaltstyp als auch die Länge und zeigt diese an.

Das zweite Codebeispiel ist die Zielseite, auf die in der anfordernden Seite verwiesen wird. In diesem Fall enthält die Zielseite eine Liste von Filmdaten.

<% Response.AddHeader("Access-Control-Allow-Origin","*") %>
movieID|movieName|actor|genre
1|Fistful of Dollars|Clint Eastwood
2|Mission Impossible|Tom Cruise|Action
3|Enforcer|Clint Eastwood|Love Story
4|Gauntlet|Clint Eastwood
5|LawnMower Man|John Curtis|Drama
6|The Shining|Jack Nicholson|Drama
7|Dirty Harry|Clint Eastwood|Make my day
8|Two mules for Sister Sarah|Clint Eastwood
9|Hard to Kill|Stephen Segal|Action
10|Top Gun|Tom Cruise|High Intense Action

Verwandte Themen

Community-Beiträge

Microsoft führt eine Onlineumfrage durch, um Ihre Meinung zur MSDN-Website zu erfahren. Wenn Sie sich zur Teilnahme entscheiden, wird Ihnen die Onlineumfrage angezeigt, sobald Sie die MSDN-Website verlassen.

Möchten Sie an der Umfrage teilnehmen?
Anzeigen:
© 2015 Microsoft