Ajax mit JavaScript

AJAX ist eine Technik, die es einer Webseite erlaubt, Informationen von einem Webserver abrufen zu können. Nach Ansicht einiger Experten hat das Aufkommen von AJAX in den nuller Jahren die Verbreitung von JavaScript im professionellen Bereich stark gefördert.

AJAX ist ein Akronym für “Asynchronous JavaScript and XML”.

[ˈeidʒæks]

https://xhr.spec.whatwg.org/

Main.html

<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>Main</title>
</head><body>
<p id="id201512271754350100"></p>
<pre><code>
<script>
{ "use strict";
  let request = new XMLHttpRequest();
  request.open /* must be called first */
  ( "GET", "https://userpage.fu-berlin.de/~ram/pub/JSON/example", true );
  request.onload = () =>
  { if( request.status == 200 )
    { const e = document.createElement( 'strong' );
      e.appendChild( document.createTextNode( JSON.parse( request.responseText )[ 0 ] ));
      document.getElementById( 'id201512271754350100' ).appendChild( e ); }
    else alert( 'Status is not 200.' ); };
  request.onerror = () => { alert( 'Error.' ); };
  request.onabort = () => { alert( 'Abort.' ); };
  request.send(); }
</script></code></pre></body></html>

https://userpage.fu-berlin.de/~ram/pub/JSON/example

{ "0": "alpha", "1": "beta" }

https://userpage.fu-berlin.de/~ram/pub/JSON/.htaccess

ForceType application/json

Header set Access-Control-Allow-Origin "*"

»`onreadystatechange`« *

onload was added in XMLHttpRequest 2 whereas onreadystatechange has been around since the original spec

Main.html

<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>Main</title>
</head><body>
<p id="id201512271754350100"></p>
<pre><code>
<script>
( function()
  { "use strict"; let request = new XMLHttpRequest();
    request.open
    ( "GET", "https://userpage.fu-berlin.de/~ram/pub/JSON/example",
      true );
    request.onreadystatechange = () =>
    { if( request.readyState == 4 && request.status == 200 )
      { const e = document.createElement( 'strong' );
        e.appendChild( document.createTextNode( JSON.parse( request.responseText )[ 0 ] ));
        document.getElementById( 'id201512271754350100' ).appendChild( e ); }};
    request.send(); }() );
</script></code></pre></body></html>

Neuerdings kann statt AJAX auch die neue fetch-API verwendet werden.

Ajax mit JavaScript

»onreadystatechange« *

»`onreadystatechange`« *