[概要] AJAXとJSON

AJAX:同期J avascript A ND X ML」(异步 JavaScriptの和XML)

  • インタラクティブなアプリケーション開発技術
  • 高速ダイナミックテクノロジーのWeb
    のAjaxはページのWebページ全体の技術的な部分をリロードすることなく更新することができます。
  • しかし、ない新しい言語、しかし、いくつかの既存技術の組み合わせ
    の利点:
  • 非同期モードユーザーエクスペリエンスを強化します
  • 最適化前後に不要なデータを減らし、ブラウザとサーバーの直接伝達、帯域幅の消費を削減
  • Ajaxのエンジンクライアントが稼働しているサーバーの負荷軽減
    短所:
  • ブラウザは、リターンキーをサポートしていません。
  • Ajaxのセキュリティ問題は、サーバーとの相互作用の詳細を公開します
  • 検索エンジンのサポートは比較的弱いです

#Ajaxの使い方
一般的に、次の手順を実行する必要が

図1は、XMLHttpRequestオブジェクトを作成するために
、2を新たなHTTPリクエストを作成し、HTTPリクエストは、メソッド、URLを指定する
。3、HTTPリクエストの状態の変化の関数に応答して提供されます


XMLHttpRequestの

  • そして、サーバはブロックせずに、要求、ユーザーに応答することができ
  • あなたはページの後にページがロードされている部分更新することができ
    、そこにパッケージを作成するには、次の互換性のXMLHttpRequestの機能のいずれかを:
function  createXHR() {
            if(typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            }else if (typeof  ActiveXObject){
                var  xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
                var  len = xhrArr.length,xhr;
                for (var i = 0; i < len; i++) {
                    try {
                        xhr = new ActiveXObject(xhrArr[i]);
                        break;
                    }catch (e) {
                        
                    }
                }
                return xhr;
            }else {
                throw new Error('no XHR');
            }
        }
        var  xhr = createXHR();
        console.log(xhr);//输出查看XMLHttpRequest对象

#HTTPリクエストの作成
構文を:オープン(メソッド、URL、非同期 )
HTTPリクエスト、指定された要求の種類を作成し、URL非同期リクエスト処理するかどうか
のパラメータ:

  • 方法:要求のタイプ(GETまたはPOST)
    のみ以下の場合にPOST要求に、より速くよりGET POSTを:
    • あなたは、キャッシュファイルを使用することはできません(サーバー更新上のファイルやデータベースを)
      +送信大量のデータを(POSTデータの量を制限していない)とき
    • 送信し、未知の文字を、ユーザの入力、POSTはGETよりも安定し、より信頼性のあるとき
  • URL:サーバー上のファイルの場所
    など.TXTおよび.xml、サーバーまたはスクリプトファイル、およびなどの.aspなど、サーバー上で提供されるファイルのアドレスを指定する必要があります唯一のパラメータであり、ファイルは、ファイルの任意の型を指定でき、 .PHP(リターン応答する前に、サーバー上でタスクを実行することができます)
  • 非同期:真(非同期)偽(同期)

openメソッドは、初期化要求に相当し、元の与えられているだけで同じプロトコルと、か、セキュリティの同じドメインのポートにURLリクエストを送信するために使用することができます送信する準備ができている実サーバへのリクエスト送信しません
:作成要求の例を
xhr.open("get","./server/slider.json",true);
リクエストを作成する前にあなたは、XMLHttpRequestオブジェクトの状態変化の関数に対応する必要があります

xhr.onreadystatechange = function(){  //在onreadystatechange属性发生变化时触发
            if (xhr.readyState ===4){ //0还没初始化 1send已经执行正在发送请求 2send已经执行完毕了 3表示正在解析响应内容 4异步调用成功,响应内容解析完了,可以在客户端调用了
                if((xhr.status >=200 && xhr.status<300) ||xhr.status ===304){
                    //>=200异步调用成功 304表示请求资源没有发生改变,可以直接调用
                }
            }
        }

XMLHttpRequestのreadyStateのステータスがあります。0-4異なります。
0:リクエスト初期化されていない
1:サーバ接続が確立
要求を受信した:2は
、処理要求:3
4:要求が完了し、そして応答が準備ができています

ステータスは、ステージを表し、

  • 200:「OK」

  • 304は、要求されたリソースが変更されていない表し、あなたは直接呼び出すことができます

  • 404:ページが見つかりません
    #送信要求
    構文:(文字列)を送るには、
    サーバに要求を送信し
    、パラメータ:のみポスト要求のための文字列
    注:POSTリクエストパラメータを渡すことができる場合にのみ、それはNULLを送信する必要がない、sendメソッドを呼び出します要求がサーバーに送信された後、
    xhr.send()

  • URLの後ろに直接使用することができるgetメソッドを使用して要求を作成しますか?パラメータがパスを書き戻され、それ以上は&とに分離することができる
    HTTPヘッダを追加する方法#
    希望POSTのHTTPヘッダデータは、HTMLフォームなど、あなたがsetRequestHeaderを使用する必要がある場合は、追加します()。次いで、所定のsend()メソッドでデータを送信することを望みます

  • 语法:xmlhttp.setRequestHeader(ヘッダ、値)

  • 用途:xmlhttp.setRequestHeader( "コンテンツタイプ」、"ファイルのアプリケーション/ x-www-form-urlencodedで");
    HTTPリクエストの状態の#を設定赤い応答関数

  • サーバプロセスからresponseText--データを返す文字列形式を、評価()を実行することができるJavaScriptコードに文字列を返すことができ

  • responseXML--互換性のあるサーバー・プロセスは、DOM文書データオブジェクトから返します

  • ステータス - 数値コードは、サーバから返されました。404(見つかりません)

  • ステータスコード列情報を伴うText--状況


#JSON

JSONJavaScriptのオブジェクト表記、JSオブジェクト表記b)は、軽量データ交換フォーマットです。それに基づいているのECMAScript格納およびデータを表現するテキスト形式のプログラミング言語の完全に独立して使用して、サブセット(JSによって確立されたヨーロッパのコンピュータ社会規範)。シンプルで明確な階層は、JSONの理想的なデータ交換言語を作ります。読み取りおよび書き込み、だけでなく、マシンを生成し、解析しやすく、かつ効果的にネットワークの伝送効率を向上させる、退屈な置換かさばるXML形式のが簡単です。

JSON構文:
単純な値
JSON値にすることができる:
数(整数または浮動小数点)
(二重引用符で囲まれた)文字列
の論理値(trueまたはfalse)
配列(四角括弧内)
のオブジェクト(ブレース)
NULL

  • 文字列は二重引用符でなければなりません単一引用符を使用しないと、10進数は、使用してはならないとインフィニティはNaN
  • これは、JavaScriptでの未定義の特別な値をサポートしていません。

オブジェクトは、
複合タイプ、で表される基として、データオブジェクトであるキーの順序対、各キーと値のペアは、単純な値であってもよいし、値が複合データ型であってもよい
JSONオブジェクトキーで二重引用符で囲む必要があります JSONはJavaScriptステートメントではありませんので、すべてのセミコロンに終わりはありません、

  • 同じオブジェクトは、同じ名前の属性の2すべきではありません

アレイの
アレイは、複雑なデータ型である、値の順序付けられたリストは、インデックスの数値によってアクセスすることができる基を表します。

  • 値またはオブジェクトの最後のメンバーの後にコンマができない
    #方法
    2つの方法は、JSONオブジェクト

()解析
JSON:構文を。()構文解析
関数を:JSONの変換のためのオブジェクトの文字
文字列化()
構文:JSON.stringify()
関数:JSON形式の文字列に値が減少し、JSON.parse()メソッドすることができます

  • あなたはJSONデータ構造に有用JavaScriptオブジェクトを解析することができますので、JSONはあるとても人気があります
  • 文字列化JSONオブジェクト()及び(パース)、それぞれ、これらの2つの方法は、天然にオブジェクトのJavaScript JSON JSON文字列と文字列解析のJavaScript値をシリアル化するために使用することができます
  • JavaScriptののeval()は()メソッドを.parseに似て、文字列のJSON JSONオブジェクトに変換することができますが、evalの()悪意のあるコードが含まれていてもよいJSON形式を満たしていないコードを実行するには、お勧めできません

AJAXの中#jQuery
構文:

アヤックス$({
1つの要求アドレス
2要求モード
の3つのデータ形式
4つの同期非同期
要求に5つの成功したコールバック要求パラメータデータ
})

例えば:

$.ajax({
            url:"./server/slider.json" //请求地址,
            type:"post", //请求方式
            dataType:"json",  //数据格式
            async:true, //同步异步
            success:function(datas){ //请求成功的回调函数 参数为请求到的数据
                renderData(datas.slider);
            }
        })

#クロスドメインの
元ポリシー:ドメインプロトコルポートは同じです
ソリューション:

  • クロスオリジンリソース共有(CORS)
  • JSONPを使用してください
  • document.domainを変更します。
  • 使用window.name

私はジェーン・ポータルを予約:https://www.jianshu.com/p/dd860120d9cf

おすすめ

転載: blog.csdn.net/index1551/article/details/93000492