W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

JSON HTTP请求



JSON常用的方法是从Web服务器读取数据,并在网页中显示数据。

本章将教你4个简单的步骤,如何读取JSON数据,利用XMLHTTP。


JSON 实例

此实例将从 myTutorials.txt 读取菜单,并显示在网页的菜单:

JSON Example

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>
尝试一下 »

实例解析:

1: 创建对象数组。

使用数组源文本来声明对象数组。

给每个对象两个属性: displayurl

命名数组myArray

myArray

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.wang/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.wang/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.wang/css/default.asp"
}
]

2: 创建一个JavaScript函数来显示数组。

创建一个函数 myfunction() 循环数组,并显示内容的HTML链接:

myFunction()

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

使用 myArray 作为参数调用 myFunction() 函数:

Example

myFunction(myArray);
尝试一下 »

3: 创建文本文件

把文件中的 数组源文本 命名为 myTutorials.txt

myTutorials.txt

[
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.wang/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.wang/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.wang/css/default.asp"
}
]
Look at the file »

4: 用XMLHttpRequest读文本文件

写一个 XMLHttpRequest 读取文本文件,并使用 myFunction() 显示数组:

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var myArr = JSON.parse(xmlhttp.responseText);
    myFunction(myArr);
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();
尝试一下 »