利用js读取动态网站从服务器端返回的数据

要利用JS读取动态网站从服务器端返回的数据，可以采用以下五个步骤：

1. 定义请求

用JS创建一个XMLHttpRequest对象，定义请求的地址、方法、是否异步等属性。例如：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);

1. 发送请求

调用xhr.send()方法，将请求发送给服务器端。例如：

xhr.send();

1. 监听状态变化

使用xhr.readyState判断请求状态，xhr.status判断服务器响应状态。如果状态值为4和200，则表示请求成功。例如：

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

1. 解析数据

利用JSON.parse()方法解析响应数据。例如：

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

1. 错误处理

使用xhr.onerror方法处理错误信息。例如：

xhr.onerror = function() {
    console.log("请求出错");
};

示例1：

请求GitHub API，获取指定用户的信息。

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.github.com/users/octocat", true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

示例2：

请求一个演示网站的API，获取一组图片链接。

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/photos", true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        for(var i = 0; i < data.length; i++) {
            console.log(data[i].thumbnailUrl);
        }
    }
};