Want to Run Ext Without a Webserver ?

[hendricd]

Backgrounder:

HTTP Status codes are important. But, not always. Sometimes we'd like to deploy rich browser-based applications on local file systems (CD/DVD/Zips, iPhone) for demonstrations -- you name it. There are some quirks involved however -- more on those in a minute...

AJAX frameworks that use the XMLHTTPRequest object (or IE's ActiveX equivalent) don't always account for this possibility in their implementations. Namely, accounting for the absence of a real HTTP status code, usually zero (0) when accessing a file:////based URL. But thats OK, we know the darn resource is there!

So, (in conjunction with a completely file-system-based application I'm developing with Ext) I am happy to provide a nifty Ext-base override you might find useful. It is designed to solve a nasty IE7 problem and get Ext more 'portable'.

First, the IE7 issue.
Its latest XMLHTTPRequest implementation adds further restrictions with regard to local file access. Simply put, you can't use it for that purpose -- 'Access Denied'. But luckily the ActiveX interface is still available, which still imposes no such restrictions on that goal.

The override below provides two significant features:
1) Converts a zero (0) HTTP status to 200 (for all browsers).
2) Gives the developer the choice of which IE7 AJAX implementation to use via a simple...


...
,init:function(){
Ext.lib.Ajax.forceActiveX = (document.location.protocol == 'file:');/* or other true/false mechanism */
...
}...before the first Ext.Ajax.request. But it can also be toggled on/off at any time.

The attached override provided is only designed to enhance the core 1.1 and 2.0 Ext-base adaptor. It does not modify the AJAX functionality of any of the other 'bridges' (YUI, Prototype, JQuery).


I've attached a localXHR.js file that you can include anywhere after ext-base.js.

8/10 Revision: I have extended this override further to support synchronous XHR requests as I've seen much demand for it of late. This also enhances the open, send error handling to raise appropriate exceptions when there is a security issue or other error. See a later post here on this thread on how a synchronous call can be made with little/no modification to your callbacks.

My word about sync vs async AJAX:
Rant: Async is the WAY TO GO ! This override maintains async behavior as the default premise for use within Ext. If you're designing your app for synchronous lockup -- you're just plain lazy, or can't/wont read about how to do it right.

That said, there is one good reason (the only that I can think would matter) to do something sync, and that's loading dependent (with dependencies) javascript modules.

[ UPDATE: 1/9/2008 ] Although this post will remain, localXHR is now deprecated in favor of Ext-basex (http://extjs.com/forum/showthread.php?t=21681) (a newer, more complete implementation).

[tags: XHR without webserver localXHR XHR xmlhttprequest synchronous IE7 basex ]
:) Be Extatic,

[original]

Hi,

We've tried your workaround, but we noticed that in our case there's some additional step we had to take to get everything working in IE (6 or 7). While everything worked fine in Firefox, IE just wouldn't show any data. We started analyzing and found out that the recoredscount remained 0 in IE.

Digging deeper we noticed that when trying to load the xml from the local file system, the responseText of the xhr response received, contained the XML text allright, but that for some reason the XML Document object - used as input for the XmlReader - in responseXML remained empty (childNodes.length == 0).

The workaround for this particular issue was to add a forced load of the responseXML property using the responseText property as input.

so in the 'handleTransactionResponse' function we added this :


if (httpStatus >= 200 && httpStatus < 300) {
responseObject = this.createResponseObject(o, callback.argument);
// START OF THE
if(responseObject.responseXML.childNodes.length == 0 && responseObject.responseText)
{
// this covers IE scenario
if (window.ActiveXObject)
{
var xdoc=new ActiveXObject("Microsoft.XMLDOM");
xdoc.async="false";
xdoc.loadXML(responseObject.responseText);
}
// this is for non-IE browsers (just in case, as this change is just to solve an IE issue
else
{
var parser=new DOMParser();
var xdoc=parser.parseFromString(responseObject.responseTextL,"text/xml");
}

responseObject.responseXML = xdoc;
}
// END OF CHANGE

With this change IE was happy and loaded the data.

Has anyone else run into the same issue before ? Or did we miss somehting and is there a different, better, easier way to solvle this ?

Thanks in advance for your feedback

[hendricd]

Original,

You're absolutely correct. I forgot to include my XML parser features in the override. With IE and the absence of a 'Content-Type' response header it does not create and parse the XML DOM for you.

I have refactored the override to account for that and a couple of other issues.

I've tested it X-browser on all the Ext XML examples. Looks good.

Thanks for the try{}catch{} !

[original]

Hendric,

Thanks for adding the reason why the XML DOM stays empty (missing content-type when loading local files => no DOM initialization). I wasn't aware of this behaviour, so that's why at first I thought it might have something to do with the XML files we were trying to load or some other oversight on my part. Makes sense now. Thanks for that.

Cheers

[hendricd]

Yep, been dealing with XHR abtraction for a while now (years now I guess). Anyway, the override has just been further refactored to emulate 404 responses as well.


Also,
Make sure your static file content is saved with the desired content-encoding (eg 'utf-8', etc).

[bmatzner]

Hi Doug, thanks a bunch for this solution - saved me from a lot of head-scratching. While we're at it, although this is not an ext question per se, but you're obviously very familiar with JS running locally off a CD: is there a way to get rid of IE's security warning when loading an HTML file with even the slightest bit of JS in it?

Thanks,
Bernd

[J.C. Bize]

Hi Doug, thanks a bunch for this solution - saved me from a lot of head-scratching. While we're at it, although this is not an ext question per se, but you're obviously very familiar with JS running locally off a CD: is there a way to get rid of IE's security warning when loading an HTML file with even the slightest bit of JS in it?

Thanks,
Bernd

this page (http://www.phdcc.com/xpsp2.htm) should be a good place to start.

Cheers,
JC

[hendricd]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Display One's Self</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="src/ext-base.js"></script>
<script type="text/javascript" src="src/ext-core.js"></script>
<script type="text/javascript" src="src/localXHR.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

Ext.apply(String.prototype,{ escapeHTML: function() {
var div = document.createElement('div');
var text = document.createTextNode(this);
div.appendChild(text);
return div.innerHTML;
}});
var out = Ext.get("portal");

out.getUpdateManager().setRenderer({render:function(el,response){
var text = String.format('Contents of {1}<hr /><pre><code>{0}</code></pre>',
response.responseText.escapeHTML(), location.href);
el.update(text); }});


out.load({
url: location.href, // lets just load ourself here, but disable scripts.
scripts:false,
text: "Loading Myself for viewing (don\'t blink!)..."
});

});

</script>


</head>
<body scroll="no">
<div id="portal" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 300px;"></div>
</body>
</html>

Just save it on your local file system somewhere and browse it.

[hendricd]

As promised, a full-blown example of everything the override has to offer.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Ext Ajax LocalXHR Test Suite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="get-your-ext/resources/css/ext-all.css" />
<script type="text/javascript" src="get-your-ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="get-your-ext/ext-core.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<style type="text/css">

html, body {
border:0px none;
font-family:tahoma;
font-size:9pt;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0px;
padding:0px;
}
.oops{
width:100%;
border-style:none none solid;
overflow:hidden;
color:red;
}

.dandy{
width:100%;

overflow:hidden;
color:green;
}

</style>
<script type="text/javascript">
var completionOrder=0;
var url;

Ext.apply(String.prototype,{ escapeHTML: function() {
var div = document.createElement('div');
var text = document.createTextNode(this);
div.appendChild(text);
return div.innerHTML;
}});


var dumpMeOut = function(el,response,um){
var nodeName= (response.responseXML && response.responseXML.firstChild)?response.responseXML.firstChild.nodeName:'null';

el.update( String.format('{0}: Contents of {1} <hr /><span class="status"> Waiting...</span><pre><code>{2}</code></pre>',
el.dom.className + ":" + el.dom.id , response.options.url,
'Response Headers:' + '<br />' + response.getAllResponseHeaders.replace('\n','<br />') + '<hr />' + response.responseText.escapeHTML()
),false);

};

var callHouston = function(response,options){
options.target.child('span.status').update("XHR Exception!, finished #"+(++completionOrder)).addClass('critical');
};

var allDone= function(elm, success, response){
var gotNodes = (response.responseXML && response.responseXML.childNodes.length != 0)?' and has XMLDOMDocument, firstChild: ' + response.responseXML.firstChild.nodeName:'';

var statusClass = success?'dandy':'oops';

var results= (success?'Finished #'+(++completionOrder) + gotNodes:
"HTTP Problem! ...but finished #" + (++completionOrder)) +
' with status= '+response.status + ', ' + response.statusText;

elm.child('span.status').update(results).addClass(statusClass);

};

var setHook = function(el,all,index){
url || (url=location.href);
//url || (url='*find Ext*/examples/grid/plants.xml');
//url || (url='plain.txt');

var um = el.getUpdateManager();
um.setRenderer({render:dumpMeOut});
um.timeout = 10;

el.load({
url: url
,async:el.hasClass('async')
,scripts:false
,target:el
,text: el.dom.className + ':' + el.dom.id +' Loading ' + url + ' for viewing (don\'t blink!)...<span class="status" > Waiting...<\/span>'
,callback:allDone
,failure:callHouston
,autoAbort:false
,disableCaching:true
});
};


Ext.onReady(function(){

Ext.select("div.async", true).each( setHook );
Ext.select("div.sync", true).each( setHook );

});
</script>

</head>
<body scroll="yes">
<div id="about" class="dandy" style="border:2px solid green;overflow: auto; width: 665px;">
<p>This is an Ext.AJAX demonstration page. It is designed to allow implementors to see some of the
notable differences in various browser implementations of the XMLHTTPRequest object in both synchronous
and asynchronous request modes.<br /><br />It also demonstrates making Ext.AJAX.request(s) to access EITHER local-file-system-based/HTTP Server
resources when used with the override 'localXHR.js' provided <a href="http://extjs.com/forum/showthread.php?t=10672" target="_ExtForum">here</a>.
<br /><br />Hints:<ul><li>Change the class name of the "portal" divs to control async vs synch behaviors.<li>Also make a note of
how each browser implements the response.responseXML DOMDocument rather differently (especially .firstChild).<li>
Change the url variable to play with different resource types; the contents of this page is the current default.</ul><br />
Override Tested on: IE6, IE7, FF(1,2), Opera 9.22
</div>
<div id="portal-1" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
<div id="portal-2" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
<div id="portal-3" class="sync" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
<div id="portal-4" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
<div id="portal-5" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
</body>
</html>

[deitch]

Doug,

For some reason, the forum isn't giving me access to localXHR.zip. Can you post it on the Web somewhere, or put the source code in?

Thanks.

[deitch]

Doug,

For some reason, the forum isn't giving me access to localXHR.zip. Can you post it on the Web somewhere, or put the source code in?

Thanks.
No worries, I got it. The link is a little funny, has an extra param.

[deitch]

Doug,

I like what you did, really nice. Is it possible to expand it to JSON or generic types? You would need somehow to know what the type is before you get it, since no server will get it for you, of course. Either that, or somehow interpret the file, which is getting tricky. However, it does follow convention over configuration, right? How about if it checks the extension of the requested URL file: xml -> "text/xml"; js->"text/javascript"; json -> "application/json"; html/htm -> "text/html"; * -> "text/xml".

I checked your source, it currently is set to type "text/xml" which doesn't work for other types.

Ideas?
Avi

[hendricd]

@deitch - You may be misinterpreting the purpose of this low-level patch.

It's primary purpose is to permit low-level Ext.lib.AJax access to 'static' content directly from a file system. Implemented at this level, it permits local file system access for any of the existing Ext components that use Ext.Ajax.request (eg. dataStore(s), UpdateManager etc).

Since it's static content, YOU know what the format of the data(js, json, [x]html, xml, csv) is because YOU put it there.

The extra xml handling is just to emulate what the XMLHttpRequest Request object would do if it were communicating with a web server. It would create/populate an XML DOMDocument for you if it thought the responseText was valid XML. If you were serving up JSON the responseXML property would represent an unsuccessfull attempt (but not a failure) to parse it, just like it does if you had made the request from an actual HTTP server.

In other words, the 'text/xml' content Type header is only set for you -- if :

the response came from a local file system (status == 0),
there are valid XML child-nodes in the response


Guessing what the response contenttype is (beyond XML) -- would not be appropriate (IMO) at this level. It would be up to the implementor to decide what to do with it (ie the JSONStore and JSONReader know they are to expect JSON objects and handle things accordingly).

If you dig into the source of the Proxies you'll notice few if any attempts are made to guess at the content-type before trying to handle a response. And for good reason - "One mans JSON might be another man's application/octet-stream".

If your design is moving to strictly JSON, why not create you own JSONProxy and add your desired JSON validation/evals/behaviors to that?

[nevf]

Hi Doug,
Thanks again for providing this code. I want to load up an Ext Tree using a local XML file and I'm trying to use createXmlTree() (http://extjs.com/forum/showthread.php?t=3987) but I'm not getting anywhere.

The Error Console shows:
this.root has no properties.

There maybe a way of doing this without using localXHR.js but right now I'm floundering around out of my depth here.

Any suggestions?

[dolittle]

Hi,

Can this workaround help to preview pictures from local files before upload or am I completely not in the right direction?

Thanks

[hendricd]

@nevf - I reviewed that thread. Animals code would work just fine (without any mods) with localXHR.js in place. The key starting point here is to make sure you have a 'valid' XML Document returned by the response object (from a web server or not B) ). Make sure that your XML is viewable in the browser first (with no parsing errors), then you'll have a good shot at success. Have you slapped together an attempt yet?

@dolittle - Your wish to (easily) do mixed domain (local and web-server uploads) is a security no-no! There aren't many browsers that will permit that level of interaction (browsing) with a users local file system (unless your start page is a local one)...

[nevf]

@nevf - I reviewed that thread. Animals code would work just fine (without any mods) with localXHR.js in place. The key starting point here is to make sure you have a 'valid' XML Document returned by the response object (from a web server or not B) ). Make sure that your XML is viewable in the browser first (with no parsing errors), then you'll have a good shot at success. Have you slapped together an attempt yet?

Doug, thanks for the quick response. I spent most of yesterday trying various bits of code to no avail. Here is my latest attempt.

xml-tree.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test XML TreePanel</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="xml-tree.js"></script>
<script type="text/javascript" src="localXHR.js"></script>


<style type="text/css">
#tree {
float:left;
margin:20px;
border:1px solid #c3daf9;
width:250px;
height:300px;
}
.folder .x-tree-node-icon{ background:transparent url(../../resources/images/default/tree/folder.gif); }
.x-tree-node-expanded .x-tree-node-icon{ background:transparent url(../../resources/images/default/tree/folder-open.gif); }
</style>


<script type="text/javascript">
Ext.onReady(function(){

var tree = new createXmlTree( 'tree', '../grid/plants.xml' );

});
</script>

</head>

<body>

<h1>Test XML Tree</h1>

<div id="tree"></div>

</body>
</html>


xml-tree,js - animal's code unmodified.


/*
* Ext JS Library 2.0 Alpha 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/


/**
Create an Ext.tree.TreePanel in the passed Element using
an XML document from the passed URL, calling the passed
callback on completion.
@param el {String/Element/HtmlElement} The tree's container.
@param url {String} The URL from which to read the XML
@param callback {function:tree.render} The function to call on completion,
defaults to rendering the tree.
*/
function createXmlTree(el, url, callback) {
var tree = new Ext.tree.TreePanel(el);
var p = new Ext.data.HttpProxy({url:url});
p.on("loadexception", function(o, response, e) {
if (e) throw e;
});
p.load(null, {
read: function(response) {
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback || tree.render, tree);
return tree;
}

/**
Create a TreeNode from an XML node
*/
function treeNodeFromXml(XmlEl) {
// Text is nodeValue to text node, otherwise it's the tag name
var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName);

// No text, no node.
if (t.replace(/\s/g,'').length == 0) {
return null;
}
var result = new Ext.tree.TreeNode({
text : t
});

// For Elements, process attributes and children
if (XmlEl.nodeType == 1) {
Ext.each(XmlEl.attributes, function(a) {
var c = new Ext.tree.TreeNode({
text: a.nodeName
});
c.appendChild(new Ext.tree.TreeNode({
text: a.nodeValue
}));
result.appendChild(c);
});
Ext.each(XmlEl.childNodes, function(el) {
// Only process Elements and TextNodes
if ((el.nodeType == 1) || (el.nodeType == 3)) {
var c = treeNodeFromXml(el);
if (c) {
result.appendChild(c);
}
}
});
}
return result;
}


I'm using Ext 2.0 alpha1. plants.xml is an Ext example file and it loads in IE ok.

The Firefox Error Console shows "this.root" has no properties. ext-all.js Line 98.

My source files are in: ext-2.0-alpha1\examples\ExtPlay

[hendricd]

It looks like a scoping issue [maybe]. You should switch to ext-all-debug to help out further.

And put some console.logs in there:



function createXmlTree(el, url, callback) {
var tree = new Ext.tree.TreePanel(el);
var p = new Ext.data.HttpProxy({url:url});
p.on("loadexception", function(o, response, e) {
console.log(['loadexception',arguments]);
if (e) throw e;
});
p.load(null, {
read: function(response) {
console.log(['read',response]);
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback || tree.render, tree);
return tree;
}



..to snoop at the response.responseXML property, to make sure you are getting a valid DOC.

[nevf]

It looks like a scoping issue [maybe]. You should switch to ext-all-debug to help out further

I changed to ext-all-debug.js and can't see any extra info in the FF Error Console or in FF or IE. Maybe I'm looking in the wrong places.

I'm not sure what you mean by a "scoping issue".

[hendricd]

Review my previous post revised..

[hendricd]

Also check to see if plants.xml content is present in the response.responseText property....

[nevf]

Review my previous post revised..

Thanks. I'm getting a console is not defined error in the "Error Console"

[hendricd]

I assumed you had FireBug installed on Firefox !

Get it: http://www.getfirebug.com/

[nevf]

I assumed you had FireBug installed on Firefox !

Get it: http://www.getfirebug.com/

I have Firebug but it wasn't running. I added the lines you said and:


function createXmlTree(el, url, callback) {
console.log("hello nevf");
...


all I see in the console window is "hello nevf" and "this.root has no properties".

[hendricd]

Look at that post (http://extjs.com/forum/showthread.php?p=68927#post68927) again. You don't have them placed in a useful way.

[nevf]

Look at that post (http://extjs.com/forum/showthread.php?p=68927#post68927) again. You don't have them placed in a useful way.

This is what I'm using:


function createXmlTree(el, url, callback) {
console.log("hello nevf1");
var tree = new Ext.tree.TreePanel(el);
console.log("hello nevf2");
var p = new Ext.data.HttpProxy({url:url});
console.log("hello nevf3");
p.on("loadexception", function(o, response, e) {
console.log(['loadexception',arguments]);
if (e) throw e;
});
p.load(null, {
read: function(response) {
console.log(['read',response]);
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback || tree.render, tree);
return tree;
}

I don't see anything beyond "hello nevf1".

[hendricd]

You should check with Animal to see if he has a working example that you 'should' start from./:)

[nevf]

You should check with Animal to see if he has a working example that you 'should' start from./:)

I think the problem is more likely at my end than his. I'll keep plodding along. Thanks for the help so far.

If only I knew Javascript and ExtJS as well as I know C++.;)

PS. If you have time any chance of running my code.

[hendricd]

<script type="text/javascript">
Ext.onReady(function(){
//var tree = new createXmlTree( 'tree', '../grid/plants.xml' );
var tree = createXmlTree( 'tree', '../grid/plants.xml' );

});
</script>

[nevf]

<script type="text/javascript">
Ext.onReady(function(){
//var tree = new createXmlTree( 'tree', '../grid/plants.xml' );
var tree = createXmlTree( 'tree', '../grid/plants.xml' );

});
</script>


No, but I did get it working, at least on Firefox, but not IE!

Passing a string with the tree properties as the first parameter to createXmlTree() did the trick, but I don't yet understand why passing an element doesn't work.

[bocent]

B) that's good!

[hendricd]

Update: localXHR is now deprecated in favor of Ext-basex (http://extjs.com/forum/showthread.php?t=21681) (a newer, more complete implementation).

[ellis429]

Thanks!
It works~~
It's very useful!

[houh]

Can you please give an eample how you got it working by saying:
"Passing a string with the tree properties as the first parameter to createXmlTree() did the trick".
Iam getting the same error you got: root has no properties

Please reply

Houh

[houh]

No, but I did get it working, at least on Firefox, but not IE!

Passing a string with the tree properties as the first parameter to createXmlTree() did the trick, but I don't yet understand why passing an element doesn't work.

Can you please give an eample how you got it working by saying:
"Passing a string with the tree properties as the first parameter to createXmlTree() did the trick".
Iam getting the same error you got: root has no properties

Please reply

Houh

http://www.yui-ext.com/forum/images/misc/progress.gif

[houh]

Iam getting the same error. Were you able to resolve this?

Houh

[JoyfulBobHome]

I get he same error as well; an answer would be very helpful.

Here's what I have:


Ext.onReady(function(){

//var tree = new createXmlTree( 'tree', '../grid/plants.xml' );
var tree = createXmlTree( 'tree', '../grid/plants.xml' );

});

Thanks in advance!

[mrkadakia]

Hi -
I am using Ext 2.2 and when I try to run the XmlTreeLoader example under "tree" directory, nothing gets displayed in the Reading List panel:

ext-2.2\examples\tree\xml-tree-loader.html

I am using Ext 2.2 for client side application, thus I am not using a web server.

mjlecomte directed me to this thread after realizing that I am not using a web server. My original thread is:

http://extjs.com/forum/showthread.php?t=74706

There are so many posts to this thread that I do not know which one to follow. I simply would like to run the XmlTreeLoader example from local file system.

Any inputs would be appreciated.

Thanks

[swabygw]

Cannot find the "ext-core.js" file in the downloaded .zip file. There's a "ext-core" folder and a "ext.js" file, but no "ext-core.js" file.

[skzr.org]

I like it!
非常不错

[ronivcp]

Is there an extension of basex compatible with extjs4 to be able to run ext without a webserver?
I'm currently using ext-basex with extjs3.2 but I want to upgrade to extjs4.
thanks in advanced!

[rbjanaki]

I had searched but not finding ext-core.js. Please help me to find this file. Also, can you explain me on how to use test the file here?