2019-8-5 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
把项目放在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
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。