Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

- - - - -

How does AJAX read the JSON format data

JSON json ajax

  • Please log in to reply
No replies to this topic

#1 Guest_21tctrade_*

Guest_21tctrade_*
  • Guest

Posted 26 August 2009 - 05:32 PM

First, we are free to write a JSON formatted data files say user.txt

Java code
1.{
2. userName: "nihao",
3. **: "male",
4. age: "23"
5.}
{
userName: "nihao",
**: "male",
age: "23"
}
The following we'll write a AJAX.besides we'll write the basic ajax.js document.

Java code
1.function createXMLHttpRequest() {
2. var req;
3. if (window.XMLHttpRequest) {
4. req = new XMLHttpRequest();
5. }else if (window.ActiveXObject) {
6. req = new ActiveXObject("Microsoft.XMLHTTP");
7. }
8. return req;
9.}
function createXMLHttpRequest() {
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}

In addition, we import an Ajax resource file prototype1.6.js, I'll upload it for you at the end.


Then,we should build a main page jsontest.html to test the data of the JSON which is read by AJAX.

Java code
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2.<html>
3. <head>
4. <!--import two js document-->
5. <script type="text/javascript" src="./ajax.js"></script>
6. <script type="text/javascript" src="./prototype1.6.js"></script>
7. <title>jsontest.html</title>
8.
9. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
10. <meta http-equiv="description" content="this is my page">
11. <meta http-equiv="content-type" content="text/html; charset=GB18030">
12. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
13.
14. <script type="text/javascript">
15. var req = createXMLHttpRequest();
16. function startRequest(){
17. try{
18. req.onreadystatechange = handleStateChange;
19. req.open("GET", "user.txt", true);
20. req.send(null);
21. }catch(exception){
22. alert("");
23. }
24. }
25. function handleStateChange(){
26. if(req.readyState == 4){
27. if (req.status == 200 || req.status == 0){
28. //obtain the return character string
29. var resp = req.responseText;
30. // Construct method to return to JSON object
31. var func = new Function("return " + resp);
32. // obtain JSON object
33. var json = func( );
34. // Display the returned results
35. alert("userName: " + json.userName + " " + "**: " + json.** + " " + "age: " + json.age);
36. }
37. }
38. }
39. </script>
40. </head>
41. <body>
42. <div>
43. <input type="button" value="json's value"
44. onclick="startRequest();" />
45. </div>
46. </body>
47.</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--import two js document-->
<script type="text/javascript" src="./ajax.js"></script>
<script type="text/javascript" src="./prototype1.6.js"></script>
<title>jsontest.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
var req = createXMLHttpRequest();
function startRequest(){
try{
req.onreadystatechange = handleStateChange;
req.open("GET", "user.txt", true);
req.send(null);
}catch(exception){
alert("");
}
}
function handleStateChange(){
if(req.readyState == 4){
if (req.status == 200 || req.status == 0){
// obtain the return character string
var resp = req.responseText;
// Construct method to return to JSON object
var func = new Function("return " + resp);
// obtain JSON object
var json = func( );
// Display the returned results
alert("userName: " + json.userName + " " + "**: " + json.** + " " + "age: " + json.age);
}
}
}
</script>
</head>
<body>
<div>
<input type="button" value="json's value"
onclick="startRequest();" />
</div>
</body>
</html>
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download