title: Mule ESB: Proceed HTTP Response with HTML and Javascript
body: <p>currently I am working with mule esb. What I want to achieve is: Do some operation in JavaScript and publish the response to HTTP based on HTML format.</p>
  
  <p>For example, I have following HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE&gt; &lt;html&gt;   &lt;head&gt;
          &lt;script type="text/javascript" src="mule-resource/js/mule.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              function init(){
                  mule.subscribe("http://localhost:8081/uebermittleAusweisdaten", function(data){
                      var res = JSON.parse(data.data);
                      var ausweis = res.Body.uebermittleAusweisdatenResponse.ausweis;
                      var berechtigung = res.Body.uebermittleAusweisdatenResponse.berechtigung;
                      var fahrerlaubnis = res.Body.uebermittleAusweisdatenResponse.fahrerlaubnis;
                      var lieferant = res.Body.uebermittleAusweisdatenResponse.lieferant;
                      var mitarbeiter = res.Body.uebermittleAusweisdatenResponse.mitarbeiter
  
                      var raumzonen = berechtigung.raumzonen.raumzone;
                      var zusatzberechtigungen = berechtigung.zusatzberechtigungen.zusatzberechtigung;
                      var mitnahmenachweise = berechtigung.mitnahmenachweise.mitnahmenachweis;
  
                      var fahrzeugtypen= fahrerlaubnis.fahrzeugtypen.fahrzeugtyp;
                      var klassen= fahrerlaubnis.klassen.klasse;
  
                      var auftraggeberliste = lieferant.auftraggeberListe.auftraggeber;
  
                      var name = mitarbeiter.name;
  
                      document.getElementById('messages').innerHTML = "&lt;b&gt; Ausweis &lt;/b&gt;&lt;br\&gt;";
                      document.getElementById('messages').innerHTML += "Nummer: "+ausweis.nummer+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Gueltig bis: "+ausweis.gueltigBis+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Farbe: "+ausweis.farbe+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Gueltigkeit: "+ausweis.gueltigkeit+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Bemerkung: "+ausweis.bemerkung+'&lt;br\&gt;&lt;br\&gt;';
  
                      document.getElementById('messages').innerHTML += "&lt;b&gt; Mitarbeiter &lt;/b&gt;&lt;br\&gt;";
                      document.getElementById('messages').innerHTML += "Personalnummer: "+mitarbeiter.personalnummer+'&lt;br\&gt;';
                      if(name.titel!=undefined){
                          document.getElementById('messages').innerHTML += "Titel: "+name.titel+'&lt;br\&gt;';
                      }
                      document.getElementById('messages').innerHTML += "Vorname: "+name.vorname+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Nachname: "+name.nachname+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Funktionsbezeichnung: "+mitarbeiter.funktionsbezeichnung+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Firma: "+mitarbeiter.firma+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "EU Freistellung: "+mitarbeiter.eUFreistellung+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Bild: &lt;img align='top' src = 'data:image/png;base64,"+mitarbeiter.bild+"'\&gt;&lt;br\&gt;&lt;br\&gt;";
  
                      document.getElementById('messages').innerHTML += "&lt;b&gt; Berechtigung &lt;/b&gt;&lt;br\&gt;";
                      document.getElementById('messages').innerHTML += "Raumzonen: ";
                      for(i=0,j=raumzonen.length; i&lt;j; i++){
                          document.getElementById('messages').innerHTML += raumzonen[i];
                          if(i == j-1){
                              document.getElementById('messages').innerHTML += "&lt;br\&gt;";
                          }
                          else{
                              document.getElementById('messages').innerHTML += ", ";
                          }
                      }
                      document.getElementById('messages').innerHTML += "Mitnahmenachweise: &lt;br/&gt;";
                      for(i=0,j=mitnahmenachweise.length; i&lt;j; i++){
                          var space = "&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp";
                          var gegenstaende = mitnahmenachweise[i].gegenstaende.gegenstand;
  
                          document.getElementById('messages').innerHTML += "&amp;nbsp&amp;nbsp&amp;nbsp"+(i+1)+") Mitnahmenachweis:&lt;br/&gt;";
                          document.getElementById('messages').innerHTML += space+"Personengruppe: "+mitnahmenachweise[i].personengruppe+'&lt;br\&gt;';
                          document.getElementById('messages').innerHTML += space+"Gegenstaende: ";
                          for(x=0,y=gegenstaende.length; x&lt;y; x++){
                              document.getElementById('messages').innerHTML += gegenstaende[x];
                              if(x == y-1){
                                  document.getElementById('messages').innerHTML += "&lt;br\&gt;";
                              }
                              else{
                                  document.getElementById('messages').innerHTML += ", ";
                              }
                          }
                      }
                      document.getElementById('messages').innerHTML += "Zusatzberechtigungen: ";
                      for(i=0,j=zusatzberechtigungen.length; i&lt;j; i++){
                          document.getElementById('messages').innerHTML += zusatzberechtigungen[i];
                          if(i == j-1){
                              document.getElementById('messages').innerHTML += "&lt;br\&gt;";
                          }
                          else{
                              document.getElementById('messages').innerHTML += ", ";
                          }
                      }
                      document.getElementById('messages').innerHTML += "&lt;br\&gt;";
  
                      document.getElementById('messages').innerHTML += "&lt;b&gt; Fahrerlaubnis &lt;/b&gt;&lt;br\&gt;";
                      document.getElementById('messages').innerHTML += "Zuigeordnete Firma: "+fahrerlaubnis.zugeordneteFirma+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Gueltig seit: "+fahrerlaubnis.gueltigSeit+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Klassen: ";
                      for(i=0,j=klassen.length; i&lt;j; i++){
                          document.getElementById('messages').innerHTML += klassen[i];
                          if(i == j-1){
                              document.getElementById('messages').innerHTML += "&lt;br\&gt;";
                          }
                          else{
                              document.getElementById('messages').innerHTML += ", ";
                          }
                      }
                      document.getElementById('messages').innerHTML += "Fahrzeugtypen: ";
                      for(i=0,j=fahrzeugtypen.length; i&lt;j; i++){
                          document.getElementById('messages').innerHTML += fahrzeugtypen[i];
                          if(i == j-1){
                              document.getElementById('messages').innerHTML += "&lt;br\&gt;";
                          }
                          else{
                              document.getElementById('messages').innerHTML += ", ";
                          }
                      }
                      document.getElementById('messages').innerHTML += "&lt;br\&gt;";
  
                      document.getElementById('messages').innerHTML += "&lt;b&gt; Lieferant &lt;/b&gt;&lt;br\&gt;";
                      document.getElementById('messages').innerHTML += "QS: "+lieferant.qS+'&lt;br\&gt;';
                      document.getElementById('messages').innerHTML += "Lieferantenart: "+lieferant.lieferantenart+'&lt;br\&gt;';
                      if(auftraggeberliste.length &gt; 0){
                          var space = "&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp";
                          document.getElementById('messages').innerHTML += "Auftraggeber Liste: &lt;br/&gt;";
                          for(i=0,j=auftraggeberliste.length; i&lt;j; i++){
                              var auftraggeber = auftraggeberliste[i];
                              document.getElementById('messages').innerHTML += "&amp;nbsp&amp;nbsp&amp;nbsp"+(i+1)+") Auftraggeber:&lt;br/&gt;";
                              document.getElementById('messages').innerHTML += space+"Firmen ID Auftraggeber: "+auftraggeber.firmenIDAuftraggeber+"&lt;br/&gt;";
                              document.getElementById('messages').innerHTML += space+"Auftraggeber Name: "+auftraggeber.auftraggeberName+"&lt;br/&gt;";
                              document.getElementById('messages').innerHTML += space+"QS: "+auftraggeber.qS+"&lt;br/&gt;";
                          }
                      }
                      document.getElementById('messages').innerHTML += "&lt;br\&gt;";
                  });
              }
          &lt;/script&gt;   &lt;/head&gt;         &lt;body onLoad="init()"&gt;
          &lt;h3&gt;Uebermittle Ausweisdaten&lt;/h3&gt;
          &lt;table&gt;             &lt;tr&gt;
                  &lt;td&gt;
                      &lt;br/&gt;&lt;b&gt;Ihre Daten: &lt;/b&gt;&lt;br/&gt;&lt;br/&gt;
                      &lt;div id="messages"&gt;&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;     &lt;/body&gt; &lt;/html&gt;
  </code></pre>
  
  <p>Those HTML will generate something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DyGLS.png" alt="Result"></p>
  
  <p>If I used AJAX as the inbound, I can easily do that by specifying the resourceBase attribute on the connector. But, what I need is: HTTP Get as the inbound.</p>
  
  <p>How to do so? Is there any attribute in http, which similar with resourceBase attribute? Thanks</p>