javascript_javascript スキルでネイティブ Ajax を実装するいくつかの方法の紹介-jsチュートリアル-php.cn

javascript_javascript スキルでネイティブ Ajax を実装するいくつかの方法の紹介

WBOY

リリース： 2016-05-16 17:22:10

オリジナル

1120 人が閲覧しました

JavaScript には jquery などのさまざまなフレームワークがあるため、ajax の使用は非常に簡単になりました。ただし、シンプルさを追求するために、プロジェクトに jquery のような巨大な js プラグインをロードする必要がない場合もあります。しかし、ajax機能を使いたい場合はどうすればよいでしょうか？ JavaScript を使用してネイティブ Ajax を実装するいくつかの方法を紹介します。

ajax を実装する前に XMLHttpRequest オブジェクトを作成する必要があります。オブジェクトを作成したブラウザがサポートしていない場合は、ActiveXObject を作成する必要があります。具体的な方法は次のとおりです。

コードをコピーします。コードは次のとおりです。

 
var xmlHttp; 
function createxmlHttpRequest() { 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft. XMLHTTP"); 
} else if ( window.XMLHttpRequest) { 
xmlHttp=new XMLHttpRequest(); 
} 

(1) 以下は、上で作成した xmlHttp を使用して、最も単純な ajax get リクエストを実装します:

コードをコピーコードは次のとおりです:

 
function doGet (url){ 
// 渡されるパラメータの値に注意してください 文字化けを防ぐためには encodeURI を使用して処理するのが最善です 
createxmlHttpRequest() 
xmlHttp.open("GET",url); ; 
xmlHttp.send(null); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
アラート('success'); 
} else { 
alert('fail'); 
} 
} 
} 

(2) 作成された xmlHttp を使用します上記の最も単純な ajax post リクエストを実装するには:

コードをコピーコードは次のとおりです:

 
 function doPost(url,data){ 
// 文字化けを防ぐために、パラメータ値を渡すときは encodeURI を使用することをお勧めします。 
createxmlHttpRequest(); 
xmlHttp.open("POST") ,url); 
xmlHttp.setRequestHeader("Content-Type","application/x-www -form-urlencoded"); 
xmlHttp.onreadystatechange = function(); { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200) ) { 
alert('success') 
} else { 
alert('fail'); ; 
} 
} 
} 