Use AJAX or pre-load: dynamic changes of items in select element

Apologies in advance for a long question: I do want to give all the relevant information.

In our (quite large) web application, we have a generic code for entering addresses (there could be a number of different addresses: business address, users' address, online shop delivery address, etc.) The addresses can be anywhere in the world, although the site itself is in English (and for now we have no plans to change this aspect). The standard address has these fields:

• Street address
• City
• State/County/Province
• Postal/ZIP code
• Country

Some fields are optional, of course (e.g. there are no postcodes in Republic of Ireland, for example and there are no state/county/province division in many countries). The issue we're having is exactly with the state/county/province field: as it can be anywhere in the world, we are currently using <input type='text'/> for this field. However now users put anything they feel like into it - and we don't even have unified values for where they should be (e.g. for Boston, Massachusetts, some user put MA, some put Mass, some put Massachusetts, some put Middlesex county, Ma, and so on - I'm not even talking about all the misspellings). This makes any statistics by geography almost useless.

To mitigate this issue, we're moving to a different way of entering addresses: the user must select the country first, then based on the country selection we will display a dropdown <select> element with the list of states, counties, provinces, etc. valid for that country. If the country doesn't have this division (as far as our system is aware), then we revert back to the plain text field. So far, so good.

Now, for the actual question. We have a table in a DB that contains this county/state/province/etc division per country. The volume of data is not large: at present, 7 countries with 262 counties/states/provinces across all of them (i.e. total 262 rows in the table). I'm sure this will grow, but not hugely. There are two ways to handle this:

1. Pre-load all this data, put it into global java开发者_StackOverflow中文版script variables and in the onchange of the dropdown for the country update the corresponding dropdown for the state/county/province.

2. Use AJAX in the onchange for the country dropdown to load the country-specific list from the database as/when it's needed.

Which option, in your opinion, is the better one (preferably with some reasoning as to why)?

I would pre-load the data: have all the data in a javascript file (as JSON, for instance), minify it, gzip it and send it to the client. This is text data. Should not take much of the bandwidth.

I would use Ajax only for really dynamic items, or when you have a lot of data and you cannot load all of the data on load (because the volume is large and the user is going to use only a subset of them).

If you are really worried about the bandwidth: you have users that may not have a high speed connection, users that use a mobile phone to access your site etc, then you can detect a slow connection and fallback to Ajax.

Assuming your audiences are desktop users, I would tend to go for the first option, as the size of data you're loading doesn't seem to be too large. You can even put more intelligence into it to improve the user experience, such as loading the data in batches, in order of popularity.

If you are targeting mobile users, then you may want to lean towards the second option.

Either case, you will want to try it out yourself with the slowest connection speed you may be expecting, making sure you are delivering acceptable user experience even for the worst case. The chances are you will end up choosing an option somewhere between those two you listed: pre-load some data, and load the others in the background and/or on-demand.

I'd load the datas once the page is loaded. Your page won't suffer from decreased loading time, and the datas will be ready when the onchange event will be fired.