| Autor | Zpráva | ||
|---|---|---|---|
| anonymníí Profil * |
#1 · Zasláno: 28. 4. 2014, 10:23:17
Ahoj,
řeším, jak pracovat co nejefektivněji s AJAXovými voláními. Na stránce mám několik akcí, které chci uživateli zpříjemnit AJAXem (typicky načítání součástí webu). Problém ale je ten, že se mi velké kusy kódu opakují a nevím, jak je nahradit (jestli to jde). Příklad (kus JS souboru, všechny zde nedefinované proměnné jsou samozřejmě definované jinde - kód funguje: if (locality) {
locality.onkeyup = function() { // tohle přepíšu asi na klasickou funkci volanou na onkeyup na elementu, ale teď to asi není podstatné
if (locality.value.length >= 3) {
var xmlhttp;
var data;
if (result.innerHTML != '') {
cities = result.className;
for (var i = 0; i < result.children.length; i++) {
if (locality.value.toLowerCase().replace(/[ -]/g, '') != result.children[i].innerHTML.substr(0, locality.value.length).toLowerCase().replace(/[ -]/g, '')) {
result.children[i].className = 'hide';
} else {
result.children[i].className = 'show';
}
}
} else {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < data.length; i++) {
result.innerHTML += '...';
}
}
}
xmlhttp.open('GET', '/ajax.php?t=new_article&q=' + locality.value, true);
xmlhttp.send();
}
}
last_length = locality.value.length;
}
}
setInterval(function() {
var xmlhttp, data;
var messages = document.getElementById('zpravy');
var messages_list = document.getElementById('messages_list');
var out = '';
var unread;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
messages.innerHTML = document.title = 'Zprávy' + (data.count > 0 ? ' (' + data.count + ') ' : '');
/* pokud jsem v detailu zpravu -> existuje element message_list */
if (messages_list) {
var messages_count = data.messages.length;
for (var i = 0; i < messages_count; i++) {
unread = 0
if (data.messages[i].status == 0 &&
(
data.user.type == '1' || data.user.type == '2'
)
) {
unread = 1
}
out += '<li>';
out += '...';
out += '</li>';
}
messages_list.innerHTML = out;
}
}
}
xmlhttp.open('GET', '/ajax.php?x_id=1&t=new_messages', true);
xmlhttp.send();
}, 60000);Problémů je několik: 1. v každém AJAXovém volání musím opakovat velký kus kódu, inicializaci samotného AJAXu. Sloučit do jednoho nevím jak, pokaždé to má jiný výstup (vstupy by se daly ošetřit parametry funkce při jejím volání). 2. v každém volání vypisuji kus HTML kódu, který mám vypsaný i v nějaké šabloně (neJS zobrazení, nebo přechod na danou stránku). Jednoduše ten kód zkopírovat nejde (abych ho udržoval na jednom místě - v šabloně bere data z PHP, tady z JS - ve stejném formátu, ale s jiným pojmenováním a syntaxí). Když chci změnit HTML, musím ho měnit v šabloně i JS, což se mi moc nelíbí. 3. mám se bát nějakého zneužití toho, že je vidět, jaká adresa se volá (ajax.php?parametry)? Zkoušel jsem ve firebugu měnit parametry volání, ale dotazy padaly na původní, mnou nezměněnou adresu. Dá se to nějak (parametry, URL předané serveru) podvrhnout změnou ve firebugu? Jestli ten zápis půjde nějak zjednodušit, ukážete jak, případně odkážete na nějakou kvalitní (e-)literaturu, kde bych se dočetl více. Díky. |
||
| juriad Profil |
Vytvoř si funkci třeba pojmenovanou ajax, které předáš adresu stránky a funkci, kterou má zavolat při dokončení:
function ajax(url, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
xmlhttp.open('GET', url, true);
xmlhttp.send();
}ajax('/ajax.php?t=new_article&q=' + locality.value, function(response) {
var data = JSON.parse(response);
for (var i = 0; i < data.length; i++) {
result.innerHTML += '...';
}
});Docela dobrý sborník nápadů ohledně požadavků, které bys mohl mít na tuto funkci je dokumentace http://api.jquery.com/jQuery.ajax/. V češtině hledej univerzální funkce na AJAX. Přečti si také Diskuse k častým potížím, zajímavostem a poučným debatám a odkázaná vlákna. |
||
| anonymníí Profil * |
#3 · Zasláno: 28. 4. 2014, 12:12:25
juriad:
Díky, to mi pomohlo. Vztahuje se to k mé první otázce, která mi tímto práci trochu zjednodušila. Co s dalšími body? Přiznám se, že ty mě trápí více než ten první, protože jde o časově náročnější úkony a současně bezpečnost. Díky. |
||
| juriad Profil |
#4 · Zasláno: 28. 4. 2014, 12:25:44
Ke zneužití ti řeknu toto: ve Firebugu na záložce Net pravým myšítkem na dotazu vyber Copy as cURL.
To ti uloží do schránky přikaz pro program cURL, který odešle ten samý dotaz. A ten příkaz si následně můžeš upravit jak jen chceš. Nikdy tedy nemůžeš věřit uživateli, že dotaz nepozmění či nepodvrhne. |
||
|
Časová prodleva: 10 let
|
|||
0