facebook

XmlHttp request help

  1. MobiOne Archive
  2.  > 
  3. Getting Help – General
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #317055 Reply

    Yann
    Member

    Edited (Wayne): moved from How-To/Tutorials formum

    hi every one
    somebody can explain me how i can retreive data from remote web server and display it on my webapps?
    i made a index page with a listitem slide left animation linked to an actu.mobi page.
    i would like display result of this page http://www.tahizea.com/mobile/test.asp on my actu.mobi via xmlhttp request.
    could you say me what component i need put on my actu.mobi page to display the result?
    if you have an example of jquery you will save me
    Thanks a lot

    #317075 Reply

    Yann
    Member

    i tried this code
    $(“m1-actu-resultactu”).load(“http://www.tahizea.com/mobile/test.asp”);
    the content of text field “resultactu” disappears but the remote page does not appear
    i don’t understand.
    can you help me?
    thanks

    #317080 Reply

    support-michael
    Keymaster

    @Yann
    Yes, it is possible. Will post an example shortly.

    #317093 Reply

    Yann
    Member

    Thanks a lot

    #317137 Reply

    Yann
    Member

    up ?
    nobody can help me?
    thanks

    #317159 Reply

    Yann
    Member

    I tried to put this line on my asp remote page
    Response.AddHeader(“Access-Control-Allow-Origin”,”*”)
    but i’ve the same error :
    XMLHttpRequest cannot load http://*****.***/mobile/test.asp. Origin null is not allowed by Access-Control-Allow-Origin.

    🙁

    #317164 Reply

    Yann
    Member

    i found a solution whith the script bellow but i would like specify dinamycly the div target
    if i change “updatePage; ” by updatePage(target); i need to reload 2 time the page…
    see my test.htm bellow
    any idea?

    Thanks
    Yann

    <script type=”text/javascript”>
    var invocation = new XMLHttpRequest();

    function callOtherDomain(url,target)
    {
    invocation.onreadystatechange = updatePage;
    invocation.open(‘GET’, url, true);
    invocation.send(cible);
    }

    function updatePage(target)
    {
    if (invocation.readyState == 4)
    {
    if (invocation.status == 200)
    {
    document.getElementById(“m1-promo-text2″).innerHTML = invocation.responseText;
    }
    }
    }

    </script>

    <form id=”controlsToInvoke” action=””>
    <p>
    <input type=”button” value=”Click to Invoke Another Site” onclick=”callOtherDomain(‘http://www.tahizea.com/mobile/test.asp&#8217;,’m1-promo-text2′)” />
    </p>
    </form>

    <div id=”m1-promo-text2″>

    </div>

    #317183 Reply

    support-michael
    Keymaster

    @Yann
    I apologize for the delay in providing an example. Below is a quick outline of an example I made with the src code attached at the end.

    I created this simple UI that consists of a panel for displaying remote content and 2 buttons for loading remote content into the panel and clearing the content. The panel’s vertical scrollbar property is enabled and the content area height was expanded to about 775 but really should be much larger to hold all the content. The Get Data button is linked to a custom javascript function “getRemoteData()” that will load remote content. A Clear button is wired to the “clearData()” function to remove all content from the panel.
    See attachment remote-data-data.png
    I modified the generated HTML by adding a DIV element with id “remote-data”. This div is the root element (i.e., container) for the custom content when it is fetched.
    See attachment remote-data-html.png
    I linked the Get Data and Clear buttons to the custom javascript functions that I created in the remote-data_custom.js file.
    See attachment remote-data-js.png

    I encountered the same cross-domain security problem as you so I copied the test content into the same same directory as my mobione webapp. There is a way to get around this problem but it will take more time to describe than is available atm.

    Lastly I noticed that the content did not display very well. For example, the line height was too tall and the text did not wrap. So I added a CSS class remote-data to the remote-data.css file and referenced it in the html #remote-data element.
    See attachment remote-data-css.png

    A final note, this example has some issue where you can only perform 2 iterations of fetching and clearing data. I’ll figure this out later.

    Following is a zip containing the design and source files used in this example.
    See attachment remote-data.zip

    Attachments:
    You must be logged in to view attached files.
    #317184 Reply

    support-michael
    Keymaster

    The example should be easily modified to load content into a different div your design accounts for that. I might be able to assist more if you can provide more details about how you plan to dynamically update multiple content areas.

    #317189 Reply

    Yann
    Member

    Thanks a lot for your example
    i found a solution about cross domain problem.
    function callOtherDomain(url,target)
    {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = ‘sending…’;
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = function() {ajaxDone(target);};
    req.open(“GET”, url, true);
    req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
    req = new ActiveXObject(“Microsoft.XMLHTTP”);
    if (req) {
    req.onreadystatechange = function() {ajaxDone(target);};
    req.open(“GET”, url, true);
    req.send();
    }
    }
    setTimeout(“ajax(page,’scriptoutput’)”, 10000);
    }
    function ajaxDone(target) {
    // only if req is “loaded”
    if (req.readyState == 4) {
    // only if “OK”
    if (req.status == 200 || req.status == 304) {
    results = req.responseText;
    document.getElementById(target).innerHTML = results;
    } else {
    document.getElementById(target).innerHTML=”ajax error:\n” +
    req.statusText;
    }
    }
    }​
    now i can get remote asp page from html and display it in my dynamic div.
    i also add a specific css for this custom page.
    thanks again
    Yann

    #317218 Reply

    aurontidus
    Member

    Yann,

    could you please tell me how do you use your function, because i have to make my website works with a web service, and i don’t know how to do it.

    Thanks in advance

    #317219 Reply

    Yann
    Member

    Hi aurontidus
    i post an example in attachment.
    i made an remote asp page and i added a:

    Response.AddHeader"Access-Control-Allow-Origin","*" 

    i put in this ASP page my div and add a custom css called by this function

    $("head").append(
           $("<link rel='stylesheet' href='promo_custom.css' type='text/css'/>"));

    (not in my attached example)

    so i call from my local HTML page a remote ASP page. i made this because i want to try compile my html pages
    i hope i could help you
    Yann

    Attachments:
    You must be logged in to view attached files.
    #317220 Reply

    support-michael
    Keymaster

    @Yann

    I started to mention the technique you describe for loading a custom css file. Here is a similar example of how I load my custom css after the UI is loaded and ready. This phoneui.documentReadyHandler() function is stubbed out in you custom.js file for your UI project.

    phoneui.documentReadyHandler = function() {
         $("head").append(
                     $("<link rel='stylesheet' href='mobibike-news_custom.css' type='text/css'/>"));
             
        loadArticles();
    }
    #317221 Reply

    Yann
    Member

    Yes I took your model to do this, but I think that aurontidus is interested to display the remote ASP page from local HTML. If I understood correctly?
    😉
    Yann

    #317222 Reply

    aurontidus
    Member

    Actully, i have to display the result of a web service call.

    For example, i have to type a zipcode in a textfield, and it will display the result, via this web service :

    http://www.webservicemart.com/uszip.asmx?op=ValidateZip

    Anyone knows how to do this ?

Viewing 15 posts - 1 through 15 (of 19 total)
Reply To: XmlHttp request help

You must be logged in to post in the forum log in