Callback behavior of Javascript Object Error after XMLHttpRequest onreadystatechange statement-Collection of common programming errors

I am trying to get h=Af?????????? value from reporting link at social networking site. I test with this : http://jsfiddle.net/rtnNd/6/ to retrieve the value, it works when I tested out.

but I don’t want user to interact with it. the script have to auto retrieve the the page and get the value of it. ( I test with Google Chrome Javascript Console) when I try with following coding which does scrabble the page and assign to value d and find the value of h, but search/replace doesn’t work at all. Why getElementsByClassName is not working in that?

With JQuery:

function getParameterByName(name, path) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(path);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

var URL = 'http://www.facebook.com/zuck';
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", URL, true);
xmlhttp.setRequestHeader("Content-type", "application/xhtml+xml");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
       if (xmlhttp.status == 404) {
               result = error404;
       }
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              var d = xmlhttp.responseText;
               var jayQuery = document.createElement('script');
               jayQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
               document.getElementsByTagName("head")[0].appendChild(jayQuery);
               var href = $($('.hidden_elem').d.replace('', '')).find('.itemAnchor[href*="h="]').attr('href');
               var fbhvalue = getParameterByName('h', href);
               alert(fbhvalue);
       }
}

I go this error, “ERROR: Uncaught TypeError: Cannot call method ‘replace’ of undefined”, Even I add the jquery.

Without JQuery:

      function getParameterByName(name, path) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(path);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var URL = 'http://www.facebook.com/zuck';
xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", URL, true);
xmlhttp.setRequestHeader("Content-type", "application/xhtml+xml");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
        if (xmlhttp.status == 404) {
                // result = error404;
        }
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                d = xmlhttp.responseText;
                checker(d);
        }
}

function checker(i) {
        i.value = i;

        var hiddenElHtml = i.replace('', '').find('.itemAnchor[href*="h="]').attr('href');

        var divObj = document.createElement('div');
        divObj.innerHTML = hiddenElHtml;

        var itemAnchor = divObj.getElementsByClassName('itemAnchor')[0];
        var href = itemAnchor.getAttribute('href');
        var fbId = getParameterByName('h', href);
        alert(fbId);

}

When I run it, I got the error called “object has no method ‘find'”.

Why getElementsByClassName, getParameterByName, Jquery, getAttribute are not working after xmlhttp.onreadystatechange statement called? please can you point me out. Is there any way to find out how to get value? Thanks for reading my question and answering!

Updated: ( If i visited on profile page, run following script in javascript console of Google Chrome, it gots the h value – but I really don’t want that way… I want to specified the user profile name, it has to retrieve automatically and get the h value of it.)

    var jayQuery = document.createElement('script');
    jayQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jayQuery);

    function getParameterByName(name, path) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(path);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }


    var href = $($('.hidden_elem')[1].innerHTML.replace('', '')).find('.itemAnchor[href*="h="]').attr('href');
    alert(href);
    var fbId = getParameterByName('h', href);
    alert(fbId);

1. If you use this script outside the facebook you will definitely get SOP, It is limited due to security reasons see this: Access Control Allow Origin not allowed by

   So, Let’s imagine you got the response string xmlhttp.responseText, so you cannot use some JQuery or JavaScript functions which only work with DOM objects but it is just plain string. For example, you used find(), attr(), methods which don’t work with strings. You can play with it as a string and nothing more.

2. Your “with jQuery” example is doing a lot of stuff without using jQuery — stuff that jQuery does well. You might want to read up on how to use jQuery with AJAX events. Look at these examples and try them.

   At the beginning, jQuery can be intimidating. But keep looking at the examples on the jQuery website and try them out. Look at some of my old posts for more examples. Like you, I’ve had to learn it by fire over the past few months.

   And don’t forget to the try the jQueryUI examples — you will dance for joy when you try the dialog, tabs, accordion, etc.

   You also might want to break down some of your complicated jQuery statements, such as this one:

   var href = $($('.hidden_elem').d.replace('', '')).find('.itemAnchor[href*="h="]').attr('href');
   

   Adding jQuery methods in a chain like this: $('#myElement').dothis(chain1).dothat(chain2).doanother(); is quick to type and read, but difficult to troubleshoot.

   Good luck!

Originally posted 2013-11-15 04:22:20.