2

HTMLファイルをdivにロードするための非常に単純なajaxスクリプトがあります。スクリプトは次のようになります。

<head>
<script>
function fetchResults(){
/*$(document).ready(function() {*/
                $('#slideshow').cycle({
                fx: 'fade',
                pager: '#smallnav', 
                pause:   1, 
                speed: 1800,
                timeout:  3500 
            });         
        });
</script>
<script type="text/javascript">

var bustcachevar=1 (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " 
}
}
}

</script>
</head>

上記の HTML ファイルをこの div にきちんとロードします。

 <div id="rss">
<script type="text/javascript">
            ajaxpage('news.html', 'content');   
        </script>
</div>

しかし、これらの HTML ファイルの 1 つで、div に読み込まれない小さな JavaScript がありますが、ページを直接表示すると問題なく読み込まれます。

<script src="http://feeds.feedburner.com/xxx/QFMN?format=sigpro" type="text/javascript" ></script>

ajax の JavaScript に問題があることは知っていますが、回避策があることも知っています。JavaScript の初心者なので、これをどのように機能させるか完全にはわかりません。助言がありますか？

4

2 に答える 2

2

すでにjQueryを使用されているようですが、非同期リクエストを行うにはjQueryのAjaxメソッドを使用してください。すべてのコードを次のようなものに置き換えることができます

$(function () {
    $('#container').html($.get('/some/other/url.html'));
});

リンクの例を次に示します。クリックすると、の内容がdivAJAX 呼び出しの結果に置き換えられます。

<a class="ajaxLink" href="/some/other/url.html">next</a>
<div id="container">
    Hello there
</div>

<script type="text/javascript">
    $(function () {
        $("a.ajaxLink").click(function () {
            $('#container').load($(this).attr('href'));
            return false;
        });
    });
</script>

リンクの属性を巧みに使用しhrefて URL を指定していることに注意してください。クライアントで JavaScript が有効になっていない場合、リンクは通常どおり機能します。

AJAX メソッドに関する JQuery ドキュメントは、貴重な情報源です。読み込まれたページのスクリプトがどのように実行されるかについては、.load() メソッドのドキュメントの「ページ フラグメントの読み込み」と「スクリプトの実行」を参照してください。

(また、jslintまたは同様のサービスを使用すると非常に役立ちます)

于 2013-02-01T22:04:23.287 に答える
0

実際には、

ajax 呼び出しからの Javascript を実行することはできません。eval(result)if resultis pure javascript を実行するか、セレクターのようなものを使用して結果からデータを取得できますjquery。

主な問題は、データを html としてエクスポートするのではなく、JSON または XML でエクスポートする必要があることです。

コードは次のようになります。

$.ajax({
  url: "url",
  type: "GET",
  datatype: "xml",
  cache: false,
  success: function(response) {
    alert($("Result",response).text())
    eval($("Code",response).text())
  }
});

この出力で：

<?xml version='1.0' encoding='UTF-8'?> <Result>Hi</Result> <Code>console.log(1)</Code>

このコードは Hi と警告し、コード console.log(1) を実行します

于 2013-02-01T22:28:51.050 に答える