The problem is now I have to use full url to link my css, js and image files. Also, one of the plugins in my code (AjaxLoader) Couldn't use full url to load a page in a div. Relative path such as (path/filepath.ext) does not work.
So, is there anyway to use usual path (path/filepath.ext)?
You are serving scripts from your internal path as subdomain, but you are not applying this to images, css etc. Hence to the outside world they are on a different host and you need to fully qualify it with host name, as you have found out.
If you want to keep your paths from root only (e.g. src="/some-path") for your jpg, css etc, you would need another rule just for these files that rewrites the request to the physical location of your jpg, css etc.
So to the outside world they would be served under whatever the subdomain you have, allowing you to have paths in HTML absolute from root, but physically they would be picked up from the same place on the server for all subdomains.
Where do the non-page files really live? Does each /state/ subdirectory have its own set of images, CSS and so on, or is there yet another directory that holds all of them? Before you can write a rule, you need to lay out in English exactly what you want to have happen.