Fetching remote code/text with javascript?

So I'm working on making a dynamic drop dow开发者_如何转开发n select form and I need for each menu to propagate possible choices from a prebuilt chunk of html (located at, say, http://example.com/menu/choices) is there an easy way to use javascript to fetch the html of a remote page and then plug that in to the page? I know I can use .write() to insert the code, I just don't know how to fetch it.

Thanks!

Actually, you can't use write to insert the code, not once the initial page rendering is complete.

Loading Code

My first read of your question was that you wanted to load code — e.g., JavaScript. Here's how you do that, but see below.

The easiest way to do this is if your code exists at its source location in a JavaScript file all ready for inclusion in a file in the normal way. In that case, all you need to do is create a script element and add it to the document:

var script = document.createElement('script');
script.type = "text/javascript";
script.src = /* ... the URL of the code ... */;
document.body.appendChild(script);
document.body.removeChild(script);

Note that last line, removing the script node immediately after inserting it in the document. Inserting the node is all you need to do, that immediately triggers the process by which the JavaScript file is fetched and interpreted. You can remove the script element immediately (or not, it's up to you).

In the above, I've added the element to document.body because it's convenient and it doesn't matter where you add it. However, most scripts you see doing this will usually add it to the head instead. That's fine too. More in this article, although it's focussed on the Prototype library.

Speaking of libraries, all of the above notwithstanding, if you use a JavaScript library like jQuery, Closure, Prototype, YUI, or any of several others, it will probably make this (even) easier for you.

Update: Did you add the jQuery tag later? I didn't see it originally. With jQuery, if you're loading the script from the same origin as the document, you can use the getScript function:

jQuery.getScript('ajax/test.js');
// Or $.getScript('ajax/test.js');

However, getScript is not the same as the technique above. getScript will be hampered by the Same Origin Policy, whereas adding a script tag is not.

Loading Markup

If you want to load HTML markup and apply it to part of a page, that's easily done with jQuery.load:

$('#someid').load("yoururl.here");

That will replace the contents of the element with the id "someid" with the HTML returned from the given URL. Here's a live example that loads options into a select and another that loads text (a paragraph) into a div. This is easier with a library (like jQuery) because there are some issues around certain elements that libraries usually handle for you.

The thing you want is called AJAX (Asynchronous JavaScript and XML). If you're using jQuery:

$('#my-select-thingy').load('select-options.cgi');

or whatever flavour of server-side you prefer. You should have something like this in HTML:

<div id="my-select-thingy">
  <!-- select will go here -->
</div>

and the url above should return something like this:

<select>
  <option>Foo</option>
  <option>Bar</option>
</select>

You're way better of using jQuery for that. Just look into the Ajax methods and you'll get the hang of it. http://api.jquery.com/category/ajax/

Suppose you have the following HTML markup

<div id="fakeDiv"></div>

you can execute an ajax request like this

$.ajax({
    type: "get",
    dataType: "html",
    url: "http://example.com/menu/choices",
    data: {},
    success: function(response) {
        $("#fakeDiv").html('').html(response);
    },
});

to inject the html code returned by your url inside the DIV element.

This is jQuery code. Hope it helps!

Javascript usually can't access other websites for security reasons. If we could load content from wherever we wanted with a script we'd see some pretty rampant chaos. A simple solution is an iframe with the other document or just a section of it.

Does the website have anyway for you to access that info? If you can find an interface you can just get the info and stick in in the document. Otherwise you'd have to do some scraping.