ajax使用原生js获取json数据

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
    
        // var jsonobject = {

        //     "name":"tianhai",
        //     "age":12,
        //     "address":{"city":"北京","school":"清华"},
        //     "teaching":function(){
        //         alert("JavaEE,Android...");
        //     }

        		
        // };

        // alert(jsonobject.name);
        // alert(jsonobject.address.city);
        // jsonobject.teaching();

       //var jsonStr = "{'name':'tianhai'}";
       //console.log(jsonStr.name);

       //var testStr = "alert('hello world!')";
        //alert(testStr);
        //使用eval()方法，可以把字符串转为本地js方法执行。
       // eval(testStr);
       //把json字符串转为json对象方法
        // var testObject = eval("("+jsonStr+")");
        //console.log(("{'name':'tianhai'}"));
        //  console.log(testObject);
        //  console.log(testObject.name);
    
     
        window.onload=function(){
        	//aNodes a节点  node英文  节点;（计算机网络的）节点;[医]结节;植物的节
            var aNodes = document.getElementsByTagName("a");
            for(var i=0; i<aNodes.length; i++){
                aNodes[i].onclick = function(){
                    var request = new XMLHttpRequest();
                    var method = "GET";
                    var url = this.href;
                    request.open(method,url);
                    request.send(null);
                    request.onreadystatechange = function(){
                        if(request.readyState == 4){
                            if(request.status == 200 || request.status == 304){
                            	var result = request.responseText;
                                var object = eval("("+result+")");
                            	var name = object.person.name;
                                var website = object.person.website;
                                var email = object.person.email;
                                // alert(name);
                                // alert(website);
                                // alert(email);
                                var aNode = document.createElement("a");
                                
                                aNode.appendChild(document.createTextNode(name));
                                aNode.href ="mailto" + email;
                                //aNode.href = website; 
                                //console.log(aNode);

                                var h2Node = document.createElement("h2");
                                h2Node.appendChild(aNode);
                                //console.log(h2Node);

                                var aNode2 = document.createElement("a");
                                aNode2.appendChild(document.createTextNode(website));
                                aNode2.href = website; 
                                //console.log("aNode2是"+aNode2); 

                                var detailsNode = document.getElementById("details");
                                detailsNode.innerHTML=""; 
                                detailsNode.appendChild(h2Node);
                                detailsNode.appendChild(aNode2); 

                            	                          	
                            }
                        }
                    }
                    return false;
                }
            }  
        }
    
    </script>
</head>
<body>

    <h1>网址导航</h1>
    <ul>
        <li><a href="a.js">搜狐</a></li>
        <li><a href="b.js">百度</a></li>
        <li><a href="c.js">腾讯</a></li>
    </ul>
    <div id="details"></div>

    
    
</body>
</html>

a.js

{
	"person": {
		"name": "搜狐",
			"website": "http://www.sohu.com",
				"email": "[email protected]"
	}
}

b.js

{
	"person": {
		"name": "百度",
			"website": "https://www.baidu.com",
				"email": "[email protected]"
	}
}

c.js

{
	"person": {
		"name": "腾讯",
			"website": "http://www.qq.com",
				"email": "[email protected]"
	}
}

ajax使用原生js获取json数据

猜你喜欢