2

我在 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！）

4

1 回答 1

3

首先对尝试使用真正的JavaScript 进行投票表示赞成！

其次，您可能不知道，但您将代码视为文本，而不是代码。不使用innerHTML也不使用responseText。您需要使用适当的 DOM 方法，例如使用 AJAX appendChild，insertBefore但您需要专门使用. 您从服务器加载的 XML必须为，mime无效。importNoderesponseXMLapplication/xmltext/xml

我网站上的代码适用于较旧的浏览器（例如 IE5/6，如果您此时如此疯狂）。我一直想清理这个。而且它是可重用的，所以你不需要继续创建新的 AJAX 函数ajax_post()，除非你访问我的网站并查看index.js文件，欢迎你搞砸它。

Super-Bonus：该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>

第二个参数接受相对于第三个参数的 id 的字符串after, before, 。insidereplace

我用于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);
}
于 2013-09-24T18:00:36.540 回答