I've been working on creating my own email client. I'm already successfully displaying attachments and embedded images via data URI. I was wondering once stored in a data if there was any way for me to assign data such as an image to a variable in client-side code (be it XHTML, JavaScript, JSON, etc) so I only have to send a single copy to the client from the server saving bandwidth though be able to display that content (again, such as an image) multiple times?
Pure JavaScript, no frameworks or libraries.
Also the main goal is to transfer the data only once from the client to the server. Once in the DOM it's perfectly okay if we end up having two img elements in example.
As a bonus, I'd like to use two img elements but with the DOM still reference the same single data-uri if possible thus saving memory at the client.
I was wondering once stored in a data if there was any way for me to assign data such as an image to a variable in client-side code
Use one of the following techniques:
Embed the data URI in an SVG element, then dereference it as a background-image URL
Embed the data URI in a script element, then dereference it as a dataset property
Store the data URI in a documentFragment, then wrap it in a function
References
CSS Wikibook:Data-URIs
HTMLElement.dataset
play .wav sound file encoded in base64 with javascript
Related
I make an ajax call (very simple), that currently returns a string of html. Depending on who is calling it, this string can become very long at times. What I'd like to know is why it's better to return a JSON result and build my HTML afterwards, rather than just returning a long string.
Some advantages of returning JSON instead of HTML:
The data can be used as data for analysis or other uses, not just used for presentation.
JSON data is often/usually much smaller than the full presentation HTML so you are transferring less data over the internet.
You create a separation between data and presentation rather than mix them both into one single API. Your server returns the data which a separate piece of code then turns into presentation.
The JSON data can be processed or modified more easily before presentation (such as filtered, sorted, tagged, expanded/collapsed, etc...).
You can use the same JSON data for many different types of presentation. If you return HTML, the presentation is already baked in so if you want a different presentation, you then have to create a whole new AJAX call.
If you want an extreme way to think about this, then ask yourself why does a database return raw data and not an HTML view of the data? It's because you can do so many more different kinds of things with the actual data so therefore the data is so much more useful by having it give you just the data and then different pieces of code to do something with the data (analyze it, combine it with other data, make decisions based on it, present it for viewing, etc....). If the database only returned an HTML view of the data, it would be far harder to do all these other things with the data. The same is true of an Ajax call which is really just the client's access to data.
I want to insert an image to database and display it in another page. I am using the PostgreSQL database.
My guide suggests that I insert the image with its file path in the database. When displaying, in place of the src attrib of img tag put the path from database. So can I get any help for this .
Please guide me for this or give me link for similar kind of problem.
(I'm a final year student, and feel that this project requirement is difficult).
Your guide is entirely correct. Part of what you are supposed to be learning is problem solving: how to break a big problem down into many smaller, simpler problems you can solve piece by piece. It sounds like it's hinting at this, but expects you to be able to do that yourself, which is pretty reasonable.
You need to break this down into steps, and do each step in isolation. That's how anything but the most trivial programming task must be done.
(It isn't clear if you want to store the image data in the DB, or just a file system path, by the way, so I'm assuming you want to write the file to the local file system and just store the path in the DB).
Anyway, this should be fairly simple JSP. To display:
One JSP that:
Examines the query parameters for the image ID
Uses JDBC to fetch the associated path of the image on the file system from the database (a simple SELECT using the image ID as a query parameter)
Opens the image on the file system as a binary stream; also stats it to get its size
Sends appropriate HTTP headers eg Content-Type: image/jpeg and Content-Length: image-length-in-bytes to the client
Copies the raw image data from the image input stream to the output stream that sends to the client
Another JSP that generates the HTML and has an <img src="/the/image/jsp?imageid=blah"> link in it.
If you're required to submit just one JSP file, you can combine the two by having the JSP show a HTML page if it doesn't receive any query parameters, and send an image if it does receive an image id as a query parameter.
To insert:
One JSP that displays a HTML form with a file upload link if it doesn't get called with any HTTP POST data
If the JSP does get called with HTTP POST data:
** Issue a JDBC INSERT to create a record for the file in the database, but do not commit
** Access and decode the POST data using the methods provided in JSP
** Extract the desired file name from the form data and open a binary output stream to a file on the filesystem with that name
** Copy the image bytes into that output stream, url-decoding if required (the HTTP POST form handling code in JSP is likely to decode it to a byte stream for you, though)
** Flush and close the output stream
** Commit the transaction with the JDBC INSERT.
You should be able to find numerous examples of both with a quick Google search. If you can't, adapting examples from other programming languages should be easy enough.
For inserting you must think carefully about the error cases. That's a large part of proper programming.
I am intentionally not showing you code examples. You should be able to do this yourself if you're a final year student. You won't know everything you need, but by now you should know how to find out what you don't know when you need to know it. Tutorials. Documentation. Google. Writing test programs to figure things out. Method name autocomplete in NetBeans / Eclipse. Adapting sample code. You've got lots of options.
Saving the image in a web directory and storing the URL in the database using this approach, I stored the image URL in the database. Based on that image id (I need to pass this image id to the controller from an Ajax call). I need to retrieve the image.
I got the image id using a jQuery template, so I have passed that image id to the controller. What should I write in the controller, filepathresult or fileresult? Or is there another approach?
OK, you're a bit confused.
You have the actual image file, file.jpg and you have the physical path to the file, D:\some\path\to\file.jpg.
You have the URL path to the file and a surrogate identity (your id).
id: 1337 (some random number)
URL: ????
First question:
You say you're storing the URL. Is it really the complete URL? Is it just a partial path to the image? Is the path from the root of the website or the root of the application? Is it just a partial physical path?
Second question:
What are you actually trying to do?
Do you just want to get the full path to the image? Why do you need Ajax to do this, if you already have the id? You might want to rethink how you're storing the images if any performance needs to come out of this.
Once an image gets a new identity, it often makes sense to use that new identity everywhere; you might ought to consider copy/rename the file for the new identity after it's uploaded (and possibly save the old filename for record keeping purposes). If you need to keep the file names (more or less) as-is, however, it'd be better to provide the ability to grab the URLs for a whole set of ids rather than to individually make an Ajax request id-by-id.
If you request a resource (AKA navigate to a URL) that has a physical file, IIS is going to serve it directly (that is, if you ask for www.mysite.com/Images/Image3.jpg IIS is going to serve it directly). I really don't understand exactly what you are doing, but if you mean that you get the associated URL for an image using an Ajax call to an MVC controller with the id of the image, you could do several things.
You could simply return the URL and use JavaScript code to create an image tag with that URL and inserting it in the DOM.
You could return a view like <img src="{yoururl}" /> and insert it in the DOM using JavaScript.
You could store the images on the database directly and use the File method to return the image bits indicating the correct MIME type.
I've asked a question about what is "rendering a view". Got some answers:
Rendering a view means showing up a View eg html part to user or
browser.
and
So by rendering a view, the MVC framework has handled the data in the
controller and done the backend work in the model, and then sends that
data to the View to be output to the user.
and
render just means to emit. To print. To echo. To write to some source
(probably stdout).
but don't understand then the difference between rendering a view and using the Response class to send the output to the user using its sendResponse() method. If render a view means to echo the output to the user then why sendResponse() exists and vise versa? sendResponse() exactly sends headers and after headers outputs the body. They solve the same tasks but differently? What is the difference?
In ZF, rendering a view doesn't actually output any content. Instead the rendering process returns the content as a string to the caller. Zend_Application automatically takes care of taking the rendered view and inserting it into your layout (assuming you use layouts) through a placeholder, and putting that data into the Zend_Controller_Response_Http object which is ultimately responsible for delivering the content to the user. The reason for the Response object is so it can encapsulate your HTML output, and also manage any additional HTTP headers or redirects you want to send.
You can also manipulate further the contents of the response in the Response object prior ot sending the data to the client if you wish.
sendResponse() takes care of sending any headers (including the HTTP response code), checking for any exceptions that may have occurred (due to not being able to send headers or other reasons) and then sends the HTML which could include your layout and one or more rendered view scripts.
Hope that helps.
They are two very different things.
Rendering a view provides another layer in which you can template your data. This will allow you to easily dynamically populate HTML/templates keeping logic seperate from presentation.
Echoing data directly skips this step, and is usally reserved for reterning json/xml (data) responses to user instead of html response.
You didn't post which framework you are talking about but both should allow you to specify response headers.
Please don't oversimplify. Every server's purpose is to render resource but that doesn't mean they are all the same.
I'm working on a project that the web page will fetch the data from java hashtable object in jsp page. I'm using a jsp for gerenated the web page based on HTML. The data is stored in the java hasbtable object on the server. I want to try to make an AJAX call to fetch the data from the server, then display it in the jsp page.
I just want to know if this is possible to do that by make an AJAX call to access the java hashtable object, then fetch the data back to the client side.
Thanks
Here is the test.jsp page which contain the hashtable obejcts:
Hashtable generalTable = (Hashtable) metaDataTable.get("General");
Hashtable adminTable = (Hashtable) metaDataTable.get("Administration");
My inital approach is to make an AJAX call to this test.jsp page. Then try to access those two GeneralTable and adminTable hashtable objects. In those two obejcts, it contains the values I would like to fetch.
Unfortunately, I don't have the code yet for my part because I don't know if this is possible or not.
Yes, it's possible, but you will need to have some server-side code to deal wit the request for the data you want, just like with any other AJAX functionality in any other system.
One way to do this would be to have a "special" jsp that gives you back the data you need without any of the typical HTML. Having the special jsp output it's data as a JSON object will make your life much easier in the client-side code.