Populating a <select> menu with ajax, json and WITHOUT jquery

Question

I have a few select menus that I would like to populate using json from my php script (each select menu shows different values depending on the contents of the other select menus). I know how to clear and fill a select menu from the js as long as I have an array to work with. The problem is that I don't know how to use the ajax call to retrieve an array or json for the javascript to populate the select menu with.

I do not wish to use jquery as it is simply too big for such a simple task imho.

I would appreciate any comments regarding this matter.

My test script for populating a menu:

var sl = document.getElementById(foo);
sl.options.length = 0;
for(var i=0;i<100;i++){
    sl.options[i] = new Option(i + "Option text", i+"optionValue");
}

Thank you.

Jquery is the size of a smallish jpg image. For cross browser Ajax it is so convenient — mplungjan
– mplungjan, Commented Nov 9, 2013 at 13:24
you could use a stripped down version through the jQuery Builder at projects.jga.me/jquery-builder — Gabriele Petrioli
– Gabriele Petrioli, Commented Nov 9, 2013 at 14:49

silicakes · Accepted Answer · 2013-11-09 13:15:27Z

2

Zepto is a lightweight implementation of jQuery which has the JQ ajax support, it's really small and could save you a lot of time.

answered Nov 9, 2013 at 13:15

silicakes

6,9323 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

silicakes Over a year ago

i'm pretty sure the ajax bit is supported by all IEs supporting the vanilla ajax since it's just an interface

Graham · Accepted Answer · 2013-11-09 13:29:41Z

1

If you have control over the PHP script, then the easiest (native) way is to use JSON-P.

On the server:

<?php

$callback = $_GET['callback'];
$json = json_encode($data);
print $callback . '(' . $json . ');'; 

?>

and on the client:

<script>

function getJSON() {
    var script = document.createElement('script');
    script.src = 'http://mysite.com/page.php?callback=updateSelect';
    document.getElementsByTagName('head')[0].appendChild(script);
}

function updateSelect(json) {
    // do stuff with your JSON object
}

getJSON();

</script>

This makes a basic GET request to your remote page; the page prints the encoded JSON wrapped in a callback name you provided, which in this case immediately calls the updateSelect method, passing in the JSON object.

edited Nov 9, 2013 at 13:29

answered Nov 9, 2013 at 13:24

Graham

6,5822 gold badges39 silver badges39 bronze badges

Comments

Uri London · Accepted Answer · 2013-11-09 14:01:03Z

If I understand your question correctly, you are looking for sending a request to the server, and getting back some data in a json format, without using jQuery (and potentially - without using any other library).

Well, very easy ... welcome to year 2000, before 'prototype', 'jQuery' and the other libraries were invented, and before the term 'Ajax' was coined (although the paradigm was already in use).

XmlHttpRequest - This is an object that let you send asynchronous http request and get a respond. Initially, the inventor of this object (Microsoft Outlook Web Access) had XML content, and hence the name, but you can pass any kind of MIME type, including json. Also, initially it was implemented only as an ActiveX available only in IE, but now it is a sub-object of the 'window' top level object, and it is available on all browser. jQuery as well as basically all other libraries are using this object to support Ajax functionality. Take a look here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest for more details and samples.
XmlHttpRequest will let you issue requests only to the same domain the page is coming from. To overcome that, a second technique, called JSON-P was invented, taking advantage from the fact you can have a `` element with src pointing to other domain. The trick is to generate on the server a script with the data as an argument to the callback function. The callback function is implemented in your page. The name of the function would be part of the URL. For example:

<script type="text/javascript" 
    src="http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc"
    ></script>

Take a look at this URL (it returns recent posts from Google's blogpost). Note that everything is embedded within a call to the function myFunc, passed as an argument.

You can embed the <script> element in your code, or you can generate it on the fly with document.write, or you can even use the DOM manipulation to add element to the element of type SCRIPT.

Collectives™ on Stack Overflow

Populating a <select> menu with ajax, json and WITHOUT jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related