ajax authentication in a div
Hey all..here a question from GJ in Holland.
I am busy with my first AJAX web programming and really like the idea where one php file (index) is loaded and from there xmlhttprequest are able to load and 开发者_JAVA百科refresh content of the div's without refreshing the page.
Things are running good so far and about 4 div sections get different contents depending on which menubuttons you press (all through getdata functions and xmlhttprequests).
My last step is to integrate an extra autenthication div. I am trying to implement a nice jquery fade in fade out system with a login.php with the input fields for user name and pass; a process_login.php which compares the data with mysql and returns if theres a match or not; and finally a secured page where the user can logout when succesfully authorized. These pages seem to work seemlessly when i load the login.php directly in browser.
When i use getdata and xmlhttprequest on the login.php to load it into a div section on index.html nothing works anymore because it seems it can't use the functions anymore which are declared on the login.php page.
Reading ajax for dummies doesn't give me any answers although i am sure there must be an easy to understand logical explanation for this fact.
I can't get my head around it..please any info is welcome...greets
GJ
Javascript loaded through ajax does not become part of the window. You have to explicitly execute it (e.g. using eval). There's no direct solution to this problem, so you need to come up with a model for your application to know about the resources that are needed by something it loads through ajax.
The best way to do this is to create some application-wide convention - e.g. set up a cross reference of pages & script files, and use $.getScript to load them on demand. Ideally you would check to see if a resource is already loaded before trying to load it again.
Here's a simple idea you could use. In the output of your login.php add a tag at the top, e.g.
<span id="script" style="display:none">login,/scripts/login.js</span>
Then after an ajax call that loads a page, do something like this:
data = $('#wrapper').find('#script').html().split(',');
if (!window[data[0]]) {
$.getScript(data[1]);
}
So basically you're passing some info in the HTML that the loader uses to figure out what it needs. The first parameter is a namespace, so you can check if it's already loaded. The 2nd is the path to the script.
You could flesh this out to account for more than one script, use JSON for the data format, etc.. but this is a basic idea.
Yeah, you could always just include all your scripts up front, too :) however loading on demand is a good idea for any nontrivial application, so you don't clutter things up with scripts you don't need. The login script's only going to be needed once per session after all.
As to why.....I dont know why this behaves so.
However as to a fix/workaround. Im in a similar situation currently where im loading in pages (actually asp/jscript rather than php). What ive discovered is that the scripts you write in the page thats being loaded in, are not available anymore when loaded through AJAX. I have experienced the same problem if the page being loaded contains an applet or other html object type of tag.
A solution to this is to move your scripts to an external file on the server, from there your page will be able to reach them regardless of whether it was loaded by AJAX as a panel or is a standalone page
Example: (this is obviously jscript rather than php but the loading will be similar.)
Page login.asp contains in <head>
<script type="text/javascript" src="scripts.js"></script>
加载中,请稍侯......
精彩评论