2. Add a JSON file called members.json to the Lab10 folder with the following in

ID: 3703693 • Letter: 2

Question

2. Add a JSON file called members.json to the Lab10 folder with the following information: [5 points] Person 1: • name=Cara Van • address=2 Highway • city=Cleveland • zip=12345 • phone=999-999-9999 • level=Contributing • cost=65.00 Person 2: • name=Bill Bord • address=1 Side of Street • city=Parma • zip=11111 • phone=123-123-1234 • level=Individual • cost=50.00 3. Create an XML file called memberships.xml with membership levels. Add your XML file to the Lab10 folder. [5 points] • level1 i. type=seasonal ii. cost=35.00 • level2 i. type=individual ii. cost=50.00 • level3 i. type=family ii. cost=65.00 • level4 i. type=contributing ii. cost=70.00 4. Create an HTML file called Lab10.html. Use the following HTML outline. Display all membership levels in the span with id membershipLevels. Display all members in the span with id members. [10 points] First Form

Membership Levels

Current Members

Part 2 – Concepts 1. Add an XML file to your project folder called questions.xml. In this XML file, add the root element “questions”. Then add child elements called question with ids: question1, question2, and question3. Answer the following questions inside of those elements. Make sure that questions.xml is pushed with your project. 2. Describe the purpose of AJAX. What advantage does AJAX provide over a traditional HTML form submit. [2 points] 3. Describe the role of JSON and XML with AJAX. [2 points] 4. If you had to choose just one, which would you choose: XML or JSON? Why? [2 points

Explanation / Answer

Please save the files with respective file names as displayed in header bold text and use it accordingly.

LAB10.HTML (note: this is not perfect way of displaying data but due to time constraint, it does show the relevant details as requested. you can modify it further to perfection as necessary.)

<html>
<head>

    <title>MEMBERS</title>
</head>
<body>
<script type="text/javascript" src="jquery-3.2.1.js"> </script>
    <script type="text/javascript" >
        $(document).ready(function () {
            alert("onLoad");

            $.getJSON('members.json', function (data) {
                $.each(data.member, function (i, f) {

                    var mLevel = $("#membershipLevels").text();
                    var mMember = $("#members").text();

$("#divL #membershipLevels").text(mLevel + " " + f.level + " , ");
$("#divM #members").text(mMember + " " + f.name + " , ");

});

            });
        });
    </script>
<div id="divL"><span id="membershipLevels"
       >Membership Levels: </span></div>
<hr />
<div id="divM"><span id="members">Members: </span></div>
</body>
</html>

MEMBERS.JSON

{
    "member": [
       {
       "name":"Cara Van",
       "address":"2 Highway",
       "city":"Cleveland",
       "zip":"12345",
       "phone":"999-999-9999",
       "level":"Contributing",
       "cost":"65.00"
       },
       {
       "name":"Bill Bord",
       "address":"1 Side of Street",
       "city":"Parma",
       "zip":"11111",
       "phone":"123-123-1234",
       "level":"Individual",
       "cost":"50.00"
       }
   ]
}

QUESTIONS.XML

<questions>
<question id="question1">Describe the purpose of AJAX. What advantage does AJAX provide over a traditional HTML form submit
<answer>
    The purpose of AJAX to enable asynchronous function calls within an browser to the back end web server without reloading the entire page.
    In traditional HTML, at every form submit (also called postback), the entire page gets submitted thereby giving a feeling of
    entire page flickering (or refreshing). In AJAX only the HTML section that is configured for asynchronous call gets a flickering feeling because thats the
    only section that gets submitted back to web server.

</answer>
</question>
<question id="question2">Describe the role of JSON and XML with AJAX
<answer>
      JSON and XML are simple structured text data that can be passed as a simple string to
      any program easily. It is independent of database. For Ajax implementation like jQuery, it becomes easier
      once the data is available in such simple formats. It does not has the overload of connecting
      to secure databases in the backend. It frees the back end and lets the front end work smoothly with the limited desired data.
</answer>
</question>
<question id="question3">If you had to choose just one, which would you choose: XML or JSON? Why?
<answer>
    JSON works well with Javascript language. Even Jquery that provides
    reuse functionality for AJAX implementation using Javascript.
    Most browser client side scripts are javascript based.
    Hence JSON is preferred mostly.
</answer>
</question>
</questions>

MEMBERSHIPS.XML

<membershipLevels>
<Level>
<Type>Seasonal</Type>
<Cost>35.00</Cost>
</Level>

<Level>
<Type>Individual</Type>
<Cost>50.00</Cost>
</Level>

<Level>
<Type>Family</Type>
<Cost>65.00</Cost>
</Level>

<Level>
<Type>Contributing</Type>
<Cost>70.00</Cost>
</Level>
</membershipLevels>

Navigate

2. Add 7.25 Land 875 cL. Reduce the result to milliliters. 4. Reduce 1.256 g to

2. Add a new function find(n) for class ArrayList. The function will return the

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

2. Add a JSON file called members.json to the Lab10 folder with the following in

Question

Explanation / Answer

Related Questions

Navigate