ホームページ > 記事 > ウェブフロントエンド > XMLHttpRequest/ActiveXObjectの同期と非同期ロードの使用例の詳細説明
XMLHttpRequest/ActiveXObjectの同期と非同期ロードの使用例の詳細説明
- 伊谢尔伦オリジナル
- 2017-07-21 15:25:542974ブラウズ
XMLHttpRequest/ActiveXObject の非同期読み込み
同じフォルダーの下に function5.html を作成します。コードは次のとおりです:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
//加载package.js文件，设置script的id为yy
ajaxPage("yy","package.js");
//此方法为package.js里面的方法，此处执行方法成功
functionOne();
}
function ajaxPage(sId,url)
{
var oXmlHttp = getHttpRequest();
oXmlHttp.onreadystatechange = function()
{
//4代表数据发送完毕
if ( oXmlHttp.readyState == 4 )
{
//0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存
if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
{
includeJS(sId,oXmlHttp.responseText);
}
else
{
}
}
}
oXmlHttp.open("GET",url,true);
oXmlHttp.send(null);
}
function getHttpRequest()
{
if(window.ActiveXObject)//IE
{
return new ActiveXObject("MsXml2.XmlHttp");
}
else if(window.XMLHttpRequest)//其他
{
return new XMLHttpRequest();
}
}
function includeJS(sId,source)
{
if((source != null)&&(!document.getElementById(sId)))
{
var myHead = document.getElementsByTagName("HEAD").item(0);
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = sId;
try{
myScript.appendChild(document.createTextNode(source));
}
catch (ex){
myScript.text = source;
}
myHead.appendChild( myScript );
}
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>ActiveXObject は IE でのみ利用可能で、他のほとんどのブラウザーは XMLHttpRequest をサポートしています。このメソッドを通じてスクリプトの動的な読み込みを実現できます。 、ただし、非同期でロードされるため、functionOne を実行できません。2 回目は実行できますが、残念ながら、IE、Firefox、Safari では実行できますが、Opera と Chrome ではエラーが発生します。 Chrome でリリースされました。Opera で実行してもエラーは発生しません。
実際、ここで open を false に設定すると、同期読み込みでは onreadystatechange イベントを設定する必要がなくなります。 XMLHttpRequest/ActiveXObject の同期読み込みここでは、いくつかの状況を考慮して、将来の直接呼び出しを容易にするために、loadJS.js としてカプセル化されたメソッドを作成しました。コードは次のとおりです:/**
* 同步加载js脚本
* @param id 需要设置的<script>标签的id
* @param url js文件的相对路径或绝对路径
* @return {Boolean} 返回是否加载成功，true代表成功，false代表失败
*/
function loadJS(id,url){
var xmlHttp = null;
if(window.ActiveXObject)//IE
{
try {
//IE6以及以后版本中可以使用
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
//IE5.5以及以后版本可以使用
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
{
xmlHttp = new XMLHttpRequest();
}
//采用同步加载
xmlHttp.open("GET",url,false);
//发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
xmlHttp.send(null);
//4代表数据发送完毕
if ( xmlHttp.readyState == 4 )
{
//0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
{
var myHead = document.getElementsByTagName("HEAD").item(0);
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = id;
try{
//IE8以及以下不支持这种方式，需要通过text属性来设置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}
catch (ex){
myScript.text = xmlHttp.responseText;
}
myHead.appendChild( myScript );
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}ブラウザの互換性が考慮されています。 Chrome や Opera の場合は公開する必要があり、今後 js ファイルを読み込む必要がある場合は、loadJS("myJS", " のような 1 つの文だけで済みます)。パッケージ.js」）。便利で実用的です。 以上がXMLHttpRequest/ActiveXObjectの同期と非同期ロードの使用例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。