Ajax Clear Browser JS, CSS, image caching methods _javascript tips

Do Dongdong is the picture in the server's address stored in the database, and then to the browser display, but later found two problems.

First: For the sake of safety, JS is unable to read the local picture, or you write a JS, it is not possible to get anyone on the computer files.

Second: The picture exists in the server's hard disk, not in the customer's hard drive, so it is not to be taken

Later on the Internet to find methods, to find the method, are all kinds of conversion binary to XML, a variety of tall answers, and then I was too lazy, he thought of a

method is to use the BufferedImage class.

Begin

First of all, my idea is to put the local picture, loaded into memory, and then put into the bufferedimage this buffer stream, and then use imageio.write (), which we all estimated to want a way of thinking, But if you say Ajax, get the data, guess what a mess it is! Never mind, I'll introduce you later.

Tool class

First set up a load of the picture of the tool, the address of a picture when the parameters to save the image of the buffer flow:

/**
   * According to the address of the picture, return the buffer stream of the picture
   * @param addr
   * @return
   /public
  static BufferedImage getInputStream ( String addr) {
    try {
      string imgpath = addr; 
      BufferedImage image = Imageio.read (new FileInputStream (Imgpath));
      return image;
    } catch (Exception e) {
      e.printstacktrace ();
      System.out.println ();
      System.out.println ("Get Picture exception: Java.awt.image.BufferedImage");
      System.out.println ("Please check that the picture path is correct, or whether the address is a picture");
    }
    return null;
  }

Yes, it is to use imageio.read, to load the stream object, and then the code to process the class, which I used is springmvc,Springmvc This period of time

It's a fire, so I'm a little bit struts2.

Processing class

/**
   * According to the image address, to obtain the picture
   * @param addr
   * @param response
  /@ResponseBody @RequestMapping ("/ Getimg ") Public
  void Getimg (@Param (" addr ") String Addr,httpservletresponse response) {
    bufferedimage img = new BufferedImage (BUFFEREDIMAGE.TYPE_INT_RGB);
    img = imgutil.getinputstream (addr);
    if (img==null) {
      throw new RuntimeException ("Print picture exception: COM.CONTROLLER.BUSINESS_CTRL.GETIMG (String, HttpServletResponse) ");
    }
    if (img!=null) {
      try {
        imageio.write (img, JPEG, Response.getoutputstream ());
      } catch (IOException e) {
        e.printstacktrace ();
        System.out.println ("Print exception: COM.CONTROLLER.BUSINESS_CTRL.GETIMG (String, HttpServletResponse)");}}
  

Obviously, when you read a picture using imageio.read () , you use the Imageio.write (), the output image, the input stream is

Httpservletresponse.getoutputstream ()

Client

Copy Code code as follows:

function setimg (addr) {
　　　　　　　　　
$ ("#logo"). attr ("src", "business/getimg?addr=" +addr+ ");
}

As shown in the figure, when you need to load a picture, trigger Setimg method, give it an address, of course, the address, has already been uploaded from the background to the foreground, nature, even if there is no address, slightly changed, you can also get the address in the background, and then return, and then the IMG tag set src attributes, you can get the picture.

The following jquery1.2 version uses Ajax to clear the browser JS, CSS, image caching methods.

jquery has ifmodified and cache parameters since 1.2 and doesn't need to add headers on its own.

 ifmodified Boolean Default:false Allow The request to is successful only if the response Has changed since the last request. This is doing by checking the last-modified header. 
Default value is false, ignoring the header. Cache Boolean Default:true Added in JQuery 1.2, if set to false it would force the pages that you request to not be cache 
D by the browser.

$.ajax ({type: "Get", url: "Static/cache.js", DataType: "Text", Cache:false, ifmodified:true});