片付けるシンプルで汎用的なAjax
4465 ワード
整理が簡単で汎用的なAjax
自分でネット上のコードを研究して、更にいくつかのフレームワークを研究して、例えばdojo、jqueryなどの内容、自分で自分の必要なコードの断片を統合して、どうせ実用を残して、asp、php、netなど、web開発はすべて使うことができます!互換ブラウザ!
ここでajaxの互換性について説明します.
/*=====================================================
ajaxが推奨する使用方法:
各ブラウザの実装方式が異なるため、
Openの3番目のパラメータについて、
ロードされたテキスト(サーバが返すデータ)がjsスクリプトであり、メインプログラムの実行時にjsファイルを動的にロードしたい場合
ieの場合、falseまたはtrueの設定にかかわらず、取得したテキストのロードが完了するまでメインスクリプトの後の文を実行し続けるブロック式です.
Chromeにとって、今から見れば、実装が最も私たちの論理に合っています.falseは、ブロック式が発生し、trueは、メインスクリプトが実行されるまで待ってから実行されます.
FFについてはfalseもtrueも非同期非ブロック式でfalseを設定する場合はコールバック関数が呼び出せない場合がありますので注意してください
==================================
したがって、効果を統一するには、メインスクリプトの実行が完了してから、必要に応じてjsスクリプトをロードするしかありません.
=====================================================*/
最も簡単な運用:
原文:http://www.verydemo.com/demo_c107_i8344.html
自分でネット上のコードを研究して、更にいくつかのフレームワークを研究して、例えばdojo、jqueryなどの内容、自分で自分の必要なコードの断片を統合して、どうせ実用を残して、asp、php、netなど、web開発はすべて使うことができます!互換ブラウザ!
jsManager={};
jsManager.ajax={};
// dojo， XmlRequest
jsManager.ajax._XHR = function() {
var xmlhttp;
try { // Mozilla / Safari / IE7
xmlhttp = new XMLHttpRequest();
} catch(e) { // IE
var XMLHTTP_IDS = new Array(
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'
);
var success = false;
for (var i = 0; i < XMLHTTP_IDS.length && !success; i++) {
if (!success) {
try {
xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
success = true;
break;
} catch(e) {}
}
}
if (!success) {
throw new Error('Unable to create XMLHttpRequest.');
}
}
return xmlhttp;
}
jsManager.ajax.ContentType={
// ，
"default":"application/x-www-form-urlencoded",
"xml":"text/xml"
};
jsManager.ajax.OperWay={
"get":"0",
"post":"1"
};
//url ，
//url
//fn
//OperWay 0- get,1- post
//sendStr post
//textType post ,
jsManager.ajax.AccessUrl=function (url,fn,OperWay,sendStr,textType) {
var oXmlHttp = new jsManager.ajax._XHR();
var operJsFs= function() {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200 || oXmlHttp.statuis == 304) {
var response = oXmlHttp.responseText;
if(fn){
fn(response);
}
}
}
}
oXmlHttp.onreadystatechange = operJsFs;
// url ，
var the_Url=url.split("/");
if(the_Url[the_Url.length-1].indexOf("?")>-1){
url+="&"+new Date().getTime()
}else{
url+="?"+new Date().getTime()
}
if (OperWay) {
var theConType=this.ContentType["default"];
if (this.ContentType[textType]) {
theConType=this.ContentType[textType];
}
oXmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader("Content-Type", theConType);
oXmlHttp.send(sendStr);
}else{
oXmlHttp.open('GET', url, true);
oXmlHttp.send(null);
}
}
//== ==========================================
// ， fn ， , fn, ，
// url, Get , ?...&.... url
jsManager.ajax.CallBack = function(url,fn) {
this.AccessUrl(url,fn);
}
// xml ,
//ajax
jsManager.ajax.sendXML = function(xmlStr,url,fn) {
this.AccessUrl(url,fn,this.OperWay["post"],xmlStr,this.ContentType["xml"]);
}
// json
jsManager.ajax.sendJson = function(jsonStr,url,fn) {
this.AccessUrl(url,fn,this.OperWay["post"],jsonStr);
}
ここでajaxの互換性について説明します.
/*=====================================================
ajaxが推奨する使用方法:
各ブラウザの実装方式が異なるため、
Openの3番目のパラメータについて、
ロードされたテキスト(サーバが返すデータ)がjsスクリプトであり、メインプログラムの実行時にjsファイルを動的にロードしたい場合
ieの場合、falseまたはtrueの設定にかかわらず、取得したテキストのロードが完了するまでメインスクリプトの後の文を実行し続けるブロック式です.
Chromeにとって、今から見れば、実装が最も私たちの論理に合っています.falseは、ブロック式が発生し、trueは、メインスクリプトが実行されるまで待ってから実行されます.
FFについてはfalseもtrueも非同期非ブロック式でfalseを設定する場合はコールバック関数が呼び出せない場合がありますので注意してください
==================================
したがって、効果を統一するには、メインスクリプトの実行が完了してから、必要に応じてjsスクリプトをロードするしかありません.
=====================================================*/
最も簡単な運用:
<html>
<body>
<script src="< >.js">
</script>
<script>
function getWebContent(str){
document.body.innerHTML=str;
}
jsManager.ajax.AccessUrl("http://news.163.com",getWebContent);
</script>
</body>
</html>
原文:http://www.verydemo.com/demo_c107_i8344.html