这种Ajax方法可在许多浏览器和操作系统中使用吗？

Question

我在Javascript中使用Ajax来获取其他页面上的值。

function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}

但恐怕它不适用于某些浏览器甚至操作系统。使用安全吗？还是使用jQuery Ajax更好？

（详细信息：我不想使用jQuery！）

Answer 1

首先尝试使用 真正的 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请求完全完成 后 执行所需的任何操作。我将alerts
留在原处，让您弄乱代码。

执行示例…

ajax_load_page('?ajax=1&url=mail/sent/','inside','sidebar','sequel-string',id_focus);

第一个参数是AJAX URL，请记住，您 必须 具有单个元素，其中包含请求的 所有内容 ，并且在请求之前或之后都没有空格。它必须 也
有一个XML命名空间…

<div xmlns="http://www.w3.org/1999/xhtml">AJAX stuffs</div>

第二参数接受字符串after，before，inside，replace相对于所述第三参数的id。

ajax_sequel()我已经提到的函数使用的第四个参数。

最后一个（第五个）参数是我希望浏览器重点关注的ID（如果有）。

严格的代码很难，但是如果您以正确的方式进行操作，事情就会变得容易得多。

缺少的任何功能都可以在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);
}