waterfull——ajax分析

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界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

分享本文至：

« 21条超好用的创意技巧 WEB端控件规范——导航类 »

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com