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

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'); ;
}
}
}