我正在创建一个简单的ajax调用,该调用检索指定url的内容并将其写入页面。我遇到的问题是它用此信息替换了整个体内的内容
这是JS:
(function(){ var mb = window.mb = {}; function get_ad(url, parameters){ var result = ""; var http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; for (var i = avers.length -1; i >= 0; i--) { try { http_request = new ActiveXObject(avers[i]); if (http_request){ break; } } catch(e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = function(){ if (http_request.readyState == 4) { if (http_request.status == 200) { gen_output(http_request.responseText); } else { alert('Error'); } } } http_request.open('GET', url + parameters, true); http_request.send(null); } function gen_output(ad_content){ document.write("<div id=\"mb_ad\">"); document.write(ad_content); document.write("</div>"); } get_ad("http://localhost/test/test.html", ""); })();
这是HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> i am text before <br/> <script type="text/javascript" src="mb.js"></script> <br /> i am text after </body> </html>
使用萤火虫进行检查,我看不到<div id="mb_ad">test.html页之前和之后的内容。如果我删除ajax调用,只执行3,document.writes则之前的文本和之后的文本将正确显示。jQuery不是一个选择,我必须在没有大型库帮助的情况下执行此操作,因为大小和速度至关重要。
<div id="mb_ad">
document.writes
document.write文档加载完成后,您将无法使用。如果这样做,浏览器将打开一个新文档,以替换当前文档。
document.write
使用该innerHTML属性将HTML代码放入元素中:
innerHTML
function gen_output(ad_content){ document.getElementById('mb_ad').innerHTML = ad_content; }
将元素放在脚本之前,以确保在调用回调函数时该元素存在:
i am text before <div id="mb_ad"></div> i am text after <script type="text/javascript" src="mb.js"></script>
放置脚本的位置无关紧要,因为不会将任何内容写入到文档中。