Question

Here is code that is done in jQuery and the aim is to change it to javascript. The original code is from here: php proxy

Here is the jQuery to change to javascript:

$(function(){

  // Handle form submit.
  $('#params').submit(function(){
    var proxy = 'ba-simple-proxy.php',
      url = proxy + '?' + $('#params').serialize();

      // Make GET request.
      $.get( url, function(data){

        $('#response')
          .html( '<pre class="brush:xml"/>' )
          .find( 'pre' ) // To make the lines proper and to frame the text.
            .text( data );

      });

    // Prevent default form submit action.
    return false;
  });
});

And below is the same code in javascript, which is not ready yet. The problem is that it is not logical at the moment.

The form bit of html which is not included here calls ajaxcontent(). ajaxcontent() creates the “.html” and “.text” part of the jQuery. JQuery “.find” can be ignored at the moment.

In ajaxcontent() the “pre” tag is created first, then added class “brush:xml” in it. Then “createTextNode” adds the source coude from the page that is asked. This is the “( data )” in jQuery. Here the code fails, since ajax wants to place the information to id=”response”, but ajaxcontent() still needs to do this line “xelement.appendChild(xtext);” to attach the text to “xelement”.

function loadajax() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("response").innerHTML=xmlhttp.responseText;
        }
    }

    var urlvar=(document.getElementById("url").value)

    xmlhttp.open("GET","ba-simple-proxy.php&url="+urlvar,true);
    xmlhttp.send();
}

function ajaxcontent() {
    var xelement=document.createElement("pre");
    xelement.className="brush:xml";
    var xtext=document.createTextNode( loadajax() );
    xelement.appendChild(xtext);
}

Any suggestions how to make this work? The jQuery part is a working example but the javascript part is not yet.

Answer 1

OK here is a Ajax POST without jQuery(and a JSFiddle to see it in action, note that this used JSFiddle echo service which requires that the method be POST which is slightly different):

<input id="url" value="http://google.com/"/>
<button id="Button">No jQuery POST</button>
<div id="response" style="border: dashed 1px black;"></div>

document.getElementById('Button').onclick = function() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("response").innerHTML = "Responce returned!<br/>Data:" + xmlhttp.responseText;
        }
    }

    var params = "html=" + escape(document.getElementById("url").value) + "&delay=3";
    xmlhttp.open("POST", "/echo/html/", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");

    xmlhttp.send(params);
}

Now this is why things like jQuery are so nice, they hide all of this from the developer 🙂