JavaScriptのJSON与AJAX
JSONは、軽量データ交換フォーマットであり、AJAXメッセージングサービス遠位端の完了と、JSON紙は、天然AJAX書き込み、ソリューションをパッケージ、およびクロスドメインJSONP JSONPユーティリティ関数とAJAXの使用を記載しています
JSONコンセプト
-
すべてのプログラミング言語は、3つのデータ構造から不可分です
スカラースカラー：数値と文字列
シーケンスシーケンス：配列とリスト
マッピングマッピング：値のペア
-
JSON：JavaScriptのオブジェクト表記法、軽量のデータ交換フォーマット
-
JSONデータは、通常のオブジェクトメソッド、または含むようなオブジェクトの配列ではありません
var person = { "name": "jett", "age": "22", "sex": "男" } var persons = [ { "name": "jett", "age": "22", "sex": "男" }, { "name": "lily", "age": "20", "sex": "女" } ]
JSONの基本フォーマット
- キーと値のペアはコロンで分離されています
- キー名は二重引用符を使用するように強制します
- パラレルデータは、カンマで区切られました
- 並列データセット
[]を囲みます
そして、変換JSONオブジェクト
-
JSONオブジェクトは、JSに変換され
JSON.parse（）
<div id='box' data-info='{"name":"Jett","age":"22"}'></div>// JSON.parse(str) str -> object var box = document.getElementById('box'); var jsonData = box.getAttribute('data-info'); var obj = JSON.parse(jsonData); console.log(obj); // {name:"Jett",age:"22"}evalの（）
var obj = eval('('+jsonData+')'); // eval 可以执行任何 JS 代码，所以可以将 jsonData 当作代码执行 // 为安全性考虑，最好使用 JSON.parse() -
JSは、JSONオブジェクトに
JSON.stringify（）
var obj = { name: 'Jett', age: 22, sex: '男' } var jsonData = JSON.stringify(obj); console.log(jsonData); // {"name":"Jett","age":22,"sex":"男"}
AJAXの概念
-
AJAX：非同期JavaScriptとXML、非同期JavaScriptとXML
-
AJAXは、新しいプログラミング言語ではなく、既存の標準を使用するための新しい方法
-
最大の利点は、ページ全体をリロードせずにAJAXでは、ページのコンテンツのサーバと更新パーツとデータを交換することができます
-
AJAXの作品
ブラウザAJAX要求を送信、XMLHttpRequestオブジェクトを作成します
サーバは要求を受信し、応答を作成し、戻りデータ
ブラウザは、データを受信し、動的なレンダリングページ
AJAXの基本的な言葉遣い
-
XMLHttpRequestオブジェクトを作成します。
バックグラウンドでサーバーとデータを交換するためのXMLHttpRequest
IE7以上に対応
var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { // 兼容 IE6/5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } -
AJAX要求送信
GETリクエスト
URLリクエストアドレス、で使用されるアドレス
?のような？名前= Jettの＆年齢= 22スプライシングされたメッセージの内容、xmlhttp.open('GET',url, true); xmlhttp.send();POSTリクエスト
名前=・ジェット＆年齢= 22：メソッドは、次のような受信メッセージの内容を送信します
xmlhttp.open('POST',url, true); // xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 通过 setRequestHeader 设置请求头 xmlhttp.send(data);GETリクエストより速く、あまりPOST以上確保し、送信データサイズが限定されています
3番目のパラメータは、真の非同期、同期代わっを表しfasle
-
リスナーの応答ステータス
XMLHttpRequestオブジェクトは、リスニングのreadyStateを変更するためのreadystatechangeイベントがあります
readyStateのXMLHttpRequestオブジェクトが示す状態AJAXリクエスト
0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪ステータスコードとステータスXMLHttpRequestオブジェクトのhttpリクエスト
200: 请求 404: 未找到页面Readystatachangeモニタイベントと状態を決定
4 xmlhttp.readyState、xmlhttp.status 200は、要求の成功応答と準備を表すとき
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // ... } } -
治療応答
サーバから返されたデータを受信するためのresponseXML responseTextのXMLHttpRequestオブジェクトまたは属性
名前は、XML形式の応答データを受信するため、respnseXMLを示唆するように、responseText一般的なデータを受信します
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { console.log(xmlhttp.responseText); // 获得响应数据并使用 } }
JSONPコンセプト
-
クロスドメインリクエスト
URL =プロトコル名+ホスト名とポート番号+リソース名
ドメイン=プロトコル名+ホスト名とポート番号
セキュリティ上の理由から、宛先アドレスと同じドメイン内のページ要求のドメインが許可されている唯一のアクセス
-
JSONPクロスドメインソリューションであります
現在の方法は、クロスドメインのブラウザの問題を解決するために持っているJSONPは、CORS戦略は、CORS戦略は、HTML5の新機能、サポートしていない可能性が古いブラウザは、JSONPは、最も一般的な治療であります
JSONP原則
-
HTMLタグの数には、いくつかのラベルは、そのようなスクリプトは、IMG、IFRAMEとして、クロスドメイン機能を持っています
-
クロスエリアJSONPのスクリプトタグの能力を動的に要求アドレス指定されたsrcのスクリプトタグを生成しています
ページ内に定義されたメソッド
<scrip type="text/javascript"> funtion test(data) { console.log(data); } </scrip> <!--动态生成的 script 标签--> <script type="text/javascript" src="htpp://localhost:8888"></script>HTPP：// localhostを：8888件の住所データが返されます
test('这是请求返回的数据')得られたスクリプトタグがDOMに追加され、ブラウザは、Src要求先アドレスに応じて、スクリプトタグとして得られた返されるデータは、JSを実行するためのデータコードとして返され、ブラウザは、単に、ページに定義された方法を実行することですパラメータが正常にページにすることができる場所
-
私たちは、そのページ上のことを、サーバーに渡されたURLのクエリ文字列、文字列をステッチサーバーを経由して、その関数名をページ上の関数を定義、関数はJSコードの実行を返し、パラメータのデータが渡されます関数が実行されるように定義され、サーバからデータを受け取った、コールバック関数の実装を成功には、サーバーのデータを処理することができます
JSONPコールバック関数
-
通常のAJAX要求のために我々は成功したコールバックまたはコールバックのエラーを実行するために、その完成までのXMLHttpRequest、裁判官のreadyStateのとステータス要求と応答リスナーイベントをreadystatechangeすることができます
-
基本的にJSONP SRCスクリプトタグは、リクエストを利用することで、応答は次のとおりです。
-
そこにリソースのsrc点であり、そしてこれは、JSのコードの実行が成功の文字列として返された場合
すなわち、ページ内で定義された関数が正常に実行され、データ内の成功したコールバック関数は、パラメータを取得するために処理することができます
-
もし少ないリソースへのアクセスの目的よりもSRCポイント
スクリプトタグは、エラー・イベントをトリガーする、エラー訂正を行うための機会となります。このイベントに耳を傾けます
var script = document.createElement('script'); script.onerror = funtion() { // 执行出错回调函数 } -
SRCを指しているリソースがある場合は、実行されるスクリプトタグ、実装プロセスのミスなので、文字列が返されます
成功したコールバック関数を実行する前に、ロードスクリプトイベントオブジェクトを監視することはlabel属性を有しているかどうか、オブジェクトにラベルを付け、スクリプトタグ属性を追加します
オンロード関数は、scriptタグはその導入後、コード実行のスクリプトタグをロードした後、成功したタグ属性を追加するかどうかを判定し、ハンドラをonloadイベントに応答する実行されるため、タグはスクリプトコードに導入することができるフラグ属性場合、その実行が成功であります、実行エラーコールバックを定義されていません
var script = document.createElement('script'); window.callback = function (res) { script['jsonp'] = 1; // 执行成功回调函数 } script.onload = function () { if (typeof script['jsonp'] === 'undefined') { // 执行出错回调函数 } }
-
IE8とスクリプトタグオブジェクトの下には対応していませんONERROR、onloadイベントをサポートしていませんが、サポートonreadystatechangeに、という注意
readyStateのがロードまたは完全な、すなわち、タグが導入されたコードスクリプトにより、成功したコールバック関数の前にスクリプトオブジェクトとしてタグ属性を追加し、それを実行された、タグがロードされたスクリプトを表しているときにロードされた状態のスクリプトタグへのreadyStateを決定することタグ属性が定義されていない場合、そのスクリプトタグコードに組み込まれるために正常に追加された属性フラグは、正常に実行されたか否かを判定し、誤り訂正を行います
script.onreadystatechange = function () { // 正则表达式判断 readystate 是否为 loaded 或 complete if (/loaded|complete/i.test(this.readyState)) { if (typeof script['jsonp'] === 'undefined') { // 执行出错回调函数 } } }} -
動的に生成された関数名は、オンロードonreadystateの使用は、負荷状態を判定すると、削除機能に対応する、スクリプトタグ終了すると、対応するノードを削除します
自分のパッケージでJSONP機能の動的コールバックはウィンドウ内のオブジェクトとして、我々は機能を追加することができ、SRCは、直接この機能を実行し、データを取得することができ、そのような文字列データのコールバックの戻り値の型（「データ」）としてリソーススクリプトを指定しかし、我々JSONP機能の最適化は、動的に作成削除機能になるでしょうとき、プロパティはIE8で報告されますが、削除ウィンドウをサポートしていない、我々は、Window.prototypeに機能を追加することができ、直接実行することができ、および削除のサポート
JSONPとAJAXパッケージ
-
担体は、リクエストのポスト、JSONP三つの形式、オブジェクトとして渡されたパラメータを取得し、機能パッケージをAJAX
-
構成アイテム
var opt = { type: 'get', url: 'http://...', data: { // 数据使用对象形式 name: 'zzh', age: '21' }, async: true, // 默认 true success: function(res) { }, error: function() { }, timeout: 3000 // 默认 60000 } -
コード
function ajax(option) { // 设置默认参数 var opt = { type: option.type.toUpperCase(), url: option.url, data: option.data || null, async: option.async || false, success: option.success, error: option.error, timeout: option.timeout || 60000 }; // 用于 jsonp 的回调函数名 var callback = 'callback' + new Date().getTime(); var type = opt.type, success = opt.success, error = opt.error, data = parseData(opt.data); // 将 data 对象装换成查询字符串 if (type === 'GET' || type === 'POST') { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { success && success(xhr.responseText, xhr.status); } else { error && error(xhr.status); } } if (type == 'GET') { opt.url += data; data = null; } xhr.open(type, opt.url, opt.async); xhr.send(data); setTimeout(function () { xhr.abort(); console.error(opt.url + '请求超时'); }, opt.timeout); } else if (type === 'JSONP') { var script = document.createElement('script'); script.src = opt.url + data; // 选则存放在 Window 原型上，window 下可以使用 // 如果直接存放在 window 上，IE8 window 属性不支持 dalete Window.prototype[callback] = function (res) { script['jsonp'] = 1; success && success(res); } document.body.appendChild(script); // -[1,] 在 IE8 返回 NaN，IE9 及以上返回 -1 if (-[1,]) { // IE9 及以上支持 onerror // onerror 用于请求失败，未执行 callback // onload 用于请求成功,但执行 callback 出错 script.onerror = script.onload = function () { if (typeof script['jsonp'] === 'undefined') { error && error(); } script.parentNode.removeChild(script); delete Window.prototype[callback]; } } else { // script.onreadystatechange 兼容 IE8 script.onreadystatechange = function () { // -[1,] 在 IE8 返回 NaN，IE9 及以上返回 -1 if (/loaded|complete/i.test(this.readyState)) { if (typeof script['jsonp'] === 'undefined') { error && error(); } script.parentNode.removeChild(script); delete Window.prototype[callback]; } } } } function parseData(data) { var arr = [], str; if (type === 'GET') { str = '?'; } else if (type === 'POST') { str = ''; } else if (type === 'JSONP') { str = '?callback=' + callback + '&'; } for (var k in data) { arr.push(k + '=' + data[k]); } return str + arr.join('&'); } } // 使用示例 ajax({ type: 'jsonp', url: 'http://127.0.0.1:8888/', data: { name: 'jett', age: 22 }, success: function (res) { console.log('接收数据：' + res); }, error: function () { console.log('error() 执行了'); } })