ajax設計計画-PHP开发-php.cn

ajax設計計画

高洛峰

リリース： 2016-11-30 14:32:12

オリジナル

1316 人が閲覧しました

報告、話したいです！ XPは歴史によって排除されました、IE6はさようなら、私はとても幸せです、私はこれからIE6と互換性がありません。なぜこの sb IE をもっと早く殺さなかったのですか? 就職活動のときに IE との互換性が必要だと聞いたので、すぐに気持ちを和らげました、ああ、ああ、ああ、

報告、話したいです! jQueryはとても豊かです、私はいくつかの機能を使用しました、くそー、それは費用対効果がありません、ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh Ajax設計案を整理するという考え方については、その理由は以下の通りです。

リソースの合理的な利用やWebサイトの最適化の観点から考えると、その少数のフレームワークのためだけに毎回フレームワークを参照するのは費用対効果が高くありません。関数

レベル1とレベル2の仕様を含むw3cのajax設計計画を読んで、突然悟った感覚があります

友人がajaxのクロスドメインソリューションに出会い、心の中で複雑になり、不快に感じます

彼自身のフレームワークの最下層も、ajax 関数の基礎を使用する必要があります (ポストリクエストを取得、レベル 2 アップロードにはまだ使用されていません)

最も重要なことは、私は以前この概念について非常に漠然としていたことです。そこで、私は ajax の設計計画を整理し始めました

いくつかの概念を紹介します:

ブラウザの同一生成元ポリシー: ブラウザの最も基本的なセキュリティ機能同一生成元とは、ドメイン名、プロトコル、およびポートは同じです (つまり、私が書いたインターフェース展開ポートはそれぞれ 1122 と 2211 です。これは、それらが同じ起源のものではなく、クロスドメインであることを意味します)

ajax : CSS/HTML/JavaScript に依存する技術的ソリューションです。中心的な依存関係は、ブラウザによって提供される XMLHttpRequest オブジェクトです。このオブジェクトにより、ブラウザは HTTP リクエストを発行し、HTTP レスポンスを受信できるようになります。

XMLHttpRequest レベル 1 には主に次の欠点があります:

同一生成元ポリシーによって制限され、クロスドメインリクエストを送信できません。

バイナリファイル (写真、ビデオ、オーディオなど) を送信できません。プレーンテキストデータのみを送信できます ;

データの送信と取得のプロセスでは、進捗情報をリアルタイムで取得することはできず、完了したかどうかを判断することしかできません

XMLHttpRequest レベル 2 には次の機能が追加されました。

サーバー側で許可されているクロスドメインリクエストを送信できます

バイナリデータの送受信をサポートします

フォームデータの送信をサポートするために formData オブジェクトを追加しました

送信および取得時に進行状況情報を取得できます。データ;

リクエストのタイムアウトを設定できます。

XMLHttpRequest 互換性は次のとおりです:

nginx: 高性能の HTTP およびリバースプロキシサーバーです。

IIS: Microsoft によって開発されたサーバーです。ウィンドウシステムには付属しています

ajax設計計画

次のように準備を開始します:

純粋なフロントエンドコード

nginx リバースプロキシサーバー (フロントエンドとバックエンドの分離用)

バックエンド 2 ソケット (ポート: 1122、ポート: 2211) PS: 1 つのコピーはクロスドメイン要求をサポートする必要があります

IIS サーバー (デプロイメントバックエンドインターフェイス)

chrome プラグイン postman (インターフェイステスト)

IE、chrome、firefox、Opera、safari、edge 6 つの主要ブラウザ、実行互換性テスト

XMLHttpRequest 送信リクエストの手順:

XMLHttpRequest オブジェクトをインスタンス化します (IE8-9 は Microsoft (' Microsoft によってカプセル化された ActiveXObject です。インスタンスの send メソッドを呼び出して http/https リクエストを送信します)

サーバーコールバック、クライアントはそれを受け取り、応答処理を行います

コードの要点は次のとおりです:

//创建xhr对象
    var xhr = createXhrObject();

    //针对某些特定版本的mozillar浏览器的BUG进行修正
    xhr.overrideMimeType?(xhr.overrideMimeType("text/javascript")):(null);

    //针对IE8的xhr做处理 PS：ie8下的xhr无xhr.onload事件，所以这里做判断
    xhr.onload===undefined?(xhr.xhr_ie8=true):(xhr.xhr_ie8=false);

    //参数处理（get和post）,包括xhr.open     get:拼接好url再open   post:先open，再设置其他参数
    ajaxSetting.data === ""?(null):(xhr = dealWithParam(ajaxSetting,this,xhr));

    //设置超时时间（只有异步请求才有超时时间）
    ajaxParam.async?(xhr.timeout = ajaxSetting.time):(null);

    //设置http协议的头部
    each(ajaxSetting.requestHeader,function(item,index){xhr.setRequestHeader(index,item)});

    //判断并设置跨域头部信息
    (ajaxSetting.crossDomain)?(xhr = addCoreHeader(xhr,ajaxSetting)):(null);

    //onload事件（IE8下没有该事件）
    xhr.onload = function(e) {
        if(this.status == 200||this.status == 304){
            ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText));
        }else{
            /*
             *  这边为了兼容IE8、9的问题，以及请求完成而造成的其他错误，比如404等
             *   如果跨域请求在IE8、9下跨域失败不走onerror方法
             *       其他支持了Level 2 的版本 直接走onerror
             * */
            ajaxSetting.error(e.currentTarget.status, e.currentTarget.statusText);
        }
    };

    //xmlhttprequest每次变化一个状态所监控的事件（可拓展）
    xhr.onreadystatechange = function(){
        switch(xhr.readyState){
            case 1://打开
                //do something
                break;
            case 2://获取header
                //do something
                break;
            case 3://请求
                //do something
                break;
            case 4://完成
                //在ie8下面，无xhr的onload事件，只能放在此处处理回调结果
                xhr.xhr_ie8?((xhr.status == 200 || xhr.status == 304)?(ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText))):(null)):(null);
                break;
        };
    };

    //ontimeout超时事件
    xhr.ontimeout = function(e){
        ajaxSetting.timeout(999,e?(e.type):("timeout"));   //IE8 没有e参数
        xhr.abort();  //关闭请求
    };

    //错误事件，直接ajax失败，而不走onload事件
    xhr.onerror = function(e){
        ajaxSetting.error();
    };

    xhr.send((function(result){this.postParam == undefined?(result =null):(result=this.postParam);return result;})(this.postParam));

ログイン後にコピー

テストコードは次のとおりです:

フロントエンドの同一オリジンテストコード

ajax.post("/api/ajax1/ajaxT1/",{"name":"测试异步post请求","age":"success"},function(data){alert(data)});  //该接口在1122上

ログイン後にコピー

フロントエンドのクロスドメインテストコード

ajax.post_cross("http://192.168.0.3:2211/api/weixin/ajaxT2/",{"name":"测试跨域post请求","age":"success"},function(data){alert(data)});

ログイン後にコピー

バックエンドのクロスドメインインターフェースコード

/// <summary>
   /// 测试跨域请求
   /// </summary>
   /// <param name="module"></param>
   /// <returns></returns>
   [Route("ajaxT2")]
   public String kuaAjaxT2([FromBody]TModule module)
   {
       String result = "跨域post传输成功："+module.name+"-"+module.age;
       return result;
   }

ログイン後にコピー

バックエンドの同一オリジンインターフェースコード

/// <summary>
/// 测试ajax同源请求
/// </summary>
/// <param qwer="code"></param>
/// <returns>result</returns>
[Route("ajaxT2")]
public String GetkuaAjaxT1(string name,string age)
{
    String result = "1J跨域成功:" + name + "-" + age;
    return result;
}

ログイン後にコピー

以下はさまざまなテストです。ブラウザ結果 (同一オリジン投稿リクエストとクロスドメイン投稿リクエストのみが提供されます):

元のテスト:

chrome

IE8-9

IE10+

ajax設計計画