Fsr170823 :- ajax| json | api

Q.s 1 :- From the following API fetch user’s data such as id, email, username, password, city, street, zipcode. Given API :- https://fakestoreapi.com/users

Q.s 2 :- Explain Ajax & Json
Q.s 3 :- Write different ready states of a request in AJAX.
Q.s 4 :- Write 4 HTTP status code and it’s meaning.

1 Like

Question 2) Explain Ajax & Json
Ans: JSON stands for JavaScript Object Notation. It is lightweight and used for storing and transporting data. AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is used for accessing web servers from a web page.

Question 3)Write different ready states of a request in AJAX.
Ans: 0: Request not initialized
1: Server connection established
2: request received
3: Processing Request
4: Request completed and response ready

Question 4)Write 4 HTTP status codes and it’s meaning.
Ans: 200: OK
204: No Content
400: Bad request
404: Not Found
500: Internal Server Error

1 Like

2.AJAX: Asynchronous javascript And XML ,It is used for accessing web servers from a web page.
Json : javascript object notation, used for storing and transporting data.
3.
0: request not initialize
1.Server connection establish
2.request recieve
3. request completed and response ready
4.
200: OK
204: No Content
400: Bad request
404: Not Found
500: Internal Server Error

1 Like

2 Ans: Ajax: Ajax is a set of web development techniques that allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.

JSON (JavaScript Object Notation): JSON is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate.

3 Ans:-
0: Request not initialized
1:Server connection established
2: Request Received
3: Processing Request
4: Request completed and response are ready

4 Ans:

  1. 404 Not Found:

This status code indicates that the server could not find the requested resource. It is used when a client requests a URL that does not exist on the server.

  1. 500 Internal Server Error:

This status code indicates that there was an unexpected condition on the server, and the server could not fulfill the request.

  1. 400 Bad Request:

This status code is returned when the server cannot process the request due to a client error, jus like invalid request message.

  1. 403 Forbidden:

The server understood the request, but it refuses to authorize it.

1 Like
  • AJAX

AJAX is a technique that allows browsers to make non-blocking network calls to servers. AJAX messages are entirely dynamic and don’t have any specific structure.

  • JSON

JSON is a format for structuring data. JSON messages are maintained by one well-defined object structure.

3 >> The readyState values are:

  • 0 The request is not initialized.
  • 1 The request has been set up.
  • 2 The request has been sent.
  • 3 The request is in process.
  • 4 The request is complete.
  1. 4-HTTP status code and its meaning
  • 502 Bad Gateway
  • 503 Service Unavailable
  • 417 Expectation Failed
  • 308 Permanent Redirect
1 Like

Ans:-AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is used for accessing web servers from a web page.JSON stands for JavaScript Object Notation. It is lightweight and used for storing and transporting data.

Ans:- 0- Request not initialized
1- Server connection established
2- request received
3- Processing Request
4- Request completed and response ready

Ans- 200-Ok
500- Internal Server Error
501 -Not Implemented
502- Bad Gateway.

1 Like

Question 2) Explain Ajax & Json
Ans: AJAX and JSON are commonly used together to create dynamic and responsive web applications.
AJAX allows developers to send and receive data from the server.AJAX stands for Asynchronous JavaScript And XML.
JSON is a lightweight data-interchange format that is easy to read and write.JSON stands for javascript object notation.

Question 3)Write different ready states of a request in AJAX.
Ans:0) The request is not initialized

  1. The request has been set up
  2. The request has been sent
  3. The request is in process
  4. The request is complete

Question 4)Write 4 HTTP status codes and it’s meaning.
Ans:1) 431 Request Header Fields Too Large.
2) 451 Unavailable For Legal Reasons.
3) 500 Internal Server Error.
4) 501 Not Implemented.
5) 502 Bad Gateway.

1 Like

Q.2–>Ajax is Asynchronous javaScript and XML,it is not a technology but it is a set of development technologies uses ajex to access and retrive the data from web server to web applications.
ajex allow web pages to change content dynamically without need to r
load entire page.
JSON is a java script object notation.is a standared text based format for representing structure data based on javascript object syntax.it is used to transformming data server to client or showing on web page.

Q3–>In javascript 5 different ready status of an ajex request–
0:unset-request not initialized
1:opened-connection is established
2: headers received -request received
3:l done-Request completed and response ready.

Q4–>HTTP status code
1.400-- bad request
2.404–not found
3.200–ok
4.202–Accepted
5.201–created
408–request time out

1 Like

JSON stands for JavaScript Object Notation. It is lightweight and used for storing and transporting data. AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is used for accessing web servers from a web page.
3.0 reuest not initialised
1.server conncetion
2.request accept
requested completed and response ready
4. 200 response ok
204 no contrenbt
400 bad request
500 internal server error

1 Like

Q2.AJAX stands for Asynchronous Javascript and XML
AJAX allows developers to send and receive data from the server asynchronously without requiring a page reload
JSON stands for Javascript Object Notation
Json is a lightweight data interchange format that is easy to read and write.

Q3.There are 4 ready states
a)the request has been set up
b)the request has been sent
c)the request is in process
d)the request is complete

Q4.200:-OK
304:- Not modified
400:- Bad request
501:- Not implemented

JS

var users = () => {
    document.getElementById('loader').style.display = 'block';
    var a = new XMLHttpRequest();
    a.open('GET', 'https://fakestoreapi.com/users', true);
    a.send();
    a.onreadystatechange = () => {
        if (a.status == 200 && a.readyState == 4) {
            var userData = a.responseText;
            userData = JSON.parse(userData);
            // console.log(userData);
            for (var i of userData) {
                var divTag = document.createElement('div');
                var street = document.createElement('p');
                var city = document.createElement('p');
                var id = document.createElement('p');
                var email = document.createElement('p');
                var userName = document.createElement('p');
                var password = document.createElement('p');
                divTag.className = 'boxStyle';
                for (var j in i) {
                    // console.log(i[j])
                    if (j == 'address') {
                        for (var k in i[j]) {
                            if (k == 'street') {
                                street.innerHTML = k + " : " + i[j][k];
                            }
                            if (k == 'city') {
                                city.innerHTML = k + " : " + i[j][k];
                            }
                        }
                    }
                    else {
                        if (j == 'id') {
                            id.innerHTML = j + " : " + i[j];
                        }
                        if (j == 'email') {
                            email.innerHTML = j + " : " + i[j];
                        }
                        if (j == 'username') {
                            userName.innerHTML = j + " : " + i[j];
                        }
                        if (j == 'password') {
                            password.innerHTML = j + " : " + i[j];
                        }
                    }
                    divTag.appendChild(id);
                    divTag.appendChild(email);
                    divTag.appendChild(userName);
                    divTag.appendChild(password);
                    divTag.appendChild(street);
                    divTag.appendChild(city);
                }
                document.getElementById('mainSection').appendChild(divTag);
            }
        }
        else {
            document.getElementById('loader').style.display = 'none';
        }
    }
}

users();

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mainSection {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .boxStyle {
            width: 300px;
            margin: 10px;
            padding: 10px;
            border: 1px solid blue;
            background-color: lightblue;
            border-radius: 15px;
            text-align: center;
        }

        #loader {
            display: block;
            margin: auto;
        }
    </style>
</head>

<body>
    <img src="https://www.icegif.com/wp-content/uploads/2023/07/icegif-1262.gif" id="loader" alt="Loading...">
    <section id="mainSection">

    </section>

    <script src="2.js" type="text/JavaScript"></script>
</body>

</html>

1 Like

@shashankgowdar02 You’re doing a fantastic job :slight_smile: Keep it up.

1 Like

2:AJAX:Asynchronous JavaScript and XML -AJAX is not a programming language.
It is a technique for accessing web servers from a webpage.
JSON-JavaScript Object Notation-JSON is a light weight data and it is in text-format.

  1. 0-Requested
    1-Connection
    2-Request Received
    3-Processing
    4-ReadyState

4.200-OK
204-NO CONTENT
404-ERROR
500-INTERNAL SERVER ERROR

Sol1. `

Document
<style>
    #mainbox {
        width: 100%;
        height: auto;
        border: 2px solid black;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .box_styling {
        text-align: center;
        width: 300px;
        border: 3px solid darkblue;
        padding: 20px;
        margin: 20px;
    }
</style>
<section id="mainbox">
</section>
<script src="./task.js"></script>
`
var read_ajax = () => {
  var a = new XMLHttpRequest();
  a.open("GET", "https://fakestoreapi.com/users", true);
  a.send();
  a.onreadystatechange = () => {
    if (a.status == 200 && a.readyState == 4) {
      //   console.log(a.responseText);
      var to_object = JSON.parse(a.responseText);
      //   console.log(to_object);
      for (var i of to_object) {
        console.log(i);
        var div_tag = document.createElement("div");
        div_tag.className = "box_styling";
        for (var j in i) {
          if (j == "id" || j == "email" || j == "username" || j == "password") {
            div_tag.innerHTML += j + ":" + i[j] + "<br>";
          }
          if (j == "address") {
            for (var k in i[j]) {
              if (k == "street" || k == "zipcode" || k == "city") {
                div_tag.innerHTML += k + ":" + i[j][k] + "<br>";
              }
            }
          }
        }
        document.getElementById("mainbox").appendChild(div_tag);
      }
    }
  };
};

read_ajax();

Sol2 Ajax :- Used for exchanging data b/w webserver and browser
Json:- Json is a format for storing data and mainly used b/w webserver and browser and data can be access by making use of different languages like python,java ,JS

Sol 3-
0: request not initialize
1.Server connection establish
2.request recieve
3. request completed and response ready

Sol4 -
200: OK
204: No Content
400: Bad request
404: Not Found
500: Internal Server Error

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js Session 15</title>
    <style>
        #main_section{
            padding: 20px;
            border: 4px solid navy;
            display: flex;
            flex-wrap: wrap;
        }
        .div_style{
            padding: 20px;
            border: 2px solid darkred;
            background-color: lightcoral;
            font-size: 30px;
            color: black;
            margin: 20px;
            width: 600px;
        }
    </style>
</head>
<body>
        <section id="main_section">

    </section>


    <script src="js_http.js"></script>
</body>
</html>


js


js

`function read_post() {
    var a = new XMLHttpRequest();
    a.open("GET", "https://fakestoreapi.com/users", true);
    a.send();
    a.onreadystatechange = function () {
        // console.log(this.readyState)
        // console.log(this.status)
        if (this.status == 200 && this.readyState == 4) {
            // console.log(this.responseText);
            // console.log(typeof(this.responseText))
            var main_data = JSON.parse(this.responseText);
            // console.log(main_data)
            // console.log(typeof(main_data))
            for (var j = 0; j < main_data.length; j++) {
                // console.log(main_data[j])
                var div_tag = document.createElement('div');
                div_tag.className = "div_style"
                // console.log(div_tag)
                for (var i in main_data[j]) {
                    //   console.log(i+" - "+main_data[j][i])
                    if (i == "id" || i == "email" || i == "username" || i == "password") {
                        div_tag.innerHTML += i + " :- " + main_data[j][i] + "<br>";
                    }



                    if (i == 'address') {
                        for (var k in main_data[j][i]) {
                            // console.log(k+" - "+main_data[j][i][k]);
                            if (k == "city") {
                                // var p_tag=document.createElement('p');
                                //p_tag.innerHTML= k+" :- "+main_data[j][i][k];
                                //div_tag.appendChild(p_tag);
                                div_tag.innerHTML += k + " :- " + main_data[j][i][k] + "<br>";



                            }
                            if (k == "street") {
                                // var p_tag=document.createElement('p');
                                // p_tag.innerHTML= k+" :- "+main_data[j][i][k];
                                // div_tag.appendChild(p_tag);
                                div_tag.innerHTML += k + " :- " + main_data[j][i][k] + "<br>"


                            }
                            if (k == "zipcode") {
                                //  var p_tag=document.createElement('p');
                                // p_tag.innerHTML= k+" :- "+main_data[j][i][k];
                                // div_tag.appendChild(p_tag);
                                div_tag.innerHTML += k + " :- " + main_data[j][i][k] + "<br>"


                            }

                        }
                    }

                }
                // console.log(div_tag)
                document.getElementById('main_section').appendChild(div_tag)
            }
        }
    }
}

read_post();`