I have been making extensive use of XMLHttpRequests and JSON to fetch from a MySQL database and return records as arrays. It works perfectly.
Additionally, I have three cases in which I have the server (via PHP) formatting the data as a web page and creating bar charts (as opposed to sending arrays back to JavaScript for processing). Currently, I call the PHP file via a hidden iframe and then insert the HTML into a DIV (since I don't like certain aspects of iframes and prefer to not have them accessible).
Is using an iframe the best method or can I accomplish the same thing via a XMLHttpRequest and JSON? I'm asking because of the length of the data being returned. At present, it translates to a full page of data, but I want it to be extensible (e.g., perhaps a couple of pages of data in the future).
Thank you for any insights.
If you want to get formatted html from other page and insert it in the current page dom the easiest way according to me is using the jQuery load methods. It make ajax request to a given url, gets the html and appends it to specified page element.
Generally the two methods - passing JSON data and passing Formatted html are good for different things. I personally prefer to pass JSON data and format it with client script and html. In this way it is more reusable.
Related
I am building an app that extracts data from a website and displays them in my app. I am using PHPQuery to extract data in my server-side code.
However, one page contains an .asp form with two dropdown menus. I need to select an option in both of them and then parse the resulting html. I need to do this server-side, so javascript doesn't seem to be the option.
How can I do so? Can it be done using PHPQuery or some other technology is required?
The page in question is: http://www.bput.ac.in/exam_schedule_ALL.asp
Since you're using PHP and phpQuery, I suggest you also try cURL.
Explore what the form submits via JavaScript and replicate that via cURL. Do this to get the format of the posted (assumption) data, which you can then replicate in a cURL request to the same endpoints. JavaScript won't be necessary, and you can get the same results you need. In this case, you won't need the item mentioned next.
Alternatively, if you have a browser, such as webkit, phantomJS, etc, you can write an automation script to run those steps and return the results, depending on exactly what you need returned. See more complete examples here: https://stackoverflow.com/a/17449757/573688 for how others suggest you do this. NOTE this is not usually necessary if you just need to emulate POST requests.
This is a non-coded answer because it's not entirely clear what direction helps you the most.
On page works JavaScript, which should make an AJAX request to the server and pass the selected value from both SELECT.
The server receives the AJAX request, performs the request to the correct address (you can use phpQuery) and prints the response (gets to the response on AJAX request).
JavaScript on the page receives a response to an AJAX request and performs actions affected.
I have been working on parsing some of the data from the wow armory and have come into a bit of a snag. When it comes to the site serving up the achievements that players have received, it uses javascript to intemperate a string such as #73:1283 to display the requested information. (I made this number up but the data for the requests are formated like this).
Is it possible to pull data from a page that requires javascript to display its data with php?
How do you parse data from a site that has been loaded after the dom is ready or complete using php?
By using Firebug, I was able to look at the HTTP headers to see what AJAX calls were being made to generate the content on these pages: http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement#96:14861 and http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement#96
It looks the page is making an asynchronous call to load this page: http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement/14861 when the part after the hash is 96:14861, and a call to http://us.battle.net/wow/en/character/black-dragonflight/glitchshot/achievement/96 when the part after the hash is just 96. Both of those pages return XML that can be parsed to render HTML.
So generally speaking, if there's just one number after the hash, just put http://.../achievement/<number here> as the URL. If there are two numbers, put the second number at the end of the URL instead.
What you'll need to do, rather than pulling the Javascript and interpreting it, is make HTTP requests to those URLs by yourself in PHP (using cURL, for example) and parse the data on your own.
I would really recommend learning JavaScript and jQuery, since it will be very hard for you to really build a good site that pulls information from the WoW Armory without understanding all the AJAX loads that are going on in the background.
I would recommend seeing if you can replicate the query sent by JavaScript in PHP. While I don't believe there is a way to process JavaScript in PHP, there definitely isn't a simple or scalable way.
I would attempt to scan the first page's source that you downloaded with PHP for strings of that format you mention. Then if the JS on their site is querying something like http://www.wow.com/armory.php?id=#72:1284 you can just download the source of that next. You can find out how the JS is querying the server with something like FireBug or the Inspector in Chrome or Safari.
So in summary:
Check to find the JS URL format and if you can replicate it.
Create PHP to get main page and extract all strings.
Create PHP to loop through these strings and get these pages (with URL that JS requests).
Do whatever you wanted to with that information.
You can try jquery's $(document).onready function which helps
to run java script code when the web page loads up.
ex
<div id="wowoData">#4325325</div>
<script>
$(document).ready(
function(){
$("#wowoData").css("border","1px solid red");
}
)
</script>
I am (mostly) a front-end developer working on a prototype with a backend guy on a site. The basics of it would require a user login area, as well as a search form that would search and return results from a database table.
He is doing the backend logic with Java and PostgreSQL. He proposes to return a JSON format to me upon a query. This means I will have to take the data from the JSON string and populate/create the HTML markup. I can do this with either Javascript, or PHP. It seems to be that PHP would be a no brainer as I don't need to create HTML markup with Javascript/jQuery and also all the data populated by the server already, reducing the load on the client side, but this means as a "front-end" person I am also writing PHP.
And regarding loading all server data onto a page with Javascript, is this standard practice? Or should it only be used on AJAX?
Should the backend guy be generating the markup as well? What's the best way of separating this frontend and backend work? THanks!
If you are using PHP, you are a backend-guy, too.
If the markup is generated by the server, than you would usually not write an AJAX-application, because the markup is generated by the server.
In fact if you want to write a ajax-application, you have to manipulte the DOM with Javascript. Use jQuery or something like that to do this.
Seperating frontend and backend is done by creating an Interface, a contract which will separate the UI from the Backend-Logic. In your case the contract is the format of your JSON Data.
A good compromise would be to do either:
Option 1
A small PHP script server-side which formats the restults into a table with appropriate Ids/similar to allow javascript to add classes for styling. This entire table could be returned via an AJAX call and placed within a placeholder div on the page.
Option 2
The server returns simple JSON to the front-end, the front-end uses whatever mechanism it sees fit to build the appropriate HTML
The first one is a little cleaner to code - The generation of the HTML is seperated from the styling, but it's an extra hop (the PHP) and is slightly inflexible - the JS can modify the table as appropriate but it's limited by the html PHP sends.
The second is slightly more verbose to code but completely flexible.
I send the data from the server to the browser in JSON all the time, format on the browser with templates of one form or another. I would rather work with arrays in Javascript as the array methods like map and filter make it much easier.
Often I add helper functions to my PHP that return complex HTML. For example, it is not an easy task to ensure that a form element is accessible, can handle errors etc. and so I will have a PHP function wrap this problem.
Unfortunately, sometimes, I will need to generate the same HTML but with JS instead. An example of this is where I have a Flash uploader which uploads multiple files. As each file is uploaded, I want to populate another form on the same page which will allow the user to edit the files data.
I already have the specification for the inputs for this form in PHP helper functions. At the moment, I just recreate these inputs manually with JS. However, this is inefficient and frustrating because if I wish to change some aspect of these inputs, I now have to change them in two places.
One thing I could do is pass the form elements back to JS in the same AJAX request which uploads the file. This works fine but could be problematic if I have large amounts of HTML.
Is there a better way than this or is using the AJAX request the best it gets?
One thing I could do is pass the form elements back to JS in the same AJAX request which uploads the file. This works fine but could be problematic if I have large amounts of HTML.
Certainly, this would allow you to avoid the code duplication.
But if you're just requesting identical HTML twice, that means - regardless of the size - there's an additional HTTP request for the same data.
It's probably not a big deal, but if you're that concerned, use AJAX to request the data once, store the result, then just used the 'cached' HTML next time you need to add an element.
Of course that only works if the HTML is identical.
Now if it is identical, and if the initial request puts one copy on the page, why not skip the AJAX request, and just have the javascript 'cache' a copy of the form when the document is loaded? Then you can duplicate the original form each time it's needed.
Make a page/controller in your php, that will be given a reference to the specifications you have stored, and will call the function and send back it's output.
Then you make an ajax call when required, that will request the page with the required parameters to get the wanted content.
Half-way through your answer I was going to suggest grabbing the inputs as JSON via a web service. In other words, I was going to suggest AJAX (or AJAJ I guess).
I do not see how you would coordinate the content otherwise.
What's a better practice? Load data in HTMLformat or JSON-format? When I load HTML i'm able to keep all the html in my php view-file. When i load JSON I have to put it in html elements clientside with javascript.
I know that a 'best-practice-question' isn't suitable for stackoverflow. So a better answer to my question is a list of benefits and disadvantages of both techniques.
I'd say use JSON whenever you need to process the data client-side, use HTML when you just want to dump it into some container-div.
For example, consider an image viewer, you can fetch a list of preview-image-urls using JSON, create a list of images client side and display them, scroll them around and so on.
On the other hand, if you're performing some action using ajax, and you just want to display a status message (like your table of data in the popup div), I'd suggest rendering the HTML on server side and just display it.
If you plan to call the data often in the same session, the network traffic and the responsiveness will be better if you just call JSON data. The HTML/JS overhead being in the cache, only data will cross the network from the second call.
However it looks you just need to render a table with TRs/TDs. If you don't call it often, you're better off with a simple HTML dump.
Another consideration is about clearly separating the data and the view, for cleaner code and easier maintenance. A JSON call allows a clear separation between data and HTML. In an HTML dump both are mixed.
I've just answered to another question, it was for JSP, but that may interest you.
What is the best approach for handling a complex form in html?
If you later have to do a mobile version, or another client in general, you might benefit from using JSON all over. JSON will also be smaller (might matter or not, depending on your html, the amounts of elements, ...)
Here's a good article on the subject: http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html