Во-первых вверх-голосование за попытку сделать это с реальной JavaScript!
Во-вторых, вы, вероятно, не знаете, но вы обрабатываете код как текст, а не как код. Не используйте innerHTML и не используйте responseText. Вам необходимо использовать надлежащий метод DOM, такой как appendChild и insertBefore, хотя с AJAX вам необходимо конкретно использовать importNode и responseXML. XML, который вы загружаете с сервера , должен быть подан как application/xml, mime text/xml недействителен.
Код на моем сайте работает со старыми браузерами (например, IE5/6, если вы на этот раз безумны). Я имел в виду очистить это. Кроме того, он многократно используется, поэтому вам не нужно будет создавать новые функции AJAX, кроме ajax_post(), которые, если вы посетите мой сайт и посмотрите файл index.js, вы можете с ним связать.
Супер-бонус:ajax_sequel() функция может быть использована для выполнения все, что вы хотите после запрос AJAX завершен в полном объеме. Я оставил alert s на месте, чтобы вы могли возиться с кодом.
Пример выполнения ...
ajax_load_page('?ajax=1&url=mail/sent/','inside','sidebar','sequel-string',id_focus);
Первый параметр является URL AJAX, имейте в виду, вы необходимо иметь единственный элемент, который содержит все для запроса и без пробелов до или после него , Он должен также иметь пространство имен XML ...
<div xmlns="http://www.w3.org/1999/xhtml">AJAX stuffs</div>
Второй параметр принимает строку after, before, inside, replace относительно идентификатора третьего параметра.
Четвертый параметр, который я использую для функции ajax_sequel(), о которой я уже упоминал.
Последний (пятый) параметр - это идентификатор, который я хочу, чтобы браузер дал фокус (если есть).
Строгий код сложный, но когда вы делаете это правильно, вещи просто работают намного проще.
Любые отсутствующие функции можно найти в файле index.js моего сайта, связанного с моим профилем. Вот основная часть того, что вы ищете ...
function ajax_id_duplication_prevention(xml)
{//alert(typeof xml+'\n\n'+xml.childNodes[0].childNodes.length);
var re = true;
if (option.id_fade && option.id_fade!='' && document.getElementById(option.id_fade))
{
element_del(option.id_fade);
option.id_fade = '';
}
if (typeof document.createTreeWalker=='function')
{
var idz = [];
try
{
var walker = document.createTreeWalker(xml,NodeFilter.SHOW_ELEMENT,null,false);
while (walker.nextNode())
{
if (walker.currentNode.id==undefined && walker.currentNode.nodeName=='parsererror') {alert('Error: a parser error was detected.\n\nThis may or may not afflict the content being loaded.\n\nIf the content does not load correctly reload the entire page.');}
else if (walker.currentNode.id==undefined) {alert('walker.currentNode.nodeName = '+walker.currentNode.nodeName+'\n\n'+document.serializeToString(xml));}
else if (walker.currentNode.id!='')
{
var n = document.getElementById(walker.currentNode.id);
if (n)
{
var l = document.getElementById('liquid');
for (var i=0; i<l.childNodes.length; i++)
{
var c = l.childNodes[i];
if (n.compareDocumentPosition(c)==10)
{
element_del(c);
//Do AJAX report to DB table: id error log
break;
}
}
//alert('Error: can not import XML.\n\nAn element with the id \''+walker.currentNode.id+'\' already exists in the target application.');
//re = false;
break;
}
else if (in_array(walker.currentNode.id,idz))
{
alert('Error: can not import XML, the id \''+walker.currentNode.id+'\' was detected twice in the layer being imported.\n\nDuplicated ID\'s break expected functionality and are illegal.\n\nWhile the XML content was not imported it is still possible that the related request was successful.');
re = false;
break;
}
else {idz.push(walker.currentNode.id);}
}
}
}
catch (err) {}//IE9
}
return re;
}
function ajax_load_page(url,id_container_pos,id_container,sequel,id_focus)
{//alert(url+'\n'+id_container_pos+'\n'+id_container+'\n'+sequel+'\n'+id_focus);
if (document.getElementById(id_container) || id_container)
{
if (window.XMLHttpRequest) {var xmlhttp = new XMLHttpRequest();}
else if (window.ActiveXObject) {try {xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {try {xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');} catch (e) {}}}
else {alert('Error: Your browser does not seem to support AJAX.');}
xmlhttp.open('GET',url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState=='4')
{
if (xmlhttp.status=='200' || xmlhttp.status=='401' || xmlhttp.status=='403' || xmlhttp.status=='404' || xmlhttp.status=='501') {ajax_load_page_import(url,xmlhttp,id_container_pos,id_container,sequel,id_focus);}
else if (xmlhttp.status=='404') {alert('HTTP 404: The content was not found.');}
else if (xmlhttp.status=='429') {alert('HTTP 429: You are requesting pages too quickly.');}
else if (xmlhttp.status=='500')
{
if (xmlhttp.getResponseHeader('AJAX-HTTP')==null) {alert('HTTP 500: The server encountered an error.');}
else
{
var http = xmlhttp.getResponseHeader('AJAX-HTTP');
if (http==429) {alert('HTTP 429: You are requesting pages too quickly.');}
else {alert('HTTP '+http);}
}
}
else if (xmlhttp.status=='204' || xmlhttp.status=='0' || xmlhttp.status=='1223' || xmlhttp.status==undefined) {if (id_container=='chat_messages') {ajax_sequel(sequel,id_container);}}
else if (xmlhttp.status!='204' && xmlhttp.status!='0' && xmlhttp.status!='1223') {alert('HTTP '+xmlhttp.status+'\n\nIf you keep encountering this error please contact the webmaster.');}//Opera 204='0' & IE 204='1223'
}
}
}
else {alert('Error: '+id_container+' id does not exist!');}
}
function ajax_load_page_import(url,xmlhttp,id_container_pos,id_container,sequel,id_focus)
{//alert('url = '+url+'\n\nxmlhttp = '+xmlhttp+'\n'+id_container_pos+'\n'+id_container+'\n'+sequel+'\n'+id_focus);
if (!document.getElementById('Body') && xmlhttp.responseXML) {var xmlDoc=xmlhttp.responseXML;}
else {var xmlDoc=xmlhttp.responseText;}
if (!document.ELEMENT_NODE)
{
document.ELEMENT_NODE = 1;
document.ATTRIBUTE_NODE = 2;
document.TEXT_NODE = 3;
document.CDATA_SECTION_NODE = 4;
document.ENTITY_REFERENCE_NODE = 5;
document.ENTITY_NODE = 6;
document.PROCESSING_INSTRUCTION_NODE = 7;
document.COMMENT_NODE = 8;
document.DOCUMENT_NODE = 9;
document.DOCUMENT_TYPE_NODE = 10;
document.DOCUMENT_FRAGMENT_NODE = 11;
document.NOTATION_NODE = 12;
}
document._importNode = function(node,allChildren)
{
switch (node.nodeType)
{
case document.ELEMENT_NODE:
var newNode = document.createElement(node.nodeName);
if (node.attributes && node.attributes.length > 0) {for (var i = 0, il = node.attributes.length; i < il;) {newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i++].nodeName));}}
if (allChildren && node.childNodes && node.childNodes.length > 0) {for (var i = 0, il = node.childNodes.length; i < il;) {newNode.appendChild(document._importNode(node.childNodes[i++], allChildren));}}
return newNode;
break;
case document.TEXT_NODE:
case document.CDATA_SECTION_NODE:
case document.COMMENT_NODE:
return document.createTextNode(node.nodeValue);
break;
}
return true;
}
if (xmlhttp.responseXML)
{
if (ajax_id_duplication_prevention(xmlhttp.responseXML))
{
if (xmlhttp.responseXML.childNodes.length==0) {alert('Error: no elements were found in the AJAX request!\n\n'+url);}
else if (xmlhttp.responseXML.childNodes.length>1) {alert('Error: parse error, AJAX requests can only have a single parent-most element.\n\n'+url+'\n\n'+xmlhttp.responseText);}
else
{
if (document.getElementById(id_container)) {var id_container_obj = document.getElementById(id_container);}
else {var id_container_obj = id_container;}
var id_ajax = xmlhttp.responseXML.childNodes[0].getAttribute('id');
if (id_container=='prompts_ajax') {ajax_layer_init('prompts_ajax',id_ajax);}
if (document.importNode && xmlhttp.responseXML && document.getElementById('body').style.khtmlMarginBottomCollapse==undefined && browser!='MSIE')
{
if (id_container_pos=='after') {id_container_obj.insertBefore(xmlDoc.getElementsByTagName('div')[0],id_container_obj.nextSibling);}
else if (id_container_pos=='before')
{
id_container_obj.parentNode.insertBefore(document.importNode(xmlDoc.getElementsByTagName('div')[0],true),id_container_obj);
}
else if (id_container_pos=='inside') {id_container_obj.appendChild(document.importNode(xmlDoc.getElementsByTagName('div')[0],true));}
else if (id_container_pos=='replace') {var r = id_container_obj.parentNode; r.removeChild(r.getElementsByTagName('div')[0]); r.appendChild(document.importNode(xmlDoc.getElementsByTagName('div')[0],true));}
else {alert('Error: unknown position to import data to: '+id_container_pos);}
}
else if (!document.getElementById('Body') && xmlhttp.responseXML)//IE8+
{
if (typeof xmlDoc.getElementsByTagName('div')[0]=='object')
{
if (id_container_pos=='after') {id_container_obj.parentNode.appendChild(document._importNode(xmlDoc.getElementsByTagName('div')[0],true));}
else if (id_container_pos=='before') {id_container_obj.parentNode.insertBefore(document._importNode(xmlDoc.getElementsByTagName('div')[0],true),id_container_obj);}
else if (id_container_pos=='inside') {id_container_obj.appendChild(document._importNode(xmlDoc.getElementsByTagName('div')[0],true));}
else if (id_container_pos=='replace') {var r = id_container_obj.parentNode; r.removeChild(r.getElementsByTagName('div')[0]); r.appendChild(document._importNode(xmlDoc.getElementsByTagName('div')[0],true));}
else {alert('Error: unknown position to import data to: '+id_container_pos);}
//if (document.getElementById(id_focus)) {document.getElementById(id_focus).focus();}
}
}
else if (document.getElementById('Body') && xmlhttp.responseXML)// IE 5.0~7
{
if (document.getElementById('body').currentStyle.scrollbarBaseColor)
{
//IE 5.5/6/7
var id_imported = xmlhttp.responseXML.childNodes[0].getAttribute('id');
if (!document.getElementById(id_imported))
{
if (id_container_pos=='after') {id_container_obj.parentNode.appendChild(document._importNode(xmlhttp.responseXML.childNodes[0],true));}
else if (id_container_pos=='before') {id_container_obj.parentNode.insertBefore(document._importNode(xmlhttp.responseXML.childNodes[0],true),id_container_obj);}
else if (id_container_pos=='inside') {id_container_obj.appendChild(document._importNode(xmlhttp.responseXML.childNodes[0],true));}
else if (id_container_pos=='replace') {var r = id_container_obj.parentNode.id; id_container_obj.parentNode.removeChild(id_container_obj.parentNode.getElementsByTagName('div')[0]); if (document.getElementById(r)) {document.getElementById(r).appendChild(document._importNode(xmlhttp.responseXML.childNodes[0],true));}}
else {alert('Error: unknown position to import data to: \''+id_container_pos+'\'');}
}
}
var id_ajax = xmlhttp.responseXML.childNodes[0].getAttribute('id');
}
else if (!id_container_obj) {alert('Error: can not add content to the DOM; the id \''+id_container+'\' does not exist or has not been imported to the DOM yet.');}
else {alert('Error: Ajax function did not trigger correctly, try checking content\'s mime?\n\n'+xmlhttp+'\n'+id_container_pos+'\n'+id_container+'\n'+sequel+'\n'+id_focus);}
ajax_sequel(sequel,id_container,id_ajax,id_focus);
}
}
}
else if (xmlhttp.getResponseHeader('Content-Type')=='text/html')
{
if (!option.th || option.th==2)
{
ajax_load_page(url,id_container_pos,id_container,sequel,id_focus);
option.th = 1;
}
else if (confirm('Error: unable to load AJAX content.\n\nType: '+xmlhttp.getResponseHeader('Content-Type')+'\n\nInitiating second attempt at request...\n\n'+xmlhttp.responseText))
{
ajax_load_page(url,id_container_pos,id_container,sequel,id_focus);
}
}
else
{
alert('Error: unable to load AJAX content.\n\nType: '+xmlhttp.getResponseHeader('Content-Type')+'\n\nresponseText = '+xmlhttp.responseText);
}
}
function ajax_sequel(sequel,id_container,id_ajax,id_focus)
{alert('ajax_sequel()\n\nsequel = '+sequel+'\nid_container = '+id_container+'\nid_ajax = '+id_ajax);
}
Попробуйте и посмотрите, где он не работает. – tymeJV
Я сделал это в некоторых браузерах, но я боюсь, что он не работает в более ранних версиях для них или в разных операционных системах. –
Не является ajax расширением JQuery, который является оболочкой для Javascript. Таким образом, сделать титул лишним? –