Query data in javascript - VF Page

In this blog i will explain how we can extract data in javascript on visualforce page.
Recently I came across a requirement where i need to create picklist with more 3000 records to display on a visualfoce page. 
The picklist values were saved as custom setting records. As we all are aware that in visualforce picklist, the maximum limit options allowed are 1000.
To insert more than 1000 options we can use javascript.
First we need to include script which allow us to perform soql query in javascript
<script src="/soap/ajax/9.0/connection.js" type="text/javascript">

Now on window.onload function we will first get the current session ID.

The session ID will be used to connect to salesforce database in javascript.

sforce.connection.sessionId = '{!$Api.Session_ID}';

after getting the session we will do the query using sforce.connection.query to perform query.
After retrieving the records we need to convert it into array of records to perform operation.
var records = qr.getArray("records");
After receiving the record we will loop on the record and create Option element dynamically.
After creating the element we will append it to a Select element using append child method.
var selectList = document.getElementById('SelectList');
for(var i=0;i<records.length;i++)
           {
               
               var x = document.createElement("Option");
               x.innerHTML     = records[i].IATA_Code__c+' - '+records[i].Full_Name__c+' '+records[i].Country__c;
                x.value         = records[i].IATA_Code__c;
                selectList.appendChild( x );
           }
As we know that by using sforce.query.connection we can only retrieve upto 2000 records, to
get more records we will have a look in below record.
var selectList = document.getElementById('airport-codes');
            alert(selectList)
            sforce.connection.sessionId = '{!$Api.Session_ID}';
            var qr = sforce.connection.query("select Id, IATA_Code__c, ICAO_Code__c, 
           Full_Name__c, City__c, State__c, Country__c FROM Airport_Code__c 
          WHERE IATA_Code__c != Null AND IATA_Code__c != \'\' ORDER BY IATA_Code__c");
            var queryMore = true;
            while (queryMore) {
            var records = qr.getArray("records");
           for(var i=0;i<records.length;i++)
           {
               
               var x = document.createElement("Option");
               x.innerHTML     = records[i].IATA_Code__c+' - '+records[i].Full_Name__c+' '+records[i].Country__c;
                x.value         = records[i].IATA_Code__c;
                selectList.appendChild( x );
           }
           if (qr.getBoolean("done")) {
                queryMore = false;
            }
            else {
                qr = sforce.connection.queryMore(qr.queryLocator);
            }
          }

after retrieving the record using sforce.connection.query, getboolean("done") method return true if all the records are retrieved from database.

if there are more records then the method will return false. in the above code we are using while loop untill the getboolean() returns true.

if the value is false then we will use queryMore method to retrieve next batch of records from database. 

This process continue till all the records are retrieved.