Դուք, անշուշտ, երբևէ լսել եք JSON-ի մասին: Ի՞նչ է դա։ Ի՞նչ կարող է դա անել և ինչպես օգտագործել այն:

Այս ձեռնարկում մենք կանդրադառնանք JSON-ի հիմունքներին և կներառենք հետևյալ կետերը.

• Ի՞նչ է JSON-ը:
• Ինչի համար է օգտագործվում JSON-ը:
• Ինչպե՞ս ստեղծել JSON տող:
• JSON տողի պարզ օրինակ:
• Եկեք համեմատենք JSON-ը և XML-ը:
• Ինչպե՞ս աշխատել JSON-ի հետ JavaScript-ում և PHP-ում:

Ի՞նչ է JSON-ը:

JSON-ը կառուցվածքային տվյալներ պահելու և փոխանցելու պարզ, տեքստի վրա հիմնված միջոց է: Պարզ շարահյուսությամբ դուք կարող եք հեշտությամբ պահել որևէ բան՝ մեկ թվից մինչև տողեր, զանգվածներ և առարկաներ պարզ տեքստում: Դուք կարող եք նաև միավորել զանգվածներն ու օբյեկտները՝ տվյալների բարդ կառուցվածքներ ստեղծելու համար:

Երբ JSON տողը ստեղծվի, հեշտ է այն ուղարկել այլ հավելված կամ ցանցի մեկ այլ վայր, քանի որ այն պարզ տեքստ է:

JSON-ն ունի հետևյալ առավելությունները.

• Այն կոմպակտ է:
• Նրա նախադասությունները հեշտ է կարդալ և կազմել ինչպես մարդկանց, այնպես էլ համակարգիչների կողմից:
• Այն կարող է հեշտությամբ փոխակերպվել տվյալների կառուցվածքի ծրագրավորման լեզուների մեծ մասի համար (թվեր, տողեր, բուլյաններ, զանգվածներ և այլն)
• Ծրագրավորման շատ լեզուներ ունեն գործառույթներ և գրադարաններ JSON կառուցվածքներ կարդալու և ստեղծելու համար:

JSON անունը նշանակում է JavaScript Object Notation: Ինչպես անունն է հուշում, այն հիմնված է օբյեկտների (ինչպես այլ լեզուներով ասոցիատիվ զանգվածների ստեղծման) և զանգվածների սահմանման եղանակի վրա:

Ինչի համար է օգտագործվում JSON-ը:

JSON-ի ամենատարածված օգտագործումը սերվերից բրաուզեր ուղարկելն է: Որպես կանոն, JSON տվյալները առաքվում են AJAX-ի միջոցով, որը թույլ է տալիս զննարկիչին և սերվերին հաղորդակցվել առանց էջը վերաբեռնելու:

Օգտագործողը կտտացնում է առցանց խանութի ապրանքի մանրապատկերի վրա:

Բրաուզերի վրա աշխատող JavaScript-ը առաջացնում է AJAX հարցում սերվերում աշխատող PHP սկրիպտին՝ անցնելով ընտրված արտադրանքի ID-ն:

PHP սկրիպտը տվյալների բազայից ստանում է ապրանքի անվանումը, նկարագրությունը, գինը և այլ տեղեկություններ: Այնուհետև այն տվյալներից կազմում է JSON տող և այն ուղարկում զննարկիչին:

Բրաուզերի վրա աշխատող JavaScript-ը ստանում է JSON տողը, վերծանում է այն և օգտատիրոջ համար ցուցադրում ապրանքի մասին տեղեկատվությունը էջում:

Կարող եք նաև օգտագործել JSON-ը՝ զննարկիչից տվյալներ սերվեր ուղարկելու համար՝ փոխանցելով JSON տողը որպես պարամետր GET կամ POST հարցումներին: Բայց այս մեթոդը ավելի քիչ տարածված է, քանի որ տվյալների փոխանցումը AJAX հարցումների միջոցով կարող է պարզեցվել: Օրինակ, ապրանքի ID-ն կարող է ներառվել URL-ում որպես GET հարցումի մաս:

jQuery գրադարանն ունի մի քանի մեթոդներ, ինչպիսիք են՝ getJSON() և parseJSON(), որոնք հեշտացնում են JSON-ի միջոցով տվյալների առբերումը AJAX հարցումների միջոցով:

Ինչպե՞ս ստեղծել JSON տող:

Կան մի քանի հիմնական կանոններ JSON տող ստեղծելու համար.

• JSON տողը պարունակում է կամ արժեքների զանգված կամ օբյեկտ (անուն/արժեք զույգերի ասոցիատիվ զանգված):
• Զանգվածփակցված է քառակուսի փակագծերում ([ և ]) և պարունակում է ստորակետերով բաժանված արժեքների ցանկ:
• Օբյեկտփակցված է գանգուր փակագծերում (( և )) և պարունակում է անուն/արժեք զույգերի ստորակետերով բաժանված ցուցակ:
• անուն/արժեք զույգբաղկացած է դաշտի անվանումից, որը փակցված է կրկնակի չակերտներով, որին հաջորդում է երկու կետ (:) և դաշտի արժեքը:
• Իմաստըզանգվածում կամ օբյեկտում կարող են լինել.
  • Թիվ (ամբողջ կամ լողացող կետ)
  • Տող (կրկնակի չակերտներով)
  • Բուլյան արժեք (ճշմարիտ կամ սխալ)
  • Մեկ այլ զանգված (փակված է քառակուսի փակագծերում)
  • Մեկ այլ առարկա (փակված գանգուր ամրագոտիներով)
  • զրոյական արժեք

Տողի մեջ կրկնակի չակերտներ ներառելու համար հարկավոր է օգտագործել հետշեղը՝ \": Ինչպես ծրագրավորման շատ լեզուների դեպքում, դուք կարող եք տողի մեջ տեղադրել կառավարման նիշերը և վեցանկյուն կոդերը՝ դրանցից առաջ անցնելով հետշեղով: Մանրամասների համար տես JSON-ի կայքը:

Պարզ JSON լարային օրինակ

Ստորև բերված է JSON ձևաչափով պատվիրելու օրինակ.

( «orderID»: 12345, «shopperName»: «Vanya Ivanov», «shopperEmail»: [էլփոստը պաշտպանված է]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], «պատվերն ավարտված է»: ճշմարիտ )

Եկեք մանրամասն նայենք տողին.

• Մենք ստեղծում ենք օբյեկտ՝ օգտագործելով գանգուր փակագծեր (( և )):
• Օբյեկտն ունի մի քանի անուն/արժեք զույգ՝ «orderID»: 12345 «orderId» անունով հատկություն և 12345 «shopperName» ամբողջ արժեքով. «Vanya Ivanov» սեփականություն «shopperName» անունով և լարային արժեքով «Vanya Ivanov»: " "shopperEmail": " [էլփոստը պաշտպանված է]« «shopperEmail» անունով հատկություն՝ տողային արժեքով» [էլփոստը պաշտպանված է]« «բովանդակություն».
• «Բովանդակություն» զանգվածում կա 2 առարկա, որոնք ներկայացնում են պատվերի առանձին տարրեր: Յուրաքանչյուր օբյեկտ պարունակում է 3 հատկություն՝ productID, productName և քանակություն:

Ի դեպ, քանի որ JSON-ը հիմնված է JavaScript օբյեկտների հայտարարագրման վրա, դուք կարող եք արագ և հեշտությամբ վերը նշված JSON տողը դարձնել JavaScript օբյեկտ.

var cart = ( «պատվերի ID»: 12345, «shopperName»: «Վանյա Իվանով», «shopperEmail»: [էլփոստը պաշտպանված է]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": true);

JSON-ի և XML-ի համեմատություն

Շատ առումներով դուք կարող եք JSON-ի մասին մտածել որպես XML-ի այլընտրանք, գոնե վեբ հավելվածների տարածքում: AJAX հայեցակարգն ի սկզբանե հիմնված էր XML-ի օգտագործման վրա՝ սերվերի և բրաուզերի միջև տվյալները փոխանցելու համար: Սակայն վերջին տարիներին JSON-ն ավելի ու ավելի տարածված է դարձել AJAX տվյալների փոխադրման համար:

Թեև XML-ը ապացուցված տեխնոլոգիա է, որն օգտագործվում է բավականին մեծ թվով հավելվածներում, JSON-ն ունի առավել կոմպակտ և ավելի հեշտ ճանաչելի տվյալների ձևաչափ լինելու առավելությունը:

Ահա թե ինչ տեսք կունենա վերը նշված օրինակի օբյեկտը XML-ում.

պատվերի ID 12345 գնորդի անունը Վանյա Իվանով գնորդ Էլփոստ [էլփոստը պաշտպանված է]բովանդակություն productID 34 productName Super արտադրանքի քանակություն 1 productID 56 productName Miracle ապրանքի քանակություն 3 պատվեր Ավարտված է ճիշտ

XML տարբերակը զգալիորեն ավելի մեծ է: Իրականում այն ​​1128 նիշ է, մինչդեռ JSON տարբերակը ընդամենը 323 նիշ է: XML տարբերակը նույնպես բավականին դժվար է հասկանալ:

Իհարկե, սա արմատական ​​օրինակ է։ Եվ հնարավոր է ստեղծել ավելի կոմպակտ XML գրառում: Բայց նույնիսկ այն զգալիորեն ավելի երկար կլինի, քան JSON-ի համարժեքը:

JavaScript-ում JSON տողի հետ աշխատելը

JSON-ն ունի պարզ ձևաչափ, բայց ձեռքով JSON տող ստեղծելը բավականին հոգնեցուցիչ է: Բացի այդ, դուք հաճախ պետք է վերցնեք JSON տող, փոխարկեք դրա բովանդակությունը փոփոխականի, որը կարող է օգտագործվել կոդում:

Ծրագրավորման լեզուներից շատերն ունեն գործիքներ՝ փոփոխականները JSON տողերի հեշտությամբ փոխարկելու համար և հակառակը:

Փոփոխականից JSON տողի ստեղծում

JavaScript-ն ունի ներկառուցված JSON.stringify() մեթոդ, որը վերցնում է փոփոխական և վերադարձնում JSON տող, որը ներկայացնում է դրա բովանդակությունը: Օրինակ, եկեք ստեղծենք JavaScript օբյեկտ, որը պարունակում է մեր օրինակի պատվերի մասին տեղեկությունները, և դրանից հետո ստեղծենք JSON տող.

var cart = ( «պատվերի ID»: 12345, «shopperName»: «Վանյա Իվանով», «shopperEmail»: [էլփոստը պաշտպանված է]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": true (JSON.stringify(cart));

Այս կոդը կստեղծի.

Նկատի ունեցեք, որ JSON.stringify() մեթոդը վերադարձնում է JSON տող առանց բացատների: Այն ավելի դժվար է կարդալ, բայց ավելի կոմպակտ է ցանցի միջոցով փոխանցելու համար:

JavaScript-ում JSON տողը վերլուծելու մի քանի եղանակ կա, բայց ամենաապահովն ու հուսալին ներկառուցված JSON.parse() մեթոդի օգտագործումն է: Այն ստանում է JSON տող և վերադարձնում JavaScript օբյեկտ կամ զանգված, որը պարունակում է տվյալներ: Օրինակ:

var jsonString = " \ ( \ "orderID": 12345, \ "shopperName": "Vanya Ivanov", \ "shopperEmail": " [էլփոստը պաշտպանված է]", \ "բովանդակություն": [ \ ( \ "productID": 34, \ "productName": "Super product", \ "quant": 1 \), \ ( \ "productID": 56, \ "productName": "Հրաշք ապրանքներ", \"քանակ"՝ 3\ ) \ ], \"պատվերը Ավարտված է"՝ ճշմարիտ \ ) \"; var cart = JSON.parse (jsonString); զգուշացում (cart.shopperEmail); զգուշացում (cart.contents.productName);

Մենք ստեղծեցինք jsonString փոփոխական, որը պարունակում է մեր օրինակի կարգի JSON տողը: Այնուհետև մենք փոխանցում ենք այս տողը JSON.parse() մեթոդին, որը ստեղծում է JSON տվյալներ պարունակող օբյեկտ և պահում այն ​​զամբյուղի փոփոխականում: Մնում է միայն ստուգել՝ ցուցադրելով shopperEmail օբյեկտի հատկությունները և բովանդակության զանգվածի productName:

Արդյունքում մենք կստանանք հետևյալ արդյունքը.

Իրական հավելվածում ձեր JavaScript կոդը կստանա պատվերը որպես JSON տող AJAX պատասխանում սերվերի սկրիպտից, տողը կփոխանցի JSON.parse() մեթոդին և այնուհետև օգտագործի տվյալները՝ այն օգտագործողի էջում ցուցադրելու համար:

JSON.stringify()-ը և JSON.parse()-ն ունեն այլ հնարավորություններ, օրինակ՝ հետադարձ կապի գործառույթների օգտագործումը որոշակի տվյալներ անհատական ​​փոխակերպելու համար: Նման տարբերակները շատ օգտակար են տարբեր տվյալներ ճիշտ JavaScript օբյեկտների փոխակերպելու համար:

PHP-ում JSON տողի հետ աշխատելը

PHP-ն, ինչպես JavaScript-ը, ունի ներկառուցված գործառույթներ JSON տողերի հետ աշխատելու համար։

PHP փոփոխականից JSON տողի ստեղծում

json_encode() ֆունկցիան վերցնում է PHP փոփոխական և վերադարձնում JSON տող, որը ներկայացնում է փոփոխականի բովանդակությունը։ Ահա մեր պատվերի օրինակը՝ գրված PHP-ով.

Այս կոդը վերադարձնում է ճիշտ նույն JSON տողը, ինչ JavaScript-ի օրինակում.

(" orderID":12345,"shopperName":"Vanya Ivanov","shopperEmail":" [էլփոստը պաշտպանված է]","contents":[("productID":34,"productName":"Super product","quantity":1),("productID":56,"productName":"Miracle product","quantity": 3)]"պատվերն ավարտված է":true)

Իրական հավելվածում ձեր PHP սկրիպտը կուղարկի այս JSON տողը որպես AJAX պատասխանի մաս դիտարկիչին, որտեղ JavaScript կոդը, օգտագործելով JSON.parse() մեթոդը, այն նորից կվերլուծի փոփոխականի՝ օգտվողի էջում ցուցադրելու համար: .

Դուք կարող եք տարբեր դրոշներ փոխանցել որպես երկրորդ արգումենտ json_encode() ֆունկցիային: Նրանց օգնությամբ դուք կարող եք փոխել փոփոխականների բովանդակությունը JSON տողի կոդավորման սկզբունքները։

Ստեղծեք փոփոխական JSON տողից

JSON տողը PHP փոփոխականի փոխարկելու համար օգտագործեք json_decode() մեթոդը։ Եկեք փոխարինենք JavaScript-ի մեր օրինակը JSON.parse() մեթոդով PHP կոդով.

Ինչպես JavaScript-ի դեպքում, այս կոդը կստեղծի.

[էլփոստը պաշտպանված է]Հրաշք արտադրանք

Լռելյայնորեն, json_decode() ֆունկցիան վերադարձնում է JSON օբյեկտները որպես PHP օբյեկտներ: Կան stdClass դասի ընդհանուր PHP օբյեկտներ։ Ահա թե ինչու մենք օգտագործում ենք -> վերը նշված օրինակում գտնվող օբյեկտի հատկություններին մուտք գործելու համար:

Եթե ​​Ձեզ անհրաժեշտ է JSON օբյեկտ՝ որպես հարակից PHP զանգված, դուք պետք է փոխանցեք true որպես երկրորդ արգումենտ json_decode() ֆունկցիային: Օրինակ:

$cart = json_decode ($jsonString, true); echo $cart["shopperEmail"] . «
"; echo $cart["contents"]["productName"] ։
";

Այս կոդը կստեղծի նույն արդյունքը.

[էլփոստը պաշտպանված է]Հրաշք արտադրանք

Դուք կարող եք նաև այլ արգումենտներ փոխանցել json_decode() ֆունկցիաին՝ նշելու ռեկուրսիայի խորությունը և մեծ ամբողջ թվերի հետ աշխատելու եղանակը:

Եզրակացություն

Թեև JSON-ը հեշտ է հասկանալ և օգտագործել, այն շատ օգտակար և ճկուն գործիք է հավելվածների և համակարգիչների միջև տվյալների փոխանցման համար, հատկապես AJAX-ի օգտագործման դեպքում: Եթե ​​դուք նախատեսում եք մշակել AJAX հավելված, ապա կասկած չկա, որ JSON-ը կդառնա ձեր սեմինարի հիմնական գործիքը:

JSON (JavaScript Object Notation) տվյալների փոխանակման պարզ ձևաչափ է, որը հեշտ է կարդալ և գրել ինչպես մարդկանց, այնպես էլ համակարգիչների կողմից: Այն հիմնված է JavaScript ծրագրավորման լեզվի ենթաբազմության վրա, որը սահմանված է ECMA-262 3rd Edition - December 1999 ստանդարտում: JSON-ը տեքստային ձևաչափ է, որը լիովին անկախ է իրականացման լեզվից, բայց այն օգտագործում է C-ի նման լեզուների ծրագրավորողներին ծանոթ պայմանագրեր, ինչպիսիք են C, C++, C#, Java, JavaScript, Perl, Python և շատ ուրիշներ: Այս հատկությունները JSON-ին դարձնում են տվյալների փոխանակման իդեալական լեզու:

JSON-ը հիմնված է տվյալների երկու կառուցվածքի վրա.

• Բանալի/արժեք զույգերի հավաքածու: Տարբեր լեզուներով այս հայեցակարգն իրականացվում է որպես առարկա, գրառում, կառուցվածք, բառարան, հեշ, անվանացուցակ կամ ասոցիատիվ զանգված։
• Արժեքների պատվիրված ցանկ: Լեզուների մեծ մասում սա իրականացվում է այսպես զանգված, վեկտոր, ցուցակ կամ հաջորդականություն:

Սրանք ունիվերսալ տվյալների կառուցվածքներ են: Գրեթե բոլոր ժամանակակից ծրագրավորման լեզուները որոշակի ձևով աջակցում են դրանք: Տրամաբանական է ենթադրել, որ ծրագրավորման լեզվից անկախ տվյալների ձևաչափը պետք է հիմնված լինի այս կառուցվածքների վրա։

JSON նշումով այն ունի հետևյալ տեսքը.

Օբյեկտ- բանալի/արժեք զույգերի չպատվիրված հավաքածու: Օբյեկտը սկսվում է ( բացվող գանգուր ամրացմամբ և ավարտվում է ) փակող գանգուր ամրացմամբ: Յուրաքանչյուր անվանը հաջորդում է՝ երկու կետ, ստորակետով բաժանված բանալին/արժեք զույգ:

Զանգված- պատվիրված արժեքների հավաքածու: Զանգվածը սկսվում է [ բաց քառակուսի փակագծով և ավարտվում ] փակվող քառակուսի փակագծով։ Արժեքները բաժանվում են ստորակետով:

ԻմաստըՄիգուցե տողկրկնակի չակերտներով, թիվ, ճշմարիտ , կեղծ , զրոյական , օբյեկտկամ զանգված. Այս կառույցները կարող են լինել բույն:

ԳիծՅունիկոդի զրոյական կամ ավելի նիշերի հավաքածու է, որը փակցված է կրկնակի չակերտների մեջ՝ օգտագործելով \ backslash-ը որպես փախուստի նշան: Նիշը ներկայացված է որպես մեկ նիշանոց տող: Նմանատիպ շարահյուսություն օգտագործվում է C-ում և Java-ում:

ԹիվԱյն ներկայացված է այնպես, ինչպես C-ում կամ Java-ում, բացառությամբ, որ օգտագործվում է միայն տասնորդական թվային համակարգը:

Բացատները կարող են օգտագործվել ցանկացած նշանի միջև:

Բացառելով որոշ կոդավորման մանրամասներ՝ վերը նշվածն ամբողջությամբ նկարագրում է լեզուն։

JavaScript Object Notation (JSON) ստանդարտ տեքստային ձևաչափ է՝ JavaScript օբյեկտի շարահյուսության վրա հիմնված կառուցվածքային տվյալներ ներկայացնելու համար: Այն սովորաբար օգտագործվում է վեբ հավելվածներում տվյալների փոխանցման համար (օրինակ՝ որոշ տվյալներ սերվերից հաճախորդին ուղարկելու համար, որպեսզի դրանք կարողանան ցուցադրվել վեբ էջում կամ հակառակը): Դուք բավականին հաճախ կհանդիպեք դրան, ուստի այս հոդվածում մենք ձեզ տալիս ենք այն ամենը, ինչ ձեզ անհրաժեշտ է JavaScript-ի միջոցով JSON-ի հետ աշխատելու համար, ներառյալ JSON-ի վերլուծությունը, որպեսզի կարողանաք մուտք գործել դրա ներսում գտնվող տվյալները և ստեղծել JSON:

Ոչ, իսկապես, ինչ է JSON-ը:

Մենք պատրաստվում ենք բեռնել այն մեր էջ և օգտագործել որոշ կոկիկ DOM մանիպուլյացիա՝ այն մատուցելու համար, այսպես.

Ստացվում է JSON

JSON-ը ստանալու համար մենք կօգտագործենք API, որը կոչվում է XMLHttpRequest (հաճախ կոչվում է XHR): Սա շատ օգտակար JavaScript օբյեկտ է, որը թույլ է տալիս մեզ կատարել ցանցային հարցումներ՝ JavaScript-ի միջոցով սերվերից ռեսուրսներ ստանալու համար (օրինակ՝ պատկերներ, տեքստ, JSON, նույնիսկ HTML հատվածներ), ինչը նշանակում է, որ մենք կարող ենք թարմացնել բովանդակության փոքր հատվածները՝ առանց ամբողջ էջը վերաբեռնելու: . Սա հանգեցրել է ավելի պատասխանատու վեբ էջերի և հուզիչ է թվում, բայց, ցավոք, այս հոդվածի շրջանակներից դուրս է այն շատ ավելի մանրամասն սովորեցնելը:

Սկսենք նրանից, որ մենք պատրաստվում ենք պահպանել JSON URL-ը, որը ցանկանում ենք ստանալ փոփոխականում: Ավելացրեք հետևյալ JavaScript կոդը՝ var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

Հարցում ստեղծելու համար մենք պետք է ստեղծենք նոր հարցման օբյեկտի օրինակ XMLHttpRequest կոնստրուկտորից՝ օգտագործելով նոր հիմնաբառը: Որպես վերջին տող ավելացրեք հետևյալը. var request = new XMLHttpRequest();

Այժմ մենք պետք է բացենք նոր հարցում՝ օգտագործելով . Ավելացնել հետևյալ տողը. request.open("GET", requestURL);

Սա պահանջում է առնվազն երկու պարամետր. կան այլ պարամետրեր: Այս պարզ օրինակի համար մեզ անհրաժեշտ է ընդամենը երկուսը.

• Ցանցային հարցում կատարելիս օգտագործելու HTTP մեթոդը: Այս դեպքը լավ է, քանի որ մենք պարզապես մի քանի պարզ տվյալներ ենք առբերում:
• Հարցման URL-ը JSON ֆայլի URL-ն է, որը մենք նախկինում պահել ենք:

Այնուհետև ավելացրեք հետևյալ երկու տողերը. Այստեղ մենք սահմանում ենք JSON-ը, որպեսզի XHR-ն իմանա, որ սերվերը կվերադարձնի JSON, և որ այն պետք է փոխարկվի կուլիսներում JavaScript օբյեկտի: Այնուհետև մենք հարցումն ուղարկում ենք՝ օգտագործելով մեթոդը՝ request.responseType = "json"; request.send();

Այս բաժնի վերջին բիթը ներառում է սերվերից վերադարձի պատասխանի սպասելը և այն մշակելը: Ձեր նախորդ կոդի տակ ավելացրեք հետևյալ կոդը՝ request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )

Այստեղ մենք պահում ենք մեր հարցման պատասխանը (հասանելի է սեփականության մեջ) superHeroes փոփոխականում; այս փոփոխականն այժմ կպարունակի JSON-ի վրա հիմնված JavaScript օբյեկտ: Այնուհետև մենք փոխանցում ենք այս օբյեկտը երկու ֆունկցիայի կանչի. առաջինը այն կհամալրի ճիշտ տվյալներով, իսկ երկրորդը կստեղծի տեղեկատվական քարտ թիմի յուրաքանչյուր հերոսի համար և կտեղադրի այն:

Մենք ծածկել ենք կոդը իրադարձությունների մշակման մեջ, որը գործարկվում է, երբ բեռնման իրադարձությունը գործարկվում է հարցման օբյեկտի վրա (տես) - սա պայմանավորված է նրանով, որ բեռնման իրադարձությունը գործարկվում է, երբ պատասխանը հաջողությամբ վերադարձվում է. այսպես անելը երաշխավորում է, որ request.response-ն անպայման հասանելի կլինի, երբ մենք փորձենք ինչ-որ բան անել դրա դեմ:

Վերնագրի լրացում

Այժմ մենք հանել ենք JSON-ի տվյալները և այն վերածել JavaScript-ի օբյեկտի, եկեք օգտագործենք դրանք՝ գրելով վերևում մեր կապած երկու ֆունկցիաները: Նախ, նախորդ կոդի տակ ավելացրեք հետևյալ գործառույթի սահմանումը.

populateHeader(jsonObj) ( var myH1 = document.createElement ("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement ("p"); myPara: textContent = "Հայտնի քաղաք. " + jsonObj["homeTown"] + " // Ձևավորվել է՝ " + jsonObj["formed"];

Մենք պարամետրը անվանեցինք jsonObj՝ հիշեցնելու, որ այս JavaScript օբյեկտը ծագել է JSON-ից: Այստեղ մենք նախ ստեղծում ենք տարր -ով, այն հավասարեցնում ենք օբյեկտի squadName հատկությանը, այնուհետև այն ավելացնում ենք վերնագրի մեջ: Այնուհետև մենք կատարում ենք շատ նմանատիպ գործողություն պարբերության հետ. մենք ստեղծում ենք այն, սահմանում ենք դրա տեքստի բովանդակությունը և այն ավելացնում վերնագրում: Միակ տարբերությունն այն է, որ դրա տեքստը նշված է որպես միացված տող, որը պարունակում է օբյեկտի և՛ homeTown, և՛ ձևավորված հատկությունները:

Հերոսի տեղեկատվական քարտերի ստեղծում

Այնուհետև ավելացրեք հետևյալ գործառույթը կոդի ներքևում, որը ստեղծում և ցուցադրում է սուպերհերոսի քարտերը.

ShowHeroes(jsonObj) ֆունկցիան ( var heroes = jsonObj[«անդամներ»]; համար (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

Նախ, եկեք JavaScript օբյեկտի անդամների հատկությունը պահենք նոր փոփոխականում: Այս զանգվածը պարունակում է մի քանի օբյեկտներ, որոնք պարունակում են տեղեկատվություն յուրաքանչյուր հերոսի համար:

Այնուհետև մենք օգտագործում ենք զանգվածի յուրաքանչյուր օբյեկտի միջով անցում կատարելու համար: Նրանցից յուրաքանչյուրի համար մենք.

Մենք ստեղծում ենք մի քանի նոր տարրեր՝ , , երեք

ԵՎ

.
• Սահմանեք, որ պարունակի ներկայիս հերոսի անունը:
• Լրացրե՛ք երեք պարբերություն՝ նշելով ձեր գաղտնի Ինքնությունը, տարիքը և մի տող, որտեղ գրված է «Գերուժեր.
• Մենք պահում ենք powers հատկությունը մեկ այլ նոր փոփոխականում, որը կոչվում է superPowers. սա պարունակում է զանգված, որը թվարկում է ներկայիս հերոսի գերհզորությունները:
• Մենք օգտագործում ենք մեկ այլ օղակ՝ ներկայիս հերոսի գերհզորությունների միջով անցնելու համար. նրանցից յուրաքանչյուրի համար մենք ստեղծում ենք տարր:
• , դրեք դրա մեջ գերհզորությունները, ապա դրեք listItem-ը տարրի ներսում
  (myList) օգտագործելով appendChild() .
  • Վերջին բանը, որ մենք անում ենք, ավելացնում ենք.

    ԵՎ

    ներսում (myArticle) և այնուհետև ավելացրեք այն . Կարևոր է իրերի ավելացման հերթականությունը, քանի որ դրանք HTML-ում հայտնվելու կարգն են:

    Նշում: Եթե ​​դուք դժվարանում եք հետևել կետի/փակագծին, որը մենք օգտագործում ենք JavaScript-ի օբյեկտ մուտք գործելու համար, դա կարող է օգնել բացել superheroes.json ֆայլը մեկ այլ ներդիրում կամ տեքստային խմբագրիչում և անդրադառնալ դրան, երբ դիտեք մեր JavaScript-ը: Կետերի և փակագծերի նշումների մասին լրացուցիչ տեղեկությունների համար կարող եք նաև անդրադառնալ մեր հոդվածին:

    Փոխակերպում առարկաների և տեքստի միջև

    Վերոհիշյալ օրինակը պարզ էր JavaScript օբյեկտ մուտք գործելու առումով, քանի որ մենք նշել ենք XHR հարցում՝ JSON պատասխանն ուղղակիորեն JavaScript օբյեկտի փոխակերպելու համար՝ օգտագործելով .

    Այս հոդվածում ես ուզում եմ խոսել տեքստային տվյալների փոխանակման ձևաչափի մասին՝ JSON, և մասնավորապես PHP-ում այս ձևաչափով աշխատելու մասին։

    JSON-ը տեքստային տվյալների կոմպակտ ձևաչափ է: Այն կարող է օգտագործվել ինչպես ինտերնետ տվյալների փոխանցման ծառայություններում, այնպես էլ տեղեկատվությունը կառուցվածքային ձևով պահելու համար:

    JSON ( Անգլերեն JavaScript օբյեկտի նշում) տեքստի վրա հիմնված տվյալների փոխանակման ձևաչափ է՝ հիմնված JavaScript-ի վրա և սովորաբար օգտագործվում է այս լեզվով: Ինչպես շատ այլ տեքստային ձևաչափեր, JSON-ը հեշտ է կարդալ մարդկանց կողմից:

    Չնայած իր ծագմանը JavaScript-ից (ավելի ճիշտ՝ 1999 թվականի ECMA-262 ստանդարտի լեզվի ենթաբազմությունից), ձևաչափը համարվում է անկախ լեզվից և կարող է օգտագործվել գրեթե ցանկացած ծրագրավորման լեզվով: Շատ լեզուների համար կա JSON ձևաչափով տվյալների ստեղծման և մշակման պատրաստի կոդ:

    JSON-ի օգտագործման գործնական օգուտները բացահայտվում են AJAX տեխնոլոգիան օգտագործելիս: JSON ձևաչափն ավելի հակիրճ և ընթեռնելի է, քան XML-ը և բնիկ է Javascript-ի համար: Բացի այդ, JSON կոդի մեջ հնարավոր է տեղադրել լիովին ֆունկցիոնալ գործառույթներ:

    Այո, հենց AJAX տեխնոլոգիայի մեջ է, իմ կարծիքով, դրա հիմնական կիրառությունն է։ Քանի որ AJAX տեխնոլոգիան ներառում է հաճախորդի հարցումը սերվերին ուղարկելը: Հաջորդը, հարցումը մշակվում է սերվերի վրա, և արդյունքը ուղարկվում է ի պատասխան հաճախորդին:

    Տվյալների տեսակը JSON ձևաչափով

    JSON-ն աջակցում է տվյալների բոլոր հիմնական ձևաչափերին՝ տողեր, թվեր, բուլյաններ, ինչպես նաև զանգվածներ և առարկաներ (բանալին:արժեք համակցություններ, որոնք բաժանված են ստորակետերով և փակված գանգուր փակագծերով):

    Ահա JSON ձևաչափով տվյալների ներկայացման օրինակ.

    («id»։

    Տեսնենք, թե ինչ կարող է փոխանցել այս տողը. «ivan» անունով անձը, «1» նույնացուցիչի տակ, որը բնակվում է «Ռուսաստանում» երկրում, աշխատում է «yandex» ընկերությունում՝ «կառավարման» բաժնում:

    Բերենք ևս մեկ օրինակ. Կայքն ունի AJAX տեխնոլոգիայի օգտագործմամբ հետադարձ կապի ձև: Այցելուն լրացնում է տեղեկատվությունը, այնուհետև այն ուղարկվում է սերվեր՝ ստուգման համար, եթե սխալներ չեն հայտնաբերվել, տեղեկատվությունը պահվում է տվյալների բազայում և ուղարկվում է պատասխան՝ նշելով հաջող պահպանումը. Բայց եթե սխալներ են հայտնաբերվել, պատասխան է վերադարձվում սխալի տեսակներով:

    Սխալի պատասխանի օրինակ JSON ձևաչափով.

    ("սխալ":"1", "սխալի կոդը":["empty_pers", "empty_mail", "empty_phone", "empty_letter", "empty_scode"])

    Ինչը, օրինակ, նշանակում է.

    • Դուք պետք է լրացնեք «Կոնտակտային անձ» դաշտը
    • Դուք պետք է լրացնեք «E-mail» դաշտը
    • Դուք պետք է լրացնեք «Հեռախոս» դաշտը
    • Մուտքագրեք հաղորդագրության տեքստը
    • Անհրաժեշտ է լրացնել «Թիվը նկարում» դաշտը.

    Եթե ​​սխալներ չկան, պատասխանը վերադարձվում է.

    («սխալ»: «0»)

    Ինչը ցույց է տալիս տվյալների հաջող ուղարկումը:

    PHP-ում JSON ընդլայնումն օգտագործվում է JSON ձևաչափով տվյալները ներկայացնելու համար: 5.2.0-ից ավելի հին PHP տարբերակներում JSON-ի աջակցությունը ներկառուցված է ավելի վաղ տարբերակներում, դուք պետք է ձեր սկրիպտում ներառեք գործառույթներով լրացուցիչ ֆայլ:

    Այսպիսով, PHP-ում JSON ձևաչափով տվյալների հետ աշխատելու համար պատասխանատու են երկու գործառույթ՝ json_encode() և json_decode():

    Տվյալների փոխակերպում JSON ձևաչափի $json_data = զանգված ("id"=>1,"name"=>"ivan", "country"=>"Russia", "office"=>array("yandex","management") ); echo json_encode ($json_data); JSON ձևաչափից տվյալների հակադարձ փոխարկում $json_string="("id":1,"name":"ivan","country":"Russia","office":["yandex","management"]) "; $obj=json_decode ($json_string);

    Այժմ $obj-ը կպարունակի JSON տվյալներ՝ թարգմանված PHP օբյեկտի մեջ, որը կարող եք մուտք գործել հետևյալ կերպ.

    Echo $obj->name; //Ցուցադրում է անունը ivan echo $obj->office; //Ցուցադրել yandex ընկերությունը

    Ինչպես տեսնում եք, $obj->office-ը զանգված է:

    Foreach ($obj->office as $val) echo $val;

    JSON-ի հետ աշխատելը թույլ է տալիս տվյալների փոխանակում սերվերի հետ «մաքուր ձև». Կարիք չկա ուղարկել HTML կոդի ծավալուն կտորներ:

    JSON ձևաչափի հետ աշխատելու համար JavaScript-ն ունի գլոբալ JSON օբյեկտ: JSON օբյեկտն ունի երկու մեթոդ՝ stringify() և parse(): Բացի այս երկու մեթոդներից, այն չի պարունակում որևէ լրացուցիչ ֆունկցիոնալություն:

    stringify() մեթոդը

    Stringify() մեթոդը փոխակերպում է JavaScript-ի արժեքը JSON տողի:

    Փոխակերպման առանձնահատկությունները.

    • Փոխակերպման ժամանակ հանդիպող չսահմանված արժեքը, ֆունկցիան կամ խորհրդանիշը կամ կբացակայվի (եթե գտնվի օբյեկտում), կամ կվերածվի զրոյականի (եթե հայտնաբերվել է զանգվածում):
    • Նախատիպի անդամները և չհամարվող հատկությունները անտեսվում են:
    Շարահյուսություն JSON.stringify(արժեք[, փոխարինող[, տարածություն]]) Պարամետրերի արժեքը Արժեքը, որը պետք է փոխարկվի JSON տողի: փոխարինող (ըստ ցանկության) Պարամետրի արժեքը կարող է լինել ֆունկցիա, զանգված կամ զրոյական:
    • Զանգվածը սահմանում է օբյեկտի հատկությունների մի շարք, որոնք կներառվեն JSON տողում: Զանգվածի արժեքները տողեր են, որոնք համապատասխանում են փոխակերպվող օբյեկտի հատկությունների անուններին:
    • Ֆունկցիան թույլ է տալիս փոխարինել օբյեկտի հատկությունների արժեքները JSON տողում: Ֆունկցիան պետք է պարունակի երկու պարամետր՝ գույքի անվանումը և գույքի արժեքը: Գույքի անվանումը տող է: Ֆունկցիան պետք է վերադարձնի գույքի նոր արժեքը:
    • Եթե ​​պարամետրի արժեքը null է, ապա JSON տողը կներառի օբյեկտի բոլոր հատկությունները:
    բացատ (ըստ ցանկության) JSON տողն ավելի ընթեռնելի է դարձնում՝ ավելացնելով ներքևի յուրաքանչյուր մակարդակի համար: Պարամետրի արժեքը կարող է լինել տող կամ թիվ:
    • Թիվը ցույց է տալիս յուրաքանչյուր բույնի մակարդակի համար օգտագործվող բացատների քանակը: Բնադրման յուրաքանչյուր հաջորդ մակարդակը լրացվում է նոր անցքերով: Օրինակ, եթե թիվ 2-ն օգտագործվում է որպես պարամետրի արժեք, ապա առաջին բնադրման մակարդակում նահանջը կլինի երկու բացատ, հաջորդ բնադրման մակարդակում նահանջը կլինի 4 բացատ և այլն: Բացատների առավելագույն քանակը, որը կարելի է նշել: 10-ն է: Եթե նշեք ավելի մեծ թիվ, այն ինքնաբերաբար կնվազի մինչև 10:
    • Տողում նշվում է բնադրման յուրաքանչյուր մակարդակի համար օգտագործվող նիշը: Տողի երկարությունը սահմանափակվում է 10 նիշով. Տող օգտագործելը նաև թույլ է տալիս օգտագործել ներդիրը («\t») որպես ներքև: Բնադրման յուրաքանչյուր հաջորդ մակարդակը լրացվում է ներքևման նոր նիշերով: Օրինակ, եթե - (գծիկ) նշանը նշված է որպես պարամետրի արժեք, ապա առաջին տեղակայման մակարդակում մեկ գծիկ կօգտագործվի որպես նահանջ, հաջորդ բույնի մակարդակում՝ 2 գծիկ և այլն։
    Վերադարձի արժեքը

    JSON տող.

    Օրինակ let person = ( անուն՝ «Գոմեր», տարիք՝ 40, աշխատանք՝ ( տեղ՝ «Ատոմակայան», գտնվելու վայրը՝ «Springfield» ) ) // Օրինակ մեկ պարամետրով console.log(JSON.stringify(person)); // "("անուն":"Հոմեր","տարիք":40,"աշխատանք":("տեղ":"Ատոմային կայան","տեղակայում":"Springfield"))" // Օրինակ երկու պարամետրով (զանգված ) console.log (JSON.stringify (անձ, ["անուն", "տարիքը"])); // "("անուն":"Գոմեր","տարիք":40)" // Օրինակ երկու պարամետրով (ֆունկցիա) console.log(JSON.stringify(անձ, ֆունկցիա (բանալին, արժեք) (փոխանջատիչ (բանալին) ) (գործը «անուն»՝ վերադարձ «Բարտ», գործ «տարիքը»՝ վերադարձ 10; դեպք «աշխատանք»՝ վերադարձ չսահմանված; // "("name":"Bart",""age":10)" // Օրինակ երեք պարամետրերով console.log(JSON.stringify(person, null, 2)); /* ( * «անուն»՝ «Հոմեր», * «տարիք»՝ 40, * «աշխատանք»: ( * «տեղ»՝ «Ատոմային կայան», * «գտնվելու վայրը»: «Սփրինգֆիլդ» * ) * ) */ Մեթոդ. վերլուծել ()

    Parse() մեթոդը փոխակերպում է JSON տողը համապատասխան JavaScript արժեքի։

    Փոխակերպման առանձնահատկությունները.

    • Եթե ​​փոխակերպման ժամանակ JSON տողում չսահմանված արժեք հայտնաբերվի, այն կբացակայվի (արդյունքում ներառված չէ):
    Շարահյուսություն JSON.parse(text[, reviver]) Պարամետրեր տեքստի JSON տողը, որը կվերլուծվի համապատասխան JavaScript արժեքի մեջ: reviver (ըստ ցանկության) Պարամետրի արժեքը պետք է լինի ֆունկցիա: Ֆունկցիան թույլ է տալիս փոխարինել JSON տողային հատկության արժեքը՝ նախքան այն վերադարձնելը: Ֆունկցիան պետք է պարունակի երկու պարամետր՝ գույքի անվանումը և գույքի արժեքը: Գույքի անվանումը տող է: Ֆունկցիան պետք է վերադարձնի գույքի նոր արժեքը: Վերադարձի արժեքը

    Համապատասխան JavaScript արժեքը (պարզունակ արժեք, օբյեկտ կամ զանգված):

    Օրինակ JSON.parse("()"); // () JSON.parse ("true"); // true JSON.parse(""); // JSON.parse ("null"); // դատարկ