追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


waterfull——ajax分析

2019-8-6 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

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

标签: waterfull——ajax分析 « 21条超好用的创意技巧 | WEB端控件规范——导航类»


订阅Rss