I have an html file index.html (in my server say abc.com) which accesses xyz.js like
<script type="text/javascript" src="xyz.js"></script>
The javascript file in turn accesses data.xml file. The files index.html,xyz.js and data.xml are in the same folder.
How can I deny direct access to xyz.js and data.xml if a user types abc.com/xyz.js and abc.com/data.xml in the browser. Needless to say index.html must be able to access these files.
How can I do this(preferably with .htaccess)
I'm assuming you mean index.html refers to the .js file via a script tag, and then the js reads in the xml using XMLHttpRequest or something similar. ie: the js and xml both need to be readable by the browser, but you want to restrict this to only be in an "approved" way.
If that's right, then you can't. You could try looking at the Referer, but it's unreliable and easily spoofable. Even without spoofing, many browsers have debugging tools that make it easy to see the result of every GET that has been performed.
It's better to just get used to the fact that anything you send to the browser is potentially viewable by the user if they work hard enough at it.
I suppose for JavaScript you could use an obfuscator tool if you feel so inclined. For XML, there isn't much you can do. I suppose you could encrypt it, but that would be easy to break as your js code will necessarily contain the decryption routine and key.
If you truly need to protect the data, you need to implement the sensitive part of your program to run on the server and not in the client. Then you can keep your datasource out of the public web space completely. If the client (browser) can access the raw data, then so can the user (even if you force them to go through multiple steps to get at it).
To acheive your goal you need to split your program architecture in two: