Ajax Interceptor mit jQuery und Angular

jQuery:

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  var token = $("meta[name='_csrf']").attr("content");
  var header = $("meta[name='_csrf_header']").attr("content");
  jqXHR.setRequestHeader(header, token);
});

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {

var token = $("meta[name='_csrf']").attr("content");

var header = $("meta[name='_csrf_header']").attr("content");

jqXHR.setRequestHeader(header, token);

});

Angular:

angular.module("app", [])

.controller("MyController", ['$http', function ($http) {
  // ...
  $http.get("/foo").success(function(data) {
    // ...
  });
}])

.config([ "$httpProvider", function($httpProvider) {
  var token = $("meta[name='_csrf']").attr("content");
  var header = $("meta[name='_csrf_header']").attr("content");
  $httpProvider.defaults.headers.common[header] = token;
}]);

angular.module("app", [])

.controller("MyController", ['$http', function ($http) {

// ...

$http.get("/foo").success(function(data) {

// ...

});

}])

.config([ "$httpProvider", function($httpProvider) {

var token = $("meta[name='_csrf']").attr("content");

var header = $("meta[name='_csrf_header']").attr("content");

$httpProvider.defaults.headers.common[header] = token;

}]);

Für die CSRF-Token siehe hier.

Twitter für WordPress

Es gibt viele Plugins für WordPress, um seine Tweets anzuzeigen.

Das Problem von fast allen: Sie rufen serverseitig ab, und zwar dynamisch. Ein Problem ist das deshalb, weil Twitter die Anfragen auf 150/Stunde/IP beschränkt. Wenn man, wie ich, keinen dedizierten Server mit eigener IP hat, dann sind die 150 Requests schnell aufgebraucht. Sehr schnell. Ich habe gerade (unter der Woche, gegen 23 Uhr) etwa 7 Minuten gebraucht. Wenn das Plugin nun serverseitig die Nachrichten abruft, dann kommen also keine Ergebnisse – und darüber hinaus hängt die Seite schlimmstenfalls, weil das PHP-Skript auf Twitter wartet.

Eine schlechte Eigenschaft von vielen Plugins darüber hinaus: Sie zeigen keine Retweets an.

Mindestens das folgende Plugin umgeht die oben beschriebenen Probleme: Tweet Blender. Erstens zeigt es auch Retweets an. Dann legt es einen Cache an, und verwendet diesen, statt jedes mal Twitter anzupingen. Dieser Cache wird nach dem Laden der Seite per Javascript geholt; die Seite hängt also nicht.

Außerdem zeigt es den aktuellen Serverstatus in Bezug auf verbleibende Requests an (siehe Bild; das hat mich überhaupt erst auf das Thema gebracht); auf Wunsch auch als Nachricht für den Nutzer. Es unterstützt übrigens auch mehrere Accounts (was mir persönlich schnurz war).

Das Ergebnis seht ihr rechts; morgen (oder so) werde ich das mal ein wenig skinnen.

XMLHttpRequest.responseText mit XML und Javascript [UPDATE]

ajax

“Normalerweise” besteht so ein responseText aus einem XML-Fragment. Das baut man dann dynamisch in seine Seite und gut ist. Javascript wird dabei nicht mehr ausgeführt.

Ein Trick zum dynamischen Abrufen (und Ausführen) von JS besteht darin, dass der responseText an eval() übergeben und so ausgeführt wird… dazu muss der responseText aber natürlich reines JS sein.

Wenn man nun aber beides will, so erzeuge man einen responseText a la

<script type="text/javascript" id="theScript">
    alert( 'yeah' );
</script>
<div id="theContent">...</div>

alert( 'yeah' );

</script>

und voila (hier am Beispiel von ExtJS):

var ajaxRequest = Ext.Ajax.request({
    url: 'index.php?fooBar,
    params: {},
    disableCaching: false,
    success: onResponseDoMe,
    failure: function(){}
});

var ajaxRequest = Ext.Ajax.request({

url: 'index.php?fooBar,

params: {},

disableCaching: false,

success: onResponseDoMe,

failure: function(){}

});

hier nun der Zauber:

function onResponseDoMe( xhr ){
    var newContent = xhr.responseText;
    Ext.get('targetDiv').update(newContent);
    eval( Ext.get('theScript').dom.innerHTML );
}

function onResponseDoMe( xhr ){

var newContent = xhr.responseText;

Ext.get('targetDiv').update(newContent);

eval( Ext.get('theScript').dom.innerHTML );

}

Der Trick ist also einfach: Packe das JS in einen <script>-Knoten, und gebe diesem eine ID, um darauf zugreifen zu können 🙂

NACHTRAG: In ExtJS kann man natürlich auch einfach den Parameter loadScripts von Ext.Element.update() nutzen 😀

Slides.

“Keynote” ist das Apple-Gegenstück zu “Powerpoint” – und als solches gar nicht schlecht. Glaubt mir, denn ich mag Apple-Software nicht unbedingt 🙂 Nun gibt’s Keynote auch als Online-Software, und nennt sich “280 Slides“

crusy.net

♪ Commit ins Abenteuerland ♫

Tag Archives for Ajax

Ajax Interceptor mit jQuery und Angular

Twitter für WordPress

XMLHttpRequest.responseText mit XML und Javascript [UPDATE]

Slides.