Ajax reload in the wifi demo

Message

kvantumax · #1 Post by **kvantumax** » 07 Mar 2013 17:25

Well, Hello, I'm here again, I have tested an example out of the PIC, (in a real (or traditional) web server) and it works fine, but still have no idea how get the ajax request to work using the wifi demo example.

I've notice that when you make a request using the following http://my_ip/s you get a file with the status of AN4, portD, portA etcetera with the name s.txt so I made the following code to request this file content via Ajax request and even when it works on a real (or traditional) server simulation, it does not work on the wifi demo, can somebody explain why please?

Code developed in ajax:

Code: Select all

const code   char    *indexPage =                                     
"<HTML><HEAD>\
<script>\
function loadXMLDoc()\
{\
var xmlhttp;\
  xmlhttp=new XMLHttpRequest();\
xmlhttp.onreadystatechange=function()\
  {\
  if (xmlhttp.readyState==4 && xmlhttp.status==200)\
    {\
    document.getElementById(\"myDiv\").innerHTML=xmlhttp.responseText;\
    }\
  }\
xmlhttp.open(\"GET\",s,true);\
xmlhttp.send();\
}\
</script>\
</HEAD><BODY>\
<h1>WiFi Mini Web Server</h1>\
<script src=/s></script>\
<table><tr><td valign=top>\
<table border=1 style=\"font-size:20px ;font-family: terminal ;\">\
<tr><th colspan=2>ADC</th></tr>\
<tr><td>AN4</td><td>\
<div id=\"myDiv\"><script>document.write(AN4)</script></div>\
</td></tr></table></td></tr></table><p></p> \
<div id=\"myDiv\"></div>\
<button type=\"button\" onclick=\"loadXMLDoc()\">Press button</button>\
" ;

const code   char    *indexPage2 =  "</BODY></HTML>\
" ;

I know that once I am able to receive the string s.txt I will have to separate the AN4 value from the others but this is pure javascript.

Sy · #2 Post by Sy » 07 Mar 2013 19:10

There isn't really anything to go on in the code you posted.

The GET request should specify a parameter that the server (PIC) can intepret to tell what you want. Without any parameters, the GET request is NOT AJAX, its just a regular HTTP request.

Also you need to post the code that interprets the URL and decides what to deliver.

kvantumax · #3 Post by **kvantumax** » 07 Mar 2013 20:45

First of all, thank you for being here again, nobody else seems to be either willing or knowledgeable to help me out.

There isn't really anything to go on in the code you posted.

I don't know what you mean with this, and let me tell you something, even if it hurts, but your comments are very abstracts.

It may not be the final super professional AJAX code but I tested it and is working, what else should I expect?

The GET request should specify a parameter that the server (PIC) can interpret to tell what you want. Without any parameters, the GET request is NOT AJAX, its just a regular HTTP request.

I don't know what are you talking about. I read the book you suggested and I have an example working in a server as you suggested too, how I'm suppose to know what GET parameter to specify so the PIC will understand it, this is not an ajax problem but mikroc programming, that's why I'm here and not in an AJAX forum.

Also you need to post the code that interprets the URL and decides what to deliver

I don't want to interpret the URL now, (I'm not trying to release a final product here) the only thing I want to know now is how get the entire URL content, (not the default page but the s.txt content) in this case http://my_ip/s (or something similar) and show it inside the table where the AN4 content is suppose to go.

Maybe I don't understand what you are trying to say, but I feel you neither understand me.

Best regards

Sy · #4 Post by Sy » 07 Mar 2013 21:13

Ok, the difference between an AJAX request and a normal GET request is nothing, they are identical, what makes it AJAX, is that the client initiates a connection with the server issues a request asynchronously. This can be to a standalone document, which provides the response or to the same document with parameters that tell the server to treat the request different. For example:

A CGI, PHP or ASP page can look at the URL and request parameters and make a decision based on the supplied request parameters. I haven't tried this on a PIC so I'm unsure how you go about getting the parameters, the simple solution is to request one file for the main content of the document and another file for the dynamic AJAX requests.

The server can look at the file requested and then respond accordly. In your client side you need to capture the response, this is how I would do it:

Code: Select all

// From the code I posted before, add this:
objXMLhttp.onreadystatechange = theNameOfYourJavaScriptCallback;

Callback code:

Code: Select all

function theNameOfYourJavaScriptCallback() {
    var objHTTP = null, strResponseType, response, objXMLRoot = null;
     
    if ( !(arguments && arguments.length && arguments[0].target) ) {
      return;
    }
    if ( !(objHTTP = arguments[0].target) ) {
      throw( "No Http object!" );
    }
    if ( !(objHTTP.readyState == 4 && objHTTP.status == 200) ) {
      return;
    }    
    if ( !(objHTTP.responseText || objHTTP.responseText.length > 0) ) {
  // No response from server, abort!    
      return;
    }
    try{
      if ( objHTTP.responseText.indexOf("<?xml") >= 0 ) {
        strResponseType = XML_RESPONSE;
        response = objHTTP.responseXML;
      } else {
  // No XML in response so assume JSON
        strResponseType = JSON_RESPONSE;
        response =  eval('(' + objHTTP.responseText + ')');    
      }
    } catch( ex ) {
// Ignore error here...we just want to capture it!
      return;    
    }    
  // Catch potential IE and Opera errors
    if ( !response ) {
      throw( "Invalid AJAX response!" );
    }
    if ( strResponseType == XML_RESPONSE ) {
      objXMLRoot = response.documentElement;
    }
// Decode the response and do something with it....
// If its and XML response the objXMLRoot will not be null
}

Hope this makes sense. The callback function is automatically called when the client receives a response from the server, if you are sending back XML then you need to decode the XML via the objXMLRoot object, however JSON is by far the easier and doesn't need parsing, its already a javascript compatible object.

Is the WiFi code you downloaded from LibStock recent? The last version I uploaded actually loads two documents, "style.css" and "inner.html", you could modify it to request a 3rd, the AJAX content.

kvantumax · #5 Post by **kvantumax** » 10 Apr 2013 19:41

Finally I did it using jQuery:

http://www.libstock.com/projects/view/6 ... -http-demo

Ajax reload in the wifi demo

Ajax reload in the wifi demo

Re: Ajax reload in the wifi demo

Re: Ajax reload in the wifi demo

Re: Ajax reload in the wifi demo

Re: Ajax reload in the wifi demo

Copyright© 2020 MikroElektronika d.o.o.