waterfull——ajax分析（草稿）

把项目放在wampserver的www目录下，启动wampserver，并且浏览器打开后手动修改url为localhost

index.js=》getData():

ajax.js以及index。js对它的调用:

ajax的参数：method、data、url都是字符串

index.js =》getData（）=》调用ajax

ajax('GET', 'http://localhost/web/ajax/waterfall2/src/js/getPics.php', addDom, 'cpage=' + num, true)

并且url是localhost下——localhost/web/ajax/waterfall2/src/js/getPics.php

不是直接图片资源地址

图片资源地址写在php中，只管调用就行

data：

ajax调用是data是这样的=》'cpage=' + num

 

测试用的data.txt：

一个数组里有很多对象，每个对象都是一张图片的全部信息，每条信息都是json.stringify格式

所以测试用ajax的callback这样写：

function addDom(data) {
    console.log(JSON.parse(data));
}

这个data不是自己定义的，是xhr.responseText，是接口的数据

这个data是callback的参数

回调函数的data参数和使用方法：

xhr.onreadystatechange = function() {

状态改变
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                callback(xhr.responseText);

满足两个条件时,callback才获取数据成功，才能用数据做些什么

            }else {
                console.log('error');
            }
        }
    }

ajax（）中callback是参数，而callback的定义和对数据的操作通常在ajax（）调用之后

例如:

(1)

ajax('GET', 'http://localhost/web/ajax/waterfall2/src/js/data.txt', addDom, 'cpage=2', true);
function addDom(data) {
    console.log(JSON.parse(data));
}

如此简单明了

(2)

function getData() {
//         if(!flag) {
//             flag = true;
//             ajax('GET', 'http://localhost/web/ajax/waterfall2/src/js/getPics.php', addDom, 'cpage=' + num, true)
//             num++;
//         }
//     }
//     getData();
//     function addDom(data) {

……

}

回来…………

ajax中的data在本例中是字符串'cpage=' + num  或者 'cpage=2'这种

get中作用:

xhr.open(method, url + '?' + data + '&timer=' + timer, flag);

post中作用:

xhr.send(data);

话说回来…………

都是获取数据，data.txt和getPics.php区别:

一个只有第2页的地址，一个是动态获取很多页数据

反正就那么传吧  

而ajax