Menu
the following code is seemingly quick when only a few “pairs” are returned, but as the # of pairs grows, the slower this gets. any help finding a way to make this code faster, and/or more efficient is most appreciated.
[CODE]
function get_users_forDropdowns(eid) {
// where ‘eid’ is the ID of the select input to update
var e = document.getElementById(eid);
if (e) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
if (xhttp.responseText) {
//console_msg(“data received!”);
var a = xhttp.responseText.split(“—–“); // does splitting on so many characters slow the process?
e.innerHTML = “”;
for (i = 0; i < a.length; i++) {
var b = a[i].split(“=”);
e.innerHTML += “<option value=\”” + b[0] + “\”>” + b[1];
}
} else {
//console_msg(“no data received!”);
}
}
}
e.innerHTML = “<option>loading…”;
xhttp.open(“GET”, “getusers.pl?a=1&o=1”, true);
xhttp.send();
console_msg(“requesting user ID’s…”);
} else {
console_msg(“HTML element ID ‘” + eid + “‘ does not exist!”);
}
}
jamroll
Hi, Super Moderator!
I am not using JSON. I don't understand what you mean by "parsing in the browser" (the above code is client-side, if that's what yer meanin). Why don't i use JSON? Straight up, I'm not really interested in learning the "language" of JSON (because i already have enough to worry about without adding to my woes with yet another new way of doing things). Unless including JSON into this [B]one[/B] function is SUPER simple, and uses little to no resources (client and/or server side), then okay, i'll give it a go, otherwise i'd like to find a normal javascript way.[/QUOTE]
{
1:"cheese",
"mice":"elephants",
"mango":57
}<i>
</i>function get_users_forDropdowns(eid) {
var el = document.getElementById(eid),
xhttp;
if(el == null) {
console_msg("HTML element ID '" + eid + "' does not exist!");
} else {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = xhttp.responseText.split("-----");
for(i=0; i<ret.length; i++) {
temp = ret[i].split("=");
el.add(new Option(temp[0], temp[1]);
}
el.remove(0);
} else {
console_msg("no data received!");
}
}
};
<i> </i>el.add(new Option("loading...");
<i> </i>xhttp.open("GET", "getusers.pl?a=1&o=1", true);
<i> </i>xhttp.send();
<i> </i>console_msg("requesting user ID's...");
}
};<i>
</i> xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = JSON.parse(xhttp.responseText); // JSON response '{"uservalue":"username", ...}'
for(i in ret) {
if(ret.hasOwnProperty(i)){
el.add(new Option(ret[i], i);
}
}
el.remove(0);
} else {
console_msg("no data received!");
}
}
};When analyzing performance issues in a configuration like this, you need to look at the server side script too. Measure the response times first by the developer tools of your browser. Preparing the information on the server might include access to a database which possibly can be optimized.
Reading the client side script you posted I do not see any way how to optimize it.[/QUOTE]
JavaScript Object Notation (JSON) is a data-interchange format that is human readable and when parsed with JSON.parse, the output is turned from a string directly in to a variable, for example, [B]myObject = JSON.parse( data-interchange-string )[/B] will turn the passed argument (a string ) in to an object.
Imagine that this is a JSON String...not much as it is, but parse it and then myObject.mice will = elephants, myObject[1] = cheese...{
1:"cheese",
"mice":"elephants",
"mango":57
}
JSON
Your request can then be simpler, by requesting data via a PHP script on the server and using PHP's JSON functions, you could use a database to provide the routine you write to push out a JSON formatted string as the response, the clients browser then parses that data string and returns a working variable as an Object that you can easily access the data in that variable and requires no splitting or filtering or manipulation of strings in URL's which is never a good idea as passing data in URL's in any case.[/QUOTE]
Every cycle of the loop you're adding to the innerHTML, which means the HTML you're adding and the current HTML of the selectbox has to be parsed every cycle. By using the DOM selectbox API you can make it run a lot faster.
or with JSON response<i>
</i>function get_users_forDropdowns(eid) {
var el = document.getElementById(eid),
xhttp;
if(el == null) {
console_msg("HTML element ID '" + eid + "' does not exist!");
} else {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = xhttp.responseText.split("-----");
for(i=0; i<ret.length; i++) {
temp = ret[i].split("=");
el.add(new Option(temp[0], temp[1]);
}
el.remove(0);
} else {
console_msg("no data received!");
}
}
};
<i> </i>el.add(new Option("loading...");
<i> </i>xhttp.open("GET", "getusers.pl?a=1&o=1", true);
<i> </i>xhttp.send();
<i> </i>console_msg("requesting user ID's...");
}
};<i>
</i> xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = JSON.parse(xhttp.responseText); // JSON response '{"uservalue":"username", ...}'
for(i in ret) {
if(ret.hasOwnProperty(i)){
el.add(new Option(ret[i], i);
}
}
el.remove(0);
} else {
console_msg("no data received!");
}
}
};
What kind of device are you testing this on? Because I need to add over a thousand options to make it feel slow. You shouldn't want to present a hundreds of options selectbox to you're users.[/QUOTE]
Every cycle of the loop you're adding to the innerHTML, which means the HTML you're adding and the current HTML of the selectbox has to be parsed every cycle. By using the DOM selectbox API you can make it run a lot faster.
or with JSON response<i>
</i>function get_users_forDropdowns(eid) {
var el = document.getElementById(eid),
xhttp;
if(el == null) {
console_msg("HTML element ID '" + eid + "' does not exist!");
} else {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = xhttp.responseText.split("-----");
for(i=0; i<ret.length; i++) {
temp = ret[i].split("=");
el.add(new Option(temp[0], temp[1]);
}
el.remove(0);
} else {
console_msg("no data received!");
}
}
};
<i> </i>el.add(new Option("loading...");
<i> </i>xhttp.open("GET", "getusers.pl?a=1&o=1", true);
<i> </i>xhttp.send();
<i> </i>console_msg("requesting user ID's...");
}
};<i>
</i> xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = JSON.parse(xhttp.responseText); // JSON response '{"uservalue":"username", ...}'
for(i in ret) {
if(ret.hasOwnProperty(i)){
el.add(new Option(ret[i], i);
}
}
el.remove(0);
} else {
console_msg("no data received!");
}
}
};
What kind of device are you testing this on? Because I need to add over a thousand options to make it feel slow. You shouldn't want to present a hundreds of options selectbox to you're users.[/QUOTE]
okay. that sounds really easy. except, i'm coding in perl, not PHP...don't mean to be difficult ?[/QUOTE]
<i>
</i>/////////////////////////////////////////////////////////////////////
function get_users_forDropdowns2(eid) {
var el = document.getElementById(eid),
xhttp;
if(el == null) {
//console_msg("HTML element ID '" + eid + "' does not exist!");
} else {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var ret,
temp,
i;
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText) {
ret = xhttp.responseText.split("-----");
for(i=0; i<ret.length; i++) {
temp = ret[i].split("=");
el.add(new Option(temp[0], temp[1]));
}
el.remove(0);
} else {
//console_msg("no data received!");
}
}
};
<i> </i>el.add(new Option("loading..."));
<i> </i>xhttp.open("GET", "getusers.pl?a=1&o=1", true);
<i> </i>xhttp.send();
<i> </i>//console_msg("requesting user ID's...");
}
}
You should note that JSON strings can be written as plain text file, I mentioned PHP because it offers functions to make making JSON object strings easier where data comes from a database.
... and what kind of server are you on? PHP is like the defacto standard on any hosting service (along with other serversides and server scripting services), if not that then get a host that does give you server-sides.[/QUOTE]
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> JSON .stringify() / .parse() test </title>
<body>
<h1>JSON.stringify() / .parse() test</h1>
<h2>Create JSON string from a JavaScript Array and Object.</h2>
<hr>
<pre id="demo"></pre>
<script>
// JSON array
document.getElementById("demo").innerHTML = '<h2>JSON Array</h2>';
var arr = ["Lincoln", "alice", "beth", "Larson"];
var pick = JSON.stringify(arr); // convert array to string
document.getElementById('demo').innerHTML += '<h3>Storage</h3>String arraynSome: '+pick+'n';
var arr2 = JSON.parse(pick); // convert string to a different array
var str = '<h3>Access:</h3>Str => Arrayn'+arr2.join('n');
str += 'nnLast:'+arr2[arr2.length-1];
document.getElementById('demo').innerHTML += str+'<hr>';
document.getElementById("demo").innerHTML += '<h2>JSON Object</h2>';
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML += '<h3>Storage</h3>'+myJSON;
var arrObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML += '<h3>Access:</h3>Name: '+arrObj.name
+ '<br> Age: '+arrObj.age
+ '<br>City: '+arrObj.city+'<hr>';
</script>
</body>
</html>
0.1.9 — BETA 5.19