Skip to content

Commit 0207052

Browse files
dinanathsj29dinanathsj29
authored
chapter 2.3 and 2.4 uploaded
chapter 2.3 and 2.4 uploaded
1 parent 58975fe commit 0207052

File tree

1 file changed

+150
-0
lines changed

1 file changed

+150
-0
lines changed

‎README.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -332,12 +332,162 @@ There are a bunch of other libraries, methods, and ways to make AJAX calls. Thir
332332
2.3. XMLHttpRequest-loading JSON data
333333
---------------------
334334

335+
> **Syntax & Example**: `2.3-loading-json-data/animals1.json`
336+
337+
```json
338+
[
339+
{
340+
"name": "Meowsy1",
341+
"species": "cat",
342+
"foods": {
343+
"likes": [
344+
"tuna",
345+
"catnip"
346+
],
347+
"dislikes": [
348+
"ham",
349+
"zucchini"
350+
]
351+
}
352+
},
353+
{
354+
"name": "Barky1",
355+
"species": "dog",
356+
"foods": {
357+
"likes": [
358+
"bones",
359+
"carrots"
360+
],
361+
"dislikes": [
362+
"tuna"
363+
]
364+
}
365+
},
366+
{
367+
"name": "Purrpaws1",
368+
"species": "cat",
369+
"foods": {
370+
"likes": [
371+
"mice"
372+
],
373+
"dislikes": [
374+
"cookies"
375+
]
376+
}
377+
}
378+
]
379+
```
380+
381+
<hr/>
382+
383+
> **Syntax & Example**: `2.3-loading-json-data.html`
384+
385+
```html
386+
<!DOCTYPE html>
387+
<html lang="en">
388+
389+
<head>
390+
<meta charset="UTF-8">
391+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
392+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
393+
<title>loading json data</title>
394+
395+
<script type="text/javascript" src="2.3-loading-json-data.js"></script>
396+
397+
</head>
398+
399+
<body>
400+
401+
</body>
402+
403+
</html>
404+
```
405+
406+
<hr/>
407+
408+
> **Syntax & Example**: `2.3-loading-json-data.js`
409+
410+
```js
411+
console.log('2.3-loading-json-data.js loaded');
412+
413+
var xhr = new XMLHttpRequest();
414+
xhr.open('GET','animals1.json');
415+
416+
xhr.onload = function() {
417+
let results = xhr.responseText;
418+
console.log('string type of json:',results);
419+
document.write('<h1>Load JSON data from .json file:</h1>');
420+
document.write(results);
421+
422+
results = JSON.parse(xhr.responseText);
423+
console.log('json object after parsing:',results);
424+
425+
document.write('<h2>Load 0 th animal details:</h2>');
426+
var animal0 = results[0].name;
427+
document.write('Name : ' + animal0);
428+
}
429+
430+
xhr.send();
431+
```
432+
433+
> **Note**: *Its advisable to use local web-server like XAMP, MAMP or node/npm server utilities-packages like serve, http-server, static, local-web-server to avoid any - **CORS policy: Cross-origin requests errors***
434+
335435

336436
2.4. XMLHttpRequest-loading web API data
337437
---------------------
338438

339439
JSON Web API path: https://learnwebcode.github.io/json-example/animals-1.json
340440

441+
> **Syntax & Example**: `1.6.1-employee.json`
442+
443+
```html
444+
<!DOCTYPE html>
445+
<html lang="en">
446+
447+
<head>
448+
<meta charset="UTF-8">
449+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
450+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
451+
<title>loading web api data</title>
452+
453+
<script type="text/javascript" src="2.4-loading-json-web-api-data.js"></script>
454+
455+
</head>
456+
457+
<body>
458+
459+
</body>
460+
461+
</html>
462+
```
463+
464+
<hr/>
465+
466+
> **Syntax & Example**: `2.4-loading-json-web-api-data.js`
467+
468+
```js
469+
console.log('2.4-loading-json-web-api-data.js loaded');
470+
471+
var xhr = new XMLHttpRequest();
472+
xhr.open('GET','https://learnwebcode.github.io/json-example/animals-1.json');
473+
474+
xhr.onload = function() {
475+
let results = xhr.responseText;
476+
console.log('string type of json:',results);
477+
document.write('<h1>Load JSON data from .json file:</h1>');
478+
document.write(results);
479+
480+
results = JSON.parse(xhr.responseText);
481+
console.log('json object after parsing:',results);
482+
483+
document.write('<h2>Load 1 st animal details:</h2>');
484+
var animal1 = results[1].name;
485+
document.write('Name : ' + animal1);
486+
}
487+
488+
xhr.send();
489+
```
490+
341491
2.5. GET vs POST method
342492
---------------------
343493

0 commit comments

Comments
 (0)