tags:

views:

24

answers:

2

I have working Ajax call. Now I need to parametrize it as the same Ajax could all different scripts on the server.

I need to

  • run different scripts in xmlhttp.open("GET","/ajaxrun?run=login_build",true);
  • name div's in html so the ajax will update correct td

What is the way to do so in Ajax?

I thought

  • I would call loadXMLDoc like <button onclick='loadXMLDoc("login_build")' type='button'> and then
  • change the function declaration to function loadXMLDoc(script, function() and
  • change the get call to xmlhttp.open("GET","/ajaxrun?run="+script,true); and finally
  • change the div to document.getElementById(script).innerHTML=xmlhttp.responseText;

but it doesn't do anything

bit of my html

<script type='text/javascript'>
      //<![CDATA[
        function loadXMLDoc()
        {
          if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            }
          else
            {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          xmlhttp.onreadystatechange=function()
            {
            document.getElementById("run").innerHTML=xmlhttp.readyState;
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
              document.getElementById("run").innerHTML=xmlhttp.responseText;
              }
            }
          xmlhttp.open("GET","/ajaxrun?run=login_build",true);
          xmlhttp.send();
        }
      //]]>
    </script>
  </head>
  <body>
    <h1>Available test suits</h1>

    <br/><br/>
    <table>
      <tr>
        <td>
          <a href='run?run=login_build'>login_build</a>
        </td>
        <td>
          <button onclick='loadXMLDoc()' type='button'>

            run
          </button>
        </td>
        <td>
          <div id='run'>script results</div>
        </td>
      </tr>
      <tr>
        <td>

          <a href='run?run=login_cycle_build'>login_cycle_build</a>
        </td>
        <td>
          <button onclick='loadXMLDoc()' type='button'>
            run
          </button>
        </td>
        <td>
          <div id='run'>script results</div>

        </td>
      </tr>
+1  A: 

jQuery was made for this type of work. Just in general, you don't want to have all that boilerplate on top to create an XHR object.

Specifically, I like passing object literals around to make this type of generic code possible:

function generic(params) {
   if (params.div && params.div instanceof Array && params.div.size() > 0) {
      //multiple divs handling goes here
   }
   ajax(params.url, params.params);
}


generic({
  divs: ['div1','div2'],
  url: 'http://google.com',
  params: {
    param1:'hello',
    param2:'hi'
  }
})
Anatoly G
do I have to use jQuery or can I do it using pure Ajax like in here? http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
Radek
You can use whatever you like, but there is nothing unpure about jQuery AJAX. All it is is a centralized, well developed, cross-browser implementation of AJAX. Essentially, it's a library you can re-use anywhere. The above does not depend on jQuery. It's just plain Javascript
Anatoly G
I just didn't want to introduce jQuery because of one little thing. And also it helped me to understand how it works ... thank you for your help.
Radek
+1  A: 

the scripts needs to be called simply via function loadXMLDoc(what_to_run)

<script type='text/javascript'>
  //<![CDATA[
    function loadXMLDoc(what_to_run)
    {
      if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
      else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange=function()
        {
        document.getElementById(what_to_run).innerHTML="<BLINK> processing ...</BLINK>"
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById(what_to_run).innerHTML=xmlhttp.responseText;
          }
        }
      xmlhttp.open("GET","/ajaxrun?run="+what_to_run,true);
      xmlhttp.send();
    }
  //]]>

and bit from <BODY>

    <td>
      <button onclick='loadXMLDoc("login_build")' type='button'>

        run
      </button>
    </td>
    <td>
      <div id='login_build'>script results</div>
    </td>
Radek
+1 for perseverance :)
kfl62