AJAX - Content Loading: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 20: Zeile 20:
 
  $("#target").load("something.html #source > *");
 
  $("#target").load("something.html #source > *");
 
Variante wäre evtl. mit .innerHTML();
 
Variante wäre evtl. mit .innerHTML();
 +
 +
Beispiel:
 +
<syntaxhighlight lang="javascript">
 +
$(function() {
 +
var href,title;
 +
  $('body').on('click','a.ajax-link',function(e) {
 +
    href = $(this).attr("href");
 +
    title = $(this).attr("name");
 +
    e.preventDefault();
 +
    // close curtain
 +
    closeCurtain();
 +
    // show Loader
 +
    $('.loader-holder').show();
 +
    // Load Content
 +
    $("#ajaxContainer").load(href + " #bd",function(response,status,xhr){
 +
      if(status == "error"){
 +
        $("#error").html("Error: " + xhr.status + ": " + xhr.statusText);
 +
      }else {
 +
        history.pushState('', + href, href); // add new url to html5 history
 +
        $('title').html(title);// change title to new page
 +
      }
 +
      $('.loader-holder').fadeOut(500); //loader end
 +
      //open curtain
 +
    });
 +
  });
 +
});
 +
 +
function closeCurtain(){
 +
}
 +
function openCurtain(){
 +
}
 +
</syntaxhighlight>
 +
 
==== Mit ajax() ====
 
==== Mit ajax() ====
 +
 +
http://stackoverflow.com/questions/405409/use-jquery-selectors-on-ajax-loaded-html
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
$.ajax({
 
$.ajax({
Zeile 31: Zeile 66:
 
});
 
});
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
Klappt nicht richtig weil ajax einen String und kein Objekt zurückgibt. evtl, mal das checken:
 +
// Finds all div elements within an XML document from an AJAX response.
 +
$("div", xml.responseXML);
 +
 +
oder
 +
<pre>
 +
$.ajax({
 +
    dataType : 'html',
 +
    url      : 'path/to/example-page.html',
 +
    success  : function(data) {
 +
 +
        // set the returned contents in a new base <html> tag.
 +
        var response = $('<html />').html(data),
 +
            anchors, hrefValuesList = [ ],
 +
            i, end;
 +
 +
        // now you can search the returned html data using .find().
 +
        anchors = response.find('a');
 +
 +
        // grab all your href values from each anchor element.
 +
        end = anchors.length;
 +
        for (i = 0; i < end; i++) {
 +
            hrefValuesList.push( anchors[ i ].href );
 +
        }
 +
 +
        // continue processing the data as necessary...
 +
 +
    }
 +
});
 +
</pre>
  
 
=== Funktion nach Abschluss des Ladevorgangs ausführen ===
 
=== Funktion nach Abschluss des Ladevorgangs ausführen ===
Zeile 66: Zeile 131:
 
     success: function(data,status,xhr){
 
     success: function(data,status,xhr){
 
       if(statusTxt == "error"){
 
       if(statusTxt == "error"){
−
         $pageData = "<div class="error">Sorry - something went wrong</div>
+
         $pageData = '<div class="error">Sorry - something went wrong</div>';
 
       }else {
 
       }else {
 
         $pageData = data;
 
         $pageData = data;

Aktuelle Version vom 2. März 2017, 16:17 Uhr

Links[Bearbeiten]

Grundlagen[Bearbeiten]

Strategien[Bearbeiten]

Über AJAX ist es möglich nur Teile einer Website zu laden und an bestehende anzufügen oder diese zu ersetzen. Das spart Ladezeit. Aus SEO Sicht sollte man die URL ebenfalls aktualisieren. Und die Browserhistory aktualisieren. Außerdem sollte die gesamte Seite neu geladen werden, wenn Die Seite direkt im Browser aufgerufen wird. Also alle Inhalte.

Wenn Teile der Seite geladen werden sollen gibt es generell zwei Wege.

  1. Server checkt ob AJAX Anforderung vorliegt und liefert dann nur den benötigten Teil der Inhalte aus. I.d.R. den Inhalt.
  2. Über den AJAX Aufruf werden bestimmte Teile der Seite angefordert. Diese wird dann geparsed und die benötigten Inhalte geladen. Etwas mehr Ladevolumen, weil der komplette Markdown geladen wird. Allerdings nur die benötigten Verweise (also keine Skripte, Bilder, etc. die nicht benötigt werden).
  3. Evtl. gibt es interessante Möglichkeiten über serverseitigem JS ???

Load Container Content[Bearbeiten]

Mit load()[Bearbeiten]

Über jQuery den Inhalt eines Elements (inkl. Element) anfordern. 

$("#target").load("something.html #source");

Oder nur die Inhalte ohne das umschließende DIV 

$("#target").load("something.html #source > *");

Variante wäre evtl. mit .innerHTML();

Beispiel: 

$(function() {
	var href,title;
  $('body').on('click','a.ajax-link',function(e) {
    href = $(this).attr("href");
    title = $(this).attr("name");
    e.preventDefault();
    // close curtain
    closeCurtain();
    // show Loader
    $('.loader-holder').show();
    // Load Content
    $("#ajaxContainer").load(href + " #bd",function(response,status,xhr){
      if(status == "error"){
         $("#error").html("Error: " + xhr.status + ": " + xhr.statusText);
      }else {
        history.pushState('', + href, href); // add new url to html5 history
        $('title').html(title);// change title to new page
      }
      $('.loader-holder').fadeOut(500); //loader end
      //open curtain
    });
  });
});

function closeCurtain(){
}
function openCurtain(){ 
}

Mit ajax()[Bearbeiten]

http://stackoverflow.com/questions/405409/use-jquery-selectors-on-ajax-loaded-html 

$.ajax({
  url: 'something.html',
  dataType: 'html',
  success: function(html) {
    var div = $('#sourceDiv', $(html)).addClass('done');
      $('#targetDiv').html(div);
    }
});

Klappt nicht richtig weil ajax einen String und kein Objekt zurückgibt. evtl, mal das checken: 

// Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);

oder 

$.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // set the returned contents in a new base <html> tag.
        var response = $('<html />').html(data),
            anchors, hrefValuesList = [ ],
            i, end;

        // now you can search the returned html data using .find().
        anchors = response.find('a');

        // grab all your href values from each anchor element.
        end = anchors.length;
        for (i = 0; i < end; i++) {
            hrefValuesList.push( anchors[ i ].href );
        }

        // continue processing the data as necessary...

    }
});

Funktion nach Abschluss des Ladevorgangs ausführen[Bearbeiten]

Beispiel 

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

Beispiel 

$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});

Beispiel 

function loadContent(url,selector){ // Load content
  var pageData = '';
  $.ajax({
    type: "POST"
    url: url,
    data: { 
      ajax: true 
    },
    success: function(data,status,xhr){
      if(statusTxt == "error"){
         $pageData = '<div class="error">Sorry - something went wrong</div>';
      }else {
        $pageData = data;
      }
    }
  }).done(function(){ 
    // actions after complete loading
  }
});

[Bearbeiten]

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=AJAX_-_Content_Loading&oldid=22036“