Ajax の長所と短所は何ですか? ajaxの正しい使い方

寻∝梦
リリース: 2018-09-10 16:06:38
オリジナル
2453 人が閲覧しました

この記事では主にカプセル化ajaxの導入と、ajaxの非同期リクエストについて説明します

Ajax

ajaxと言えば、ajaxとは何でしょうか? Ajax は、インタラクティブな Web アプリケーションを作成するためのテクノロジーです。

ajax の応用シナリオには以下が含まれます: (マップ) リアルタイム更新、フォーム検証など' ' は - サーバー側の圧力の欠点: 1. ブラウザーの前後方向の動作が破壊されます。メカニズム (AJAX 自動更新メカニズムのため)

2. より多くの AJAX リクエストが発生し、ページの読み込みが遅くなります。 ️検索エンジンのサポートは比較的低いです。 4.AJAX のセキュリティ問題は良くありません (データ暗号化を使用できます)。

まず、ajaxを使用するにはバックエンド環境(サーバー側)のサポートが必要です。

HTTP リクエスト HTTP リクエストには 2 つの方法があります


GET: データの取得に使用され、GET は URL 上でデータ (URL の背後にあるもの) を渡しますが、ストレージが少なく、セキュリティ係数も低くなります。

POST: データのアップロードに使用されます。POST のセキュリティは一般に (GET) よりも優れており、容量はほぼ無制限です (主にフォームに使用されます)。

Ajax の使用

ajax を使用するには 4 つのステップがあります: 1. ajax を作成する、2. サーバーに接続する、3. リクエストを送信する、4. 戻り値を受け入れる。

AJAX を作成するには、互換性処理を考慮する必要があります。IE6 以降: New XMLHTTPRequest ()、IE6: New Activexobject ("Microsoft.xmlhttt")

xhr.open ("リクエストメソッド (GET/POST)、URL パス、「非同期/同期」)。

3 番目のパラメータ: true===》非同期、false===》同期。 (詳細をご覧になりたい場合は、PHP中国のWebサイト
Ajax開発マニュアルcollueを学習してください) 、「非同期/同期」)。


request メソッドが POST の場合、リクエストは xhr.send(request data) として送信されます。また、post を使用する場合は、POST (リクエスト データ) を使用するときの戻り値に

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}
ログイン後にコピー

を追加する必要があります

Ajax は、リクエストが送信されたときにイベント ReadyStateChange インシデントを使用します。サーバー、私たちはサーバーに送信されます、私たちはサーバーに送信されます、私たちはいくつかの応答ベースの操作を実行する必要があります。

readystatechange が変化すると、このイベントの実行がトリガーされます。

        readyState:请求的状态,返回的是状态码(0 - 4):0(未初始化)open还没有调用、1(载入)已经调用了send()正在发送请求、2(载入完成)send方法已经完成  已经收到了全部的响应内容、3(解析)正在解析响应内容、4(完成)响应内容解析完成  可以在客户端用了。

        responseText:返回请求的内容。

        status:返回请求的结果码:返回200(成功)、返回404(未找到)、返回5**(5开头)(服务器错误)

        封装Ajax

        在封装ajax的时候会使用到参数传递,因此必须写个方法作为对象属性转换为ajax请求数据的方法

        下面是ajax封装,并举例:

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
}

ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步:false,异步:true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})
ログイン後にコピー

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

以上がAjax の長所と短所は何ですか? ajaxの正しい使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート