Что еще нужно для Ajax, чем эта функция

Question

У меня есть небольшая функция JS, которая выполняет Ajax для меня, и еще одна такая, которая добавляет данные POST к запросу. Аякс - такая большая тема, о которой так много библиотек, что мне не хватает в моей функции, это небезопасно или что-то еще беспокоит?

function loadPage(pagePath, displayElement)
{
    var xmlHttp;

    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            document.getElementById(displayElement).innerHTML = xmlHttp.responseText;
        }
    }

    xmlHttp.open("GET", pagePath, true);
    xmlHttp.send(null);
}

Answer 1

Я настоятельно рекомендую вам не использовать свой собственный код Ajax. Вместо этого используйте фреймворк, такой как Prototype, Dojo или любой другой. Они позаботились о том, чтобы обработать все готовые состояния, которые вы не обрабатываете (2 означает, что он был отправлен, 3 означает, что он находится в процессе и т. Д.), И они должны избежать ответа, который вы получаете, чтобы не вставить потенциально небезопасный javascript или что-то на вашу страницу.

Еще одна вещь, которую даст вам более надежная структура, - это возможность делать больше, чем просто использовать innerHTML для замены элементов в DOM. Ваша функция здесь может использоваться только для замены одного элемента ответом на вызов ajax. С Ajax вы можете сделать гораздо больше.

Answer 2

Я бы удалил эту строку.

alert("Your browser does not support AJAX!")

Кричать на пользователя на языке, который он, вероятно, не понимает, хуже, чем провал. : -)

Answer 3

Я никогда не был фанатом вложенных блоков try / catch, поэтому я бы сделал это примерно так:

var xmlHttp;
if (window.XMLHttpRequest) {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

if (xmlHttp) {
  // No errors, do whatever you need.
}

Я думаю, это сработает. Но, как уже упоминалось ранее - зачем изобретать велосипед, используйте библиотеку. Еще лучше - узнай, как они это делают.

Answer 4

То же самое в прототипе:

function loadPage(pagePath, displayElement) {
    new Ajax.Updater(displayElement, pagePath);
}

Ajax.Updater в API прототипа

Answer 5

jQuery, вероятно, одна из самых популярных библиотек.

Answer 6

Если вы действительно хотите увидеть, чего вам не хватает, прочитайте исходный код jQuery или Prototype для их подпрограмм ajax. Если в комментариях есть номера ошибок, посмотрите также.