AJAX学习笔记(2)

发表于 | 分类于 ， ， | 阅读次数:

AJAX实例：留言板、瀑布流

瀑布流项目开发

- 瀑布流实现原理分析
- 浮动与定位、优缺点
- 数据格式分析
- 页面数据填充
- 判断数据加载时机

留言本实战开发

- 用户名验证
- 用户注册
- 用户登陆
- 留言
- 顶功能
- 踩功能
- 留言数据获取
- 留言列表展现（瀑布流的形式）

瀑布流布局原理

固定列数和非固定列数

  • 统一宽不统一高(每列宽度相同高度不同)
  • 数据不是一次性加载的，而是分批加载的（第一批显示多少条，满足一定条件时，开始第二批第三批等的加载）
    固定列（例：蘑菇街）
  • 列数固定
  • 浮动布局
    非固定列（例：百度图片）
  • 列数会根据当前可视区的宽度动态计算
  • 首先定义好每一列的宽度，再用可视区的宽度除以每一列的宽度得出当前显示的最大列数，根据列数进行定位
  • 定位布局

数据的分析及添加

流的实现

示例：点击查看

留言本初始配置工作

留言本验证用户名

留言本注册及状态处理

留言内容的添加和显示

留言本数据列表的处理

留言本类瀑布流效果

AJAX跨域解决方案：JSONP

跨域的问题
域：域名
跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域
跨域的解决
Jsonp: json padding

问题回顾及跨域限制问题

跨域：跨域名
一个域名下的文件去请求了和他不一样的域名下的资源文件，那么就会产生跨域请求

AJAX跨域请求限制

跨域的解决

1.flash
2.通过服务端中转，通过服务端的代码进行代理
3.JSONP (JSON with Padding)
原理
1.script标签
2.用script标签加载资源是没有跨域问题的
3.计算机中文件类型并不是根据文件后缀名来区分的，而是根据文件中的实质内容定的。后缀名是给人看的或者给某些软件辨识的，右键会自动关联相应的文件类型

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情；然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行前面定义好的函数，并且把数据当作这个函数的参数传入进去

参考

过程的实现

1
2
3
4
5
6
7
8
9
10
11
12
<input type="button" type="按钮" id="btn1">
<script>
  window.onload = function(){
    var oBtn = document.getElementById('btn1');
    // 当按钮点击的时候再去加载远程资源，让它执行

    var oScript = document.createElement('script');
    oScript.src = '';
    document.body.appendChild(oScript);

  }
</script>

百度下拉提示实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
  #q{width: 300px;height: 30px;padding: 5px;border: 1px solid #f90;font-size: 16px;}
  #ul1{width: 310px;margin: 0;padding: 0;border: 1px solid #f90;display: none;}
  li a{display: block;line-height: 30px;padding: 5px;text-decoration: none;color: black;}
  li a:hover{background: #f90;color: #fff;}
</style>
<input type="text" id="q" autocomplete="off">
<ul id="ul1"></ul>
<script>
  function test(data){
    var oUl = document.getElementById('ul1');
    var html = '';

    if (data.s.length) {
      oUl.style.display = 'block';
      for (var i = 0; i < data.s.length; i++) {
        html += '<li><a target="_blank" href="http://www.baidu.com/s?wd=' + data.s[i] + '">' + data.s[i] + '</a></li>';
      }
      oUl.innerHTML = html;
    }
  }
  window.onload = function(){
    var oQ = document.getElementById('q');
    var oUl = document.getElementById('ul1');

    oQ.onkeyup = function(){// 应该用oninput事件
      if(this.value != ''){
        var oScript = document.createElement('script');
        oScript.src = 'http://suggestion.baidu.com/su?wd=' + this.value + '&cb=test';
        document.body.appendChild(oScript);
        document.body.removeChild(oScript);
      } else {
        oUl.style.display = 'none';
      }
    }
  }
</script>

【示例：点击查看】

豆瓣搜索实例

练习：分页
【示例：点击查看】