waterfull——ajax分析 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

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


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 帝皇彩票官网2019年2月(26)
  9. 帝皇彩票官网2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 2018年10月(29)
  13. 帝皇彩票官网2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 2016年10月(92)
  31. 帝皇彩票官网2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 2015年10月(46)
  41. 帝皇彩票官网2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 2015年6月(46)
  45. 2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 2013年5月(48)
  69. 帝皇彩票官网2013年4月(39)
  70. 2013年3月(8)
  71. 帝皇彩票官网2013年2月(20)
  72. 2013年1月(31)
  73. 帝皇彩票官网2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 帝皇彩票官网2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
吉利彩票投注 博发彩票登陆 博发彩票APP下载 大象彩票计划 状元彩票开奖 桔子彩票登陆 上海11选5开奖 大象彩票APP 博发彩票APP下载 状元彩票平台