Procedure to request a JSON file or an XML file in the ...

Procedure to request a JSON file or an XML file in the local host Using AJAX with JQuery

Cross Domain File Request:

Access Across Domains For security reasons, modern browsers do not allow access across domains. This means that both the web page and the XML file it tries to load, must be located on the same server. The examples on W3Schools all open XML files located on the W3Schools domain. If you want to use the example above on one of your own web pages, the XML files you load must be located on your own server.

Same Domain File Request:

With Google Chrome: Need a local Web Server to request a file using AJAX with JQuery on the local host For example, in order to host these pages locally, MAMP's local server is set up and used. Using the local server is necessary because when introducing JQuery's getJson function, you will encounter cross origin domain requests which are not allowed when not on a server.

With Firefox: No need to set a local Web Server to request a file using AJAX with JQuery on the local host

/*use the JQuery function $.getJSON() to simply grab a JSON data file*/ function getJSON(){

$.getJSON("YelpOneBusinessJasonData.json", function(result){ jsondata = result; processJson(jsondata);

}); }

/*set our corresponding html via our json objects*/

function processJson(data){ //Set name first var name_html = document.getElementById('name'); name_html.innerText = data.name;

... //Create our services and features table replacement_html = ""; for(i in data.attributes){ replacement_html += "" if(typeof data.attributes[i] == 'object'){ var vals = Object.values(data.attributes[i]); var keys = Object.keys(data.attributes[i]); for(j in vals){ if(vals[j] == true){ replacement_html += "" + keys[j] + ""; replacement_html += ""; } } }else{ if(data.attributes[i] == true){ replacement_html += "" + i + ""; replacement_html += ""; }

} } replacement_html += ""; var services_html = document.getElementById('services'); services_html.innerHTML = replacement_html; }

For XML, Consider using jQuery.parseXML

If you need to parse large XML documents that you may not be able to completely hold in memory, consider using a SAX style parser like this one:

function getXML(){ 116. var xhttp = new XMLHttpRequest(); 117. xhttp.onreadystatechange = function(){ 118. if(this.readyState == 4 && this.status == 200){ 119. processXML(this); 120. } 121. } 122. xhttp.open("GET", "restaurant_menu.xml", true); 123. xhttp.send(); 124. } 125.

126. function processXML(data){ 127. var parser = new DOMParser(); 128. var xml = parser.parseFromString(data.responseText, "text/xml"); 129. 130. //Process breakfast 131. var html = document.getElementById("breakfast"); 132. var tempHtml = tableCreator(xml, "BREAKFAST"); 133. html.innerHTML += tempHtml; 134.

135. //Process brunch 136. html = document.getElementById("brunch"); 137. tempHtml = tableCreator(xml, "BRUNCH"); 138. html.innerHTML += tempHtml; 139. 140. //Process lunch 141. html = document.getElementById("lunch"); 142. tempHtml = tableCreator(xml, "LUNCH"); 143. html.innerHTML += tempHtml; 144. 145. //Process dinner 146. html = document.getElementById("dinner"); 147. tempHtml

jQuery.parseXML( data )Returns: XMLDocument

Description: Parses a string into an XML document.

? version added: 1.5jQuery.parseXML( data )

o data Type: String a well-formed XML string to be parsed

jQuery.parseXML uses the native parsing function of the browser to create a valid XML Document. This document can then be passed to jQuery to create a typical jQuery object that can be traversed and manipulated.

Example:

Create a jQuery object using an XML string and obtain the value of the title node.

1

2

3

4 jQuery.parseXML demo

5

6

7

8

9

10

11

12 var xml = "RSS Title",

13 xmlDoc = $.parseXML( xml ),

14 $xml = $( xmlDoc ),

15 $title = $xml.find( "title" );

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download