<script>
getData(url,el_id){
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange(el_id);
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
}
function processStateChange(id) {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById(id).innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
<a href="h1" onClick="getData('h1','i1')">текст1</a> <span id="i1"></span>
<a href="h2" onClick="getData('h1','i2')">текст2</a> <span id="i2"></span>
<a href="h3" onClick="getData('h1','i3')">текст3</a> <span id="i3"></span>
Вопрос про Ajax
Добрый день!
Недавно начал постигать азы ajax'а, и не могу найти ответ на следующий
вопрос. Буду очень благодарен за помощь.
Допустим, есть HTML-страница следующей структуры:
<script>
getData(url){
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
}
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("!!!XXX!!!").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
<a href="h1" onClick="getData(h1)">текст1</a> <span id="i1"></span>
<a href="h2" onClick="getData(h2)">текст2</a> <span id="i2"></span>
<a href="h3" onClick="getData(h3)">текст3</a> <span id="i3"></span>
В ответ на кликанье по ссылке нужно на место рядом стоящего span'а
поместить ответ сервера.
Как обработчику processStateChange указать, какой именно span (i1, i2, i3)
нужно обновить? Чтобы не писать три обработчика, отличающихся только одним
параметром -- id обновляемого span'a?
Заранее спасибо.
Недавно начал постигать азы ajax'а, и не могу найти ответ на следующий
вопрос. Буду очень благодарен за помощь.
Допустим, есть HTML-страница следующей структуры:
<script>
getData(url){
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
}
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("!!!XXX!!!").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
<a href="h1" onClick="getData(h1)">текст1</a> <span id="i1"></span>
<a href="h2" onClick="getData(h2)">текст2</a> <span id="i2"></span>
<a href="h3" onClick="getData(h3)">текст3</a> <span id="i3"></span>
В ответ на кликанье по ссылке нужно на место рядом стоящего span'а
поместить ответ сервера.
Как обработчику processStateChange указать, какой именно span (i1, i2, i3)
нужно обновить? Чтобы не писать три обработчика, отличающихся только одним
параметром -- id обновляемого span'a?
Заранее спасибо.
[QUOTE=mitya321]
Как обработчику processStateChange указать, какой именно span (i1, i2, i3)
нужно обновить? Чтобы не писать три обработчика, отличающихся только одним
[/QUOTE]
Что-то в духе:
Спецификация по Ajax еще пишется, т.е. по сути это все еще эксперимент. Так стоит ли лезть в эту технологию? Не лучше ли заняться изучение JavaScript? ;)
Как обработчику processStateChange указать, какой именно span (i1, i2, i3)
нужно обновить? Чтобы не писать три обработчика, отличающихся только одним
[/QUOTE]
Что-то в духе:
Код:
Спецификация по Ajax еще пишется, т.е. по сути это все еще эксперимент. Так стоит ли лезть в эту технологию? Не лучше ли заняться изучение JavaScript? ;)
[QUOTE=alekciy]Что-то в духе:
Спецификация по Ajax еще пишется, т.е. по сути это все еще эксперимент. Так стоит ли лезть в эту технологию? Не лучше ли заняться изучение JavaScript? ;)[/QUOTE]
К сожалению это не работает...
Похоже что функция-обработчик события (в данном случае processStateChange()) не может иметь параметров :-(((
Какие еще могут быть варианты?
Код:
<script>
getData(url,el_id){
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange(el_id);
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
}
function processStateChange(id) {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById(id).innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
<a href="h1" onClick="getData('h1','i1')">текст1</a> <span id="i1"></span>
<a href="h2" onClick="getData('h1','i2')">текст2</a> <span id="i2"></span>
<a href="h3" onClick="getData('h1','i3')">текст3</a> <span id="i3"></span>
getData(url,el_id){
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange(el_id);
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
}
function processStateChange(id) {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById(id).innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
<a href="h1" onClick="getData('h1','i1')">текст1</a> <span id="i1"></span>
<a href="h2" onClick="getData('h1','i2')">текст2</a> <span id="i2"></span>
<a href="h3" onClick="getData('h1','i3')">текст3</a> <span id="i3"></span>
Спецификация по Ajax еще пишется, т.е. по сути это все еще эксперимент. Так стоит ли лезть в эту технологию? Не лучше ли заняться изучение JavaScript? ;)[/QUOTE]
К сожалению это не работает...
Похоже что функция-обработчик события (в данном случае processStateChange()) не может иметь параметров :-(((
Какие еще могут быть варианты?
Да, было такое дело, не получалось в нее передавать параметры. Но я тестировал передачу параметров в функцию, и работает! Работает точно в:
Opera 9.01, FireFox 1.5, Avant 9.02 (довольно старая версия).
Так что работать должно, у меня ведь работает.
Opera 9.01, FireFox 1.5, Avant 9.02 (довольно старая версия).
Так что работать должно, у меня ведь работает.
Вместо:
req.onreadystatechange = processStateChange(el_id);
Попробуй:
req.onreadystatechange = function(){processStateChange(reg,el_id)};
а:
function processStateChange(id) { ......
замени на:
function processStateChange(reg,id) { .....
у меня так пашет;)
req.onreadystatechange = processStateChange(el_id);
Попробуй:
req.onreadystatechange = function(){processStateChange(reg,el_id)};
а:
function processStateChange(id) { ......
замени на:
function processStateChange(reg,id) { .....
у меня так пашет;)
Можно еще через глобальную зону видимости передать. Т.е. создав переменную в глобальной зоне видимости которую потом в функции и использовать:
Код:
<script>
var el_id;
getData(url,id){
el_id = id;
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange();
...
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById(el_id).innerHTML = req.responseText;
....
var el_id;
getData(url,id){
el_id = id;
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange();
...
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById(el_id).innerHTML = req.responseText;
....