When dealing [...]]]> It’s definitely a good practice to use prepared statements for SQL queries. Apart from other things, SQL injections are eliminated without necessity to escape data. For PHP and MySQL mysqli prepared statements are probably the most common prepared statements solution. But I don’t like one of their aspects.

When dealing with SQL queries, most of the times you just need simply select or insert some data from/to a database. Very trivial task in its nature. We would probably expect this to be really short code to type. But it is not. Even though you don’t need to escape SQL data, there is a quantum of code to type for even the simplest query.

You at least need to:

• 1. initialize a prepared statement
• 2. create the statement
• 3. bind variables to the statement as parameters (if there are any)
• 4. execute the statement
• 5. bind results to variables
• 6. fetch results
• 7. close the statement

in the case of SELECT statement. When you need to insert data the situation is similar, though slightly better.

That doesn’t sound good at all. Six or seven steps and we just want to get some data from a database. And of course you have to type some if conditions, brackets and so on. Simply quite a long code for such a short actual task. And it even gets worse when we want to bind an array of parameters.

I made some wrapper classes for the most common SQL tasks (or at least for the SQL tasks which I use most commonly). With them selecting data is reduced to two steps:

• 1. define query
• 2. get results

Of course, these two steps just encapsulate previously mentioned (and in fact necessary) steps. But defining query to get results from a database was simply all we wanted, so with these classes it will be much easier and faster to write SQL prepared statements in PHP. So let’s show the implementations and the usage of aforementioned classes.

//definitions for mysqli objects
define("HOST","localhost");
define("DBNAME","database");
define("USERNAME","username");
define("PASSWORD","password");

DBSelectQuery

Implementation:

class DBSelectQuery
{
    private $db;
    private $query;
    private $types;
    private $params;
    private $items;
    private $errorMessage;
    private $failure;

    public function __construct($db=null, $query,$params=array(),$types="")
    {
        if ($db!=null) $this->db=$db; else @$this->db = new mysqli(SQL_HOST, SQL_USERNAME, SQL_PASSWORD, SQL_DBNAME);
        if ($this->db->connect_errno)
        {
            $this->failure=true;
        }
        else
        {
            $this->db->set_charset("utf8");
            $this->query=$query;
            if (strcmp($types, "") == 0)
            {
                for ($i = 0; $i < count($params);$i++)
                {
                    if (is_int($params[$i])) $types.="i";
                    elseif (is_double($params[$i])) $types.="d";
                    else  $types.="s";
                }
            }
            $this->types=$types;
            $this->params=$params;
            $this->failure=false;
            $this->selectQuery();
        }
    }

    public function setErrorMessage($message)
    {
       $this->errorMessage=$message;
    }          

    public function getResults($index=-1)
    {
        if ($this->failure == true)
        {
            if ($this->errorMessage != NULL) print $this->errorMessage;
            return FALSE;
        }
        if (is_string($index))
        {
           for ($i = 0; $i < count($this->items); $i++) $results[]=$this->items[$i][$index];
           return $results;
        }
        else
        {
            if ($index >= 0 && $index < count($this->items))
            return $this->items[$index];
            else return $this->items;
        }
    }

    public function getResult($name,$index=0)
    {
        if ($this->failure == true)
        {
            if ($this->errorMessage != NULL) print $this->errorMessage;
            return FALSE;
        }
        return $this->items[$index][$name];
    }    

    public function queryFailured()
    {
        return $this->failure;
    }

    private function selectQuery()
    {
        $selectStatement = $this->db->stmt_init();
        if ($selectStatement->prepare($this->query))
        {
          if (strcmp($this->types, "") != 0) call_user_func_array(array($selectStatement, "bind_param"), $this->refValues(array_merge(array($this->types), $this->params)));
          $selectStatement->execute();

          $meta = $selectStatement->result_metadata();

          while ($metaArray = $meta->fetch_field())
          {
              $parameters[] = &$row[$metaArray->name];
          }
          call_user_func_array(array($selectStatement, 'bind_result'), $parameters);                

          while ($selectStatement->fetch())
          {
              foreach($row as $key => $value)
              {
                  $copy[$key] = $value;
              }
              $this->items[] = $copy;
          }
          if (!empty($selectStatement->error))
          {
              $this->failure=true;
          }
          $selectStatement->close();
        }
        else
        {
            $this->failure=true;
        }

    }

    private function refValues($arr)
    {
         if (strnatcmp(phpversion(),'5.3') >= 0)
         {
             $refs = array();
             foreach($arr as $key => $value)
                 $refs[$key] = &$arr[$key];
             return $refs;
         }
         return $arr;
    }
}

Example usage:

@$db = new mysqli(HOST, USERNAME, PASSWORD, DBNAME);
if (mysqli_connect_errno()) die("Database connection error occured!"); 

$selectQuery = new DBSelectQuery($db,"SELECT id,name FROM table WHERE url = ? AND category_id = ?",array($URL,$kategoriaID),"si");
$results = $selectQuery->getResults(); //get array of all columns results
$selectQuery->setErrorMessage("Error occured!");
$rowResults = $selectQuery->getResults(2); //get array of all columns results in 3rd row of a result table
$nameResults = $selectQuery->getResults("name"); //get array of the name column results
$nameResult = $selectQuery->getResults("name"); //get value of the name column in 1st row of a result table
$nameResult = $selectQuery->getResult("name",0); //get value of the name column in 1st row of a result table
$nameResult = $selectQuery->getResult("name",2); //get value of the name column in 3rd row of a result table
print "Error did".($selectQuery->queryFailured() ? "":" not")." occured";

DBInsertQuery

Implementation:

class DBInsertQuery
{
    private $db;
    private $query;
    private $types;
    private $params;
    private $failure;

    public function __construct($db=null, $query,$params=array(),$types="")
    {
        if ($db!=null) $this->db=$db; else @$this->db = new mysqli(SQL_HOST, SQL_USERNAME, SQL_PASSWORD, SQL_DBNAME);
        if ($this->db->connect_errno)
        {
            $this->failure=true;
        }
        else
        {
            $this->db->set_charset("utf8");
            $this->query=$query;
            if (strcmp($types, "") == 0)
            {
                for ($i = 0; $i < count($params);$i++)
                {
                    if (is_int($params[$i])) $types.="i";
                    elseif (is_double($params[$i])) $types.="d";
                    else  $types.="s";
                }
            }
            $this->types=$types;
            $this->params=$params;
            $this->failure=false;
            $this->insertQuery();
        }
    }

    public function queryFailured()
    {
        return $this->failure;
    }

    private function insertQuery()
    {
        $insertStatement = $this->db->stmt_init();
        if($insertStatement->prepare($this->query))
        {
          if (strcmp($this->types, "") != 0) call_user_func_array(array($insertStatement, "bind_param"), $this->refValues(array_merge(array($this->types), $this->params)));
          $insertStatement->execute();

          if (!empty($insertStatement->error))
          {
              $this->failure=true;
          }
          $insertStatement->close();
        }
        else $this->failure=true;
    }     

    private function refValues($arr)
    {
         if (strnatcmp(phpversion(),'5.3') >= 0)
         {
             $refs = array();
             foreach($arr as $key => $value)
                 $refs[$key] = &$arr[$key];
             return $refs;
         }
         return $arr;
    }
}

Example usage:

@$db = new mysqli(HOST, USERNAME, PASSWORD, DBNAME);
if (mysqli_connect_errno()) die("Database connection error occured!"); 

$insertQuery = new DBInsertQuery ($db,"INSERT INTO table  (name, category_id)  VALUES (?, ?)", array($name, $category_id),"si");
$insertQuery->setErrorMessage("Error occured!");
print "Error did".($insertQuery->queryFailured() ? "":" not")." occured";

DBTransactionQuery

Implementation:

class DBTransactionQuery
{
    private $db;
    private $query;
    private $message;

    public function __construct($db=null, $query, $message=NULL)
    {
        if ($db!=null) $this->db=$db; else @$this->db = new mysqli(SQL_HOST, SQL_USERNAME, SQL_PASSWORD, SQL_DBNAME);
        if ($this->db->connect_errno)
        {
            $this->failure=true;
        }
        else
        {
            $this->db->set_charset("utf8");
            if
            (
             strcasecmp($query, "start transaction") ||
             strcasecmp($query, "commit") ||
             strcasecmp($query, "rollback")
            )
            {
                $this->query=$query;
                $this->message=$message;
                $this->transactionQuery();
            }
        }
    }       

    private function transactionQuery()
    {
        $transactionStatement = $this->db->stmt_init();
        if ($transactionStatement->prepare($this->query))
        {
          $transactionStatement->execute();
          $transactionStatement->close();
        }
        if ($this->message != NULL) echo($this->message);
    }     

}

Example usage:

@$db = new mysqli(HOST, USERNAME, PASSWORD, DBNAME);
if (mysqli_connect_errno()) die("Database connection error occured!"); 

new DBTransactionQuery($db,"START TRANSACTION");  

...
some other queries
...

if ($success == true)
{
new DBTransactionQuery($db,"COMMIT","Transation was successful.");
}
else
{
new DBTransactionQuery($db,"ROLLBACK","Transation failed.");
}

Note: DBInsertQuery can of course be used for other queries (such as delete or update queries) where you don’t store query results.

You can download these classes here.

With OWIDIG service you can grab images from any website, view them, filter [...]]]> OWIDIG is an online image grabber and downloader of website images. I introduced it last month in this article. Since then several more features were added. This article contains detailed review of OWIDIG functionality.

With OWIDIG service you can grab images from any website, view them, filter them, get information about them or download them. You may include or exclude images which are repeated. Moreover, CSS images (located inside style tags, external stylesheets (via link or import) and also inside inline styles) are supported as well. Images can be grabbed from sites with standard HTTP protocol as well as secure HTTPS protocol.

There are two basic modes – the LIST mode and the TABLE mode. In the list mode all images are listed one-by-one, side-by-side. We can hover over them to see more details. We may click on them to open them in a new window in their original dimensions. You can even share them via social networks or email. In the table mode we can see images in two tables – one table for standard HTML images, another one for images inside CSS. By clicking on column headers you can sort listed images according chosen property. The preview size of images in this mode might or might not be limited (by default it is limited to 330 pixels in both width and height).

Another feature is a deep grabbing. You may want to grab images from the whole website including all its subsections. OWIDIG enable users to grab images up to link depth of 10 for sitelinks that have the same domain as the original URL. Of course, the deep grabbing may sometimes take a significant amount of time, if there are many subsections. For grabbing from single URL there is one more option to grab images generated with JavaScript. This can be used when images aren’t in the original source code, but are in the code generated with JavaScript.

OWIDIG provides lots of filtering options to grab just those images you really want to grab. You can choose whether to include both standard and CSS images, or only ones of them. You can filter images by their dimensions, type, URL, filename and ordinal number. You can set user-agent, proxy, referrer and cookies to influence returned grabbed image content.

And finally we come to downloading of images. You can just list all images in a new window and then use saving capabilities of browser to save them. You may also use an applet. This applets requires user approval as it writes data – the images – to your hard drive. Using this applet you can set filenames and paths of downloaded images. In some browsers (Opera and Firefox support, partial Chrome support – for smaller archives) you can also create ZIP archive from images (you can set filenames of zipped images as well).

First let’s talk [...]]]> At the end of the previous part of this tutorial we briefly introduced echo command and I promised that we will deal with creating batch files in the command prompt. Actually, creating batch files is the second step. The first step is to create an arbitrary file.

First let’s talk about echo again. Type

echo /?

to see how to use echo and what is its purpose. The output is:

Displays messages, or turns command-echoing on or off.

  ECHO [ON | OFF]
  ECHO [message]

Type ECHO without parameters to display the current echo setting.

Last time we showed turns command-echoing on or off usage. This time ECHO [message] is the important one. Try few examples:

C:\Users\moya>echo text
text

C:\Users\moya>echo car
car

Now we are almost done – we can echo text to the command line. Only other thing to do is to redirect that output to a file. Change current directory to Desktop:

cd Desktop

and type:

echo car > ourfile.txt

In general command > filename redirect command output to a file. That’s exactly what we needed. Now ourfile.txt contains car string. Type

echo car > ourfile.txt

to see it. The file ourfile.txt will be opened and will contain car string.

Now type

echo house > ourfile.txt

and open the file again. It now contains house string and car string was rewritten. What about not rewriting original content, but just appending it? It’s easy:

echo car >> ourfile.txt

This will append echoed content to the end of the file. Its first line will now contain house and its second line car.

Now try to echo some longer sentence:

echo This is a tutorial about essential Windows commands. > ourfile.txt

What if we would like to add several sentences (in separate line each). We can do this with several commands using append (>>). But we can also use one compound command. Try this:

echo This is a tutorial about essential Windows commands. > ourfile.txt && echo This is the second sentence. >> ourfile.txt

We joined two commands with &&. Actually, we don’t have to open ourfile.txt in the external text editor. We can check output in command line as well with type command. Let’s type

type ourfile.txt

and we will see the content of ourfile.txt file.

Now we can probably imagine how to create batch files this way. It’s absolutely the same as the creation of any other file. We can see that this way of creating files is not at all practical, but it is one of the ways. But I guess you will rather use some text editor (though possibly command line based) for these kinds of tasks. We introduced this – &&. This stuff is much more practical. It serves for chaining commands. There are more types of chainings:

• command1 & command2 Run command1 and then command2
• command1 && command2 Run command1 and if commandA succeeds then run command2
• command1 || command2 Run command1 and if it fails then run command2

You can use these when you write your own batch files or if you use more complicated compound commands. We now know something about redirection of an output. Besides printing output applications (and thus their commands) might also have some input. An output of one application (command) may serve as an input for another one. We have actually encountered this when we used command tree (tree | more). But we haven’t yet really explained what it exactly does.

• command1 | command1 Pipe the output from command1 into command2

It pipes output. It exactly means that the output of the command is served as the input for the another command. Utility more takes output of another command and then print it line-by-line or page-by-page when user press Enter or Space. So that’s all for this part .

Today I can announce that OWIDIG is finally officially released. Instead of writing some sort of text blog I decided to present the following video:

In the previous post I have written few things about development of OWIDIG – image grabber (or image extractor) and image downloader.

Today I can announce that OWIDIG is finally officially released. Instead of writing some sort of text blog I decided to present the following video:

So visit OWIDIG – MOYA’s OWIDIG (Online Webpage Image Downloader and ImageInfo Grabber) Service, try it yourself and enjoy the service. I am looking forward to any kind of feedback as well.

So let me introduce you OWIDIG.

As its name implies [...]]]> I am currently working on OWIDIG (Online Webpage Image Downloader and ImageInfo Grabber). You can see its current published state here – OWIDIG. It has “old” inside URL, as I plan to keep this quasi-beta version available online.

So let me introduce you OWIDIG.

As its name implies its primary goal is to grab some image content and information from websites. One feature is to list all images with specific information such as filename, filetype, dimensions or description. One of the most important questions is (though not always ) the applicability. It’s quite straightforward. You might be a webdeveloper who wants ho have overview of all image content on his or someone’s else site. You may work on application that needs to grab all profile photos that always have particular dimensions. OWIDIG at its current state provides lots of filtering options considering dimensions, type, URL, browser access or kind of images (normal images or images included within styles).

Another important feature implied both by name “grabber” and mainly “downloader” is an ability to download images. Two methods are used, one which use saving capabilities of browsers, the another (more powerful) which use an applet. The latter method enable users to choose saving path for images as well as filename prefix. This may save a significant amount of time. You may want to download a photo album from website with photos. Their filenames might not be what you want. So you just type its name prefix and your images will be saved with filename starting with prefix + their number.

Final version of OWIDIG will also provide social network sharing capabilities and its current design will be considerably redesigned to make it better arranged and more simple (advanced options will be hidden by default) to make it more usable for the less-technical users. For now – just try the current version and look forward to the final version. Its release will be soon .

UPDATE (December 3rd): Lots of updates to come in the final version are now available in the current version available here. This includes the new type of listing and social network sharing.

Batch files can be created in graphical environment of Windows as well as in CMD. While there are lots of [...]]]> Today I will move on with the second part of the article about Windows command tips. This part will discuss how to create and edit batch files.

Creating batch files

Batch files can be created in graphical environment of Windows as well as in CMD. While there are lots of tasks that are much more efficient to be conducted in CMD, in the case of creating batch files I find it more convenient to do it in GUI environment.

Just right-click on empty area of any folder or desktop and select New -> Text Document. This will create an empty plain-text document in the folder named “New Text Document.txt” or similar name (possibly with a number in brackets if there were previously created empty text documents this way). Now click on it once, wait for a while and click on it second time (or click and press F2, or right-click and select Rename). The filename will be highlighted. Rename the filename and change the extension .txt to .bat.

There is one common feature (but at least in my opinion issue) in Microsoft Windows operating systems that is in newer versions set to be default, which is really a shame. It is Hide extensions for known file types folder option. When I work on someone’s else computer, they actually often have this enabled… It has some pseudoaesthetic motivation of hiding these extensions, but otherwise it’s highly impractical. If you have this option enabled, you will not see .txt part of the filename. If you add it manually, you actually get filename.txt.txt or in a case of .bat filename.txt.bat. So if this is the case open any folder (for example (My) Computer folder). Choose Tools -> Folder options… from the file menu (if you don’t see it, press Alt + F and it will show up). Then Folder Options window will appear. Select View tab and in the Advanced settings: list uncheck Hide extensions for known file types option. Now you can return to the previous step.

In Windows NT, 2000, XP, Vista and 7 you can use cmd extension instead of bat. In old Windows 9x versions and in DOS you could use just .bat. (Command prompt cmd.exe can handle both .cmd and.bat, command.com only .bat). We might say that it would be correct to use .bat extension for command.com and newer .cmd for cmd.exe, but this is actually not the case. Because simply people are get used to bat and it’s still much more common. There are some (truly) minor differences between the two, but most of the time they are absolutely interchangeable in modern Windows operating system.

Editing batch files

After creating the batch file, open it in some plain-text editor (Notepad is just enough). We have introduced some basic commands in the previous part of this article. So let’s type

dir

and save the file. Now we can run test.bat (suppose that we named it so). A window will appear very shortly and then disappear.

To prevent this add pause command in the second line.

dir
pause

Now the window will stay open and its output will be similar to this:

C:\Users\moya\Desktop\bat-test>dir
 Volume in drive C has no label.
 Volume Serial Number is 20EB-818C

 Directory of C:\Users\moya\Desktop\bat-test

02. 11. 2011  11:36    <DIR>          .
02. 11. 2011  11:36    <DIR>          ..
02. 11. 2011  12:07                10 test.bat
               1 File(s)             10 bytes
               2 Dir(s)  747 433 140 224 bytes free

C:\Users\moya\Desktop\bat-test>pause
Press any key to continue . . .

The pause command caused the suspension of processing of a batch program and the last line now contains Press any key to continue . . . message. Processing will continue after pressing any key as message states. Of course pause command may be inserted anywhere in the file, not just at the end, for example:

dir
pause
dir
pause

Another thing you may notice are lines C:\Users\moya\Desktop\bat-test>dir and C:\Users\moya\Desktop\bat-test>pause. It appears as if we had typed these commands manually in the command prompt, but we hadn’t. To prevent this behavior you can preppend @ sign before each command like this:

@dir
@pause

Now the output will be:

 Volume in drive C has no label.
 Volume Serial Number is 20DA-972D

 Directory of C:\Users\moya\Desktop\bat-test

02. 11. 2011  11:36    <DIR>          .
02. 11. 2011  11:36    <DIR>          ..
02. 11. 2011  12:44                12 test.bat
               1 File(s)             12 bytes
               2 Dir(s)  747 431 907 328 bytes free
Press any key to continue . . .

It’s a bit awkward to preppend @ before every command. Luckily, there is a way to apply this behavior globally. Try:

@echo off
dir
pause

The effect is the same. echo off applies demanded behavior for all following commands in the batch file and @ echo off applies this to that command itself.

We introduced echo command. This command is also useful when we are creating batch files in the command prompt. We will tell more about it in the next part of this series .

This series is not intended to be a complete tutorial, its intent is just [...]]]> I decided to write a series about Windows commands targeted to less skilled users (there will be nothing new for the advanced Windows users, so if you belong to this group, you may skip this article )

This series is not intended to be a complete tutorial, its intent is just to show some of the most useful tricks. However, since as I already mentioned, it is targeted to rookies, so in this first part we will deal with the very basics – how to actually work with commands, command line and batch files in general.

There are two ways of using commands – you can use it in the command prompt (cmd.exe or in old versions of Windows command.com) or you can use it in batch files.

Using commands in command prompt

Command Prompt can be found in Accessories. The fastest way to run it in Windows 7 is to press Start and type cmd in the search bar and press Enter. In Windows XP, you can do the same, but instead of typing it in the search bar, you run Start->Run. Hopefully you are not fed up with mentioning these trivial tasks .

So assume that we have already started Command Prompt (CMD). We probably see the path of our user’s account root directory (or possibly other path, it’s not relevant now). There are 4 commands that I consider the most important and crucial to mention for people who are running CMD for the first time – cd, dir, help and more. After learning these four commands you can start using the command line relatively proficiently.

Type help. You will see a list of commands with their short description as an output. You will probably not see the complete list, but just the bottom of it. But you can use a scrollbar to see the upper part. However, sometimes an output of CMD commands might be so large that you cannot see the full output.

Let’s type tree. This will start outputting the whole structure of your directories. You can wait quite long to finish it, or you may stop it by pressing CTRL + C after a while. In any case (if you were not too fast ), if you try to scroll on the top of command line window, you will not see the beginning of the output. For these situation there is a command called more.

Now type tree | more. The outputting will now stop so you can see the beginning of the output. You can shift it by pressing Enter line by line or by pressing Space screen by screen. Press CTRL + C to stop it.

When you type help together with another command name, it will show you help for this particular command. Try help cd for example. The second or further typed word of command is called argument or parameter. Instead of typing help cd you can also write cd /?. Arguments that starts with a forward slash (or with a hyphen, but this is not the case of standard Windows commands) are also sometimes called switches.

Now you can see outputted help of cd command. It contains text description, examples and in the beginning the command syntax. Note that arguments are in [] brackets. It means that these arguments are optional. Try to read instructions from that help output. Also try help dir.

I have not yet explicitly mentioned what are the tasks of cd and dir commands, but you had probably noticed it in the output of help command. In short, cd changes current active directory and dir lists all files and folders in the current or specified directory.

Here are som usage examples (commented odd lines contain description, even lines contain actual command):

'show contents of the current directory
dir
'show contents of the current directory
dir .
'change the current directory to the parent directory
cd ..
'show contents of the parent directory
dir ..
'change directory to drive C root directory
cd C:\
'change directory to directory C:\Users
cd C:\Users
'change directory to directory C:\Program Files
cd "C:\Program Files"
'show contents of directory C:\Program Files
dir "C:\Program Files"
'change drive to D:\
D:

You probably noticed two things, if you were attentive. We used double quotes in the antepenultimate and the penultimate example. That’s because the path of the chosen directory included white space, but white space is a delimiter for arguments. If an argument includes white spaces, you have to put it inside double quotes. The last example contains just D: and this switches the current drive. In fact, you cannot change a directory with cd command to directory outside the current drive. Although you can show its contents with dir command.

The last thing I will mention in this section is how to select and copy text from the command line. It differs from usual Windows way. Right-click on the CMD window and choose Select All. Then press Enter. Now the complete visible output is in the clipboard and you can paste it for example into Notepad. If you want to select just the part of CMD output, right-click again, but this time choose Mark. Click anywhere in the window and move cursor to select area to be copied and then press Enter.

Well, that’s enough for now. You can close CMD by typing exit. I intended to include also the basics of using batch files, but I don’t want to make this article too long. So, wait for the next time .

innerHTML property is probably the most frequently used method, but it [...]]]> There are some ways to get the original source of any HTML element in JavaScript. And they work fine in most situations. However, there are situations where these ways are not really sufficient and I especially mean not cross-browser enough.

innerHTML property is probably the most frequently used method, but it has some well-known drawbacks. First of all, innerHTML property does not contain (X)HTML written by original author of (X)HTML page. Instead, it contains some sort of browser specific Document Object Model string representation. Especially in IE this representation is quite ugly (missing quotes, capital letters of tags, …). And thus we encounter another problem – content of innerHTML property differs in different browsers!

But why is this important that it differs? Should we care? Maybe, we should. There might be situations when we may need the same value of innerHTML property for all browsers. There are always some tricks to get around this need and make it in other way, or simply make different solutions for different browsers. But wouldn’t it be nice to have function that not only returns same content in all modern major browsers, but moreover returns exactly the content that was created by author of webpage? Getting truly original source code is in fact another thing that might be sometimes useful.

So let’s show how to do this. I have written such a function for you.

The means to accomplish the most important initial building block of this task is XMLHttpRequest. We need to get the original source code of the whole page. Here is the function:

function originalPageSource()
{
	var httpRequest = new XMLHttpRequest();
	if (window.ActiveXObject)
		httpRequest = new ActiveXObject ("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest)
		httpRequest = new XMLHttpRequest();

	httpRequest.open('GET',document.location.href,false);
	httpRequest.send(null);
	if (httpRequest.status === 200)
	{
		return httpRequest.responseText;
	}
	else return false;
}

This first function will be contained within the main function called originalInnerXHTML. It takes two parameters. The first parameter element is the required (X)HTML element, of which HTML content we want to see. The first parameter includeElement is a boolean parameter and determines whether to include element itself in (X)HTML string. This is known as an outerHTML function or property, so I as well made originalOuterXHTML to not to be required to call function with two parameters for this task. So finally, here is the code or originalInnerXHTML:

function originalInnerXHTML (element, includeElement)
{
var elementXHTML = originalPageSource();
var elementIndex = 0;
var elementNodeName = element.nodeName;
var elements=document.getElementsByTagName(elementNodeName);

for (var i = 0; i < elements.length; i++)
{
	if (element === elements[i])
	{
		 elementIndex=i;
		 break;
	}
}
openingElementRegExp = new RegExp("<"+elementNodeName, "i");
closingElementRegExp = new RegExp("</"+elementNodeName, "i");
for(var i=0; i <= elementIndex; i++)
{
	elementXHTML=elementXHTML.substring
	(
		elementXHTML.search(openingElementRegExp)+1
	);
}

elementXHTML="<"+elementXHTML;
if
(
	element.hasChildNodes() == false &&
	(elementXHTML.indexOf("/") < elementXHTML.indexOf(">") ||
	elementXHTML.search(closingElementRegExp)==-1)
)
{
	if (includeElement)
	{
		elementXHTML=elementXHTML.substring(0, elementXHTML.indexOf(">")+1);
		return elementXHTML;
	}
	else return "";
}
elementXHTMLCopy=elementXHTML;

while
(
	elementXHTMLCopy.search(new RegExp(openingElementRegExp))
	< elementXHTMLCopy.search(new RegExp(closingElementRegExp))
)
{
	if (elementXHTMLCopy.search(openingElementRegExp)!=-1)
	{
		elementXHTMLCopy=elementXHTMLCopy.substring
		(
			elementXHTMLCopy.search(openingElementRegExp)
		);
		elementXHTMLCopy="<"+elementXHTMLCopy;
		elementXHTMLCopy=elementXHTMLCopy.substring
		(
			elementXHTMLCopy.search(closingElementRegExp)
			+ elementNodeName.length+3
		);
		elementXHTMLCopy="<"+elementNodeName+">"+elementXHTMLCopy;
	}
}

var endOffset = elementXHTMLCopy.length - elementXHTMLCopy.search(closingElementRegExp);
elementXHTML = elementXHTML.substring(0,elementXHTML.length - endOffset);
elementXHTML = elementXHTML+"</"+elementNodeName.toLowerCase()+">"

if (includeElement) return elementXHTML;
else
{
	elementXHTML=elementXHTML.substring
	(
		elementXHTML.indexOf(">")+1,elementXHTML.lastIndexOf("<")-1
	);
	return elementXHTML;
}

function originalPageSource ()
{
	var httpRequest = new XMLHttpRequest();
	if (window.ActiveXObject)
		httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest)
		httpRequest = new XMLHttpRequest();
	httpRequest.open('GET',document.location.href,false);
	httpRequest.send(null);
	if (httpRequest.status === 200)
	{
		return httpRequest.responseText;
	}
	else return false;
}
}

And finally source of originalOuterXHTML:

function originalOuterXHTML(element)
{
	return originalInnerXHTML(element, true);
}

Limitations

The main limitation lies in the fact that this function returns only the original source code, so it cannot show potential javascript source code modifications. After the original source code is changed by script, we often simply have to rely only on internal browser object model representation… But after all, it is programmer’s responsibility in exactly which way his or her code is changed, so this can be mostly resolved. I believe that getting exact original source code might be useful in quite many situations.

You can download JS file with these functions here.

I’ll probably end up with simple wait and see! Useful articles from software world and articles about MOYA’s projects are coming soon.