[关闭]
@fantaghiro 2014-10-17T17:07:08.000000Z 字数 9278 阅读 1777

AJAX基础、瀑布流项目开发、留言本实战开发

js 学习笔记 妙味课堂

AJAX基础

Ajax原理

什么是Ajax

使用Ajax

Ajax过程详解

  1. 创建一个ajax对象
    • ie6以上和标准浏览器：new XMLHttpRequest()
    • ie6及以下：new ActiveXObject('Microsoft.XMLHTTP')
  2. open方法
    • 三个参数：
      • 提交方式，相当于form-method
      • 提交地址，相当于form-action
      • 异步（同步）
  3. send方法
    • 发送数据请求，相当于form的submit
  4. 请求状态监控
    • onreadystatechange事件
      • readyState属性：请求状态
        • 0（初始化）还没有调用open()方法
        • 1（载入）已调用send()方法，正在发送请求
        • 2（载入完成）send()方法完成，已收到全部响应内容
        • 3（解析）正在解析响应内容
        • 4（完成）响应内容解析完成，可以在客户端调用了
      • status属性：服务器（请求资源）的状态
      • 返回的内容
        • responseText：返回以文本形式存放的内容
        • responseXML：返回XML形式的内容
  1. <input type="button" value="按钮" id="btn" />
  1. var oBtn = document.getElementById('btn');
  3. oBtn.onclick = function(){
  5.     //打开浏览器
  6.     /*
  7.         1. 创建一个ajax对象，并解决兼容性问题    
  8.     */
  9.     var xhr = null;
  10.     if(window.XMLHttpRequest){
  11.         xhr = new XMLHttpRequest();
  12.     } else {
  13.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  14.     }
  16.     /*
  17.     也有使用以下方式处理兼容性问题
  18.     try {
  19.         xhr = new XMLHttpRequest();
  20.     } catch(e){
  21.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  22.     }
  23.     */
  25.     //在地址栏中输入地址
  26.     /*
  27.         open方法：
  28.         参数：
  29.             1. 打开方式：用get方式还是post方式
  30.             2. 地址
  31.             3. 是否异步
  32.                 异步：非阻塞模式（前面的代码不会影响后面代码的执行）
  33.                 同步：阻塞模式（当前面代码没做完时，阻塞后续代码的执行）
  34.     */
  35.     xhr.open('get', '1.txt', true);
  36.     //提交 发送请求
  37.     xhr.send();
  39.     //等待服务器返回内容
  40.     /*
  41.         readyState: ajax工作状态：0、1、2、3、4
  42.         responseText: ajax请求返回的内容就被存放到这个属性下面 字符串类型
  43.         onreadystatechange：当readyState改变的时候触发
  44.         status：服务器状态，http状态码
  45.     */
  46.     xhr.onreadystatechange = function(){
  47.         if(xhr.readyState == 4){
  48.             if(xhr.status == 200){
  49.                 alert(xhr.responseText);
  50.             } else {
  51.                 alert('出错了，Error：' + xhr.status);
  52.             }    
  53.         }
  54.     }
  55. }

try语法：

  1. try {
  2.     //代码尝试执行这个块中的内容，如果有错误，则会执行catch{}的代码，并且传入一个错误信息参数
  3.     alert(a);
  4.     //throw
  5.     throw new Error('错了错了'); //即使上面没错，也可以通过throw来手动抛错
  6. } catch (e) {
  7.     alert(e);
  8. }

表单

get方式：

  1. <form action="1.get.php">
  2.     <input type="text" name="username" />
  3.     <input type="text" name="age" />
  4.     <input type="submit" value="提交" />
  5. </form>
  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  5. $username = $_GET['username'];
  6. $age = $_GET['age'];
  8. echo "你的名字：{$username}，年龄：{$age}";

post方式：

  1. <form action="1.post.php" method="post">
  2.     <input type="text" name="username" />
  3.     <input type="text" name="age" />
  4.     <input type="submit" value="提交" />
  5. </form>
  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  5. $username = $_POST['username'];
  6. $age = $_POST['age'];
  8. echo "你的名字：{$username}，年龄：{$age}";

get和post的区别：

后端数据的接收：

编写Ajax

应用中get和post的区别处理：

get方式传递：

  1. var oBtn = document.getElementById('btn');
  3. oBtn.onclick = function(){
  5.     var xhr = null;
  6.     if(window.XMLHttpRequest){
  7.         xhr = new XMLHttpRequest();
  8.     } else {
  9.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  10.     }
  12.     /*
  13.         get方式的两个问题
  14.         1. 缓存问题：在url?后面连接一个随机数或时间戳
  15.         2. 传输中文产生乱码：采用编码encodeURI
  16.     */
  18.     xhr.open('get', '2.get.php?username=' + encodeURI('刘伟') + 'o&age=30&' + new Date().getTime() , true);
  19.     xhr.send();
  21.     xhr.onreadystatechange = function(){
  22.         if(xhr.readyState == 4){
  23.             if(xhr.status == 200){
  24.                 alert(xhr.responseText);
  25.             } else {
  26.                 alert('出错了，Error：' + xhr.status);
  27.             }    
  28.         }
  29.     }
  30. }
  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  5. $username = $_GET['username'];
  6. $age = $_GET['age'];
  8. echo "你的名字：{$username}，年龄：{$age}";

post方式传递：

  1. var oBtn = document.getElementById('btn');
  3. oBtn.onclick = function(){
  5.     var xhr = null;
  6.     if(window.XMLHttpRequest){
  7.         xhr = new XMLHttpRequest();
  8.     } else {
  9.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  10.     }
  12.     xhr.open('post', '2.post.php', true);
  13.     /*
  14.         post方式，数据放在send()方法中，作为参数传递
  15.         post方式要设置请求头，告诉后端发送数据的类型
  16.         post没有缓存问题，中文也没有乱码问题，所以无需编码。
  17.     */
  18.     xhr.setRequestHeader('content-type', 'application/x-www.form-urlencoded'); //声明发送的数据编码类型
  19.     xhr.send('username=刘伟&age=30');
  21.     xhr.onreadystatechange = function(){
  22.         if(xhr.readyState == 4){
  23.             if(xhr.status == 200){
  24.                 alert(xhr.responseText);
  25.             } else {
  26.                 alert('出错了，Error：' + xhr.status);
  27.             }    
  28.         }
  29.     }
  30. }
  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  5. $username = $_POST['username'];
  6. $age = $_POST['age'];
  8. echo "你的名字：{$username}，年龄：{$age}";

JSON对象

IE7一下不支持JSON对象。可以到json.org上找javascript下面的json2.js包，引入到文件当中。

  1. var arr = [1, 2, 3];
  2. var j = {left: 100};
  3. alert(JSON.stringify(arr));
  4. alert(JSON.stringify(j);
  1. var s1 = '[100, 200, 300]';
  2. var a1 = JSON.parse(s1);
  3. alert(a1[0]);
  5. var s2 = '{"left": 100}'; //注意jons中的key值一定严格用双引号引起来，否则会出错
  6. var a2 = JSON.parse(s2);
  7. alert(a2.left);

实例：AJAX的封装

  1. <input type="button" value="按钮" id="btn" />
  2. <ul id="ul1"></ul>
  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  5. $news = array(
  6.     array('title'=>'新闻标题一','date'=>'2014-9-1'),
  7.     array('title'=>'新闻标题二','date'=>'2014-9-2'),
  8.     array('title'=>'新闻标题三','date'=>'2014-9-3'),
  9.     array('title'=>'新闻标题四','date'=>'2014-9-4'),
  10.     array('title'=>'新闻标题五','date'=>'2014-9-5'),
  11.     array('title'=>'新闻标题六','date'=>'2014-9-6'),
  12.     array('title'=>'新闻标题七','date'=>'2014-9-7'),
  13. );
  15. echo json_encode($news);
  1. oBtn.onclick = function(){
  3.     var xhr = null;
  4.     if(window.XMLHttpRequest){
  5.         xhr = new XMLHttpRequest();
  6.     } else {
  7.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  8.     }
  11.     xhr.open('get', 'getList.php', true);
  12.     xhr.send();
  14.     //等待服务器返回内容
  15.     xhr.onreadystatechange = function(){
  16.         if(xhr.readyState == 4){
  17.             if(xhr.status == 200){
  18.                 var data = JSON.parse(xhr.responseText);
  19.                 var oUl = document.getElementById('ul1');
  20.                 var html = '';
  22.                 for(var i=0; i<data.length; i++{
  23.                     html += '<li><a href="">' + data[i].title + '</a>[<span>' + data[i].date + '</span>]</li>';
  24.                 }
  25.                 oUl.innerHTML = HTML;
  26.             } else {
  27.                 alert('出错了，Error：' + xhr.status);
  28.             }    
  29.         }
  30.     }
  32. }

为以上新闻获取添加一个定时器：

  1. //此处是名为ajax的js文件
  2. function ajax(method, url, data, success){
  3.     var xhr = null;
  4.     if(window.XMLHttpRequest){
  5.         xhr = new XMLHttpRequest();
  6.     } else {
  7.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  8.     }
  10.     if(method == 'get' && data){
  11.         url += '?' + data;
  12.     }
  14.     xhr.open(method, url, true);
  15.     if(method == 'get'){
  16.         xhr.send();
  17.     } else {
  18.         xhr.setRequestHeader('content-type', 'application/x-www.form-urlencoded');
  19.         xhr.send(data);
  20.     }
  21.     xhr.onreadystatechange = function(){
  22.         if(xhr.readyState == 4){
  23.             if(xhr.status == 200){
  24.                 success && success(xhr.responseText);
  25.             } else {
  26.                 alert('出错了，Error：' + xhr.status);
  27.             }    
  28.         }
  29.     }
  30. }

下面的js中引用上面的ajax函数

  1. oBtn.onclick = function(){
  2.     ajax('get', 'getNews.php', '', function(data){
  3.         var data = JSON.parse(data);
  4.         var oUl = document.getElementById('ul1');
  5.         var html = '';
  7.         for(var i=0; i<data.length; i++{
  8.             html += '<li><a href="">' + data[i].title + '</a>[<span>' + data[i].date + '</span>]</li>';
  9.         }
  10.         oUl.innerHTML = HTML;
  11.     });
  12.     setInterval(function(){
  13.         ajax('get', 'getNews.php', '', function(data){
  14.         var data = JSON.parse(data);
  15.         var oUl = document.getElementById('ul1');
  16.         var html = '';
  18.         for(var i=0; i<data.length; i++{
  19.             html += '<li><a href="">' + data[i].title + '</a>[<span>' + data[i].date + '</span>]</li>';
  20.         }
  21.         oUl.innerHTML = HTML;
  22.     });
  23.     }, 1000);
  24. }

瀑布流项目开发

瀑布流有两种展现形式：固定列、非固定列

  1. <ul id="ul1">
  2.     <li></li>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6. </ul>
  1. body { margin: 0; }
  2. #ul1 { width: 1080px; margin: 100px auto 0; }
  3. li { width: 247px; list-style: none; float: left; margin-right: 10px; }
  4. li div { border: 1px solid #000; padding: 10px; margin-bottom: 10px; }
  5. li img { width: 225px; display: block; }
  1. <?php
  2. header('Content-type:text/html; charset="utf-8"');
  4. /*
  5. API:
  6.     getPics.php
  8.         参数
  9.         cpage：获取数据的页数
  10. */
  12. $cpage = isset($_GET['cpage'])?$_GET['cpage']:1;
  14. $url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;
  16. $content = file_getcontents($url);
  17. $content = iconv('gbk', 'utf-8', $content);
  19. echo $content;
  21. ?>
  1. function ajax(method, url, data, success){
  2.     var xhr = null;
  3.     if(window.XMLHttpRequest){
  4.         xhr = new XMLHttpRequest();
  5.     } else {
  6.         xhr = new ActiveXObject('Microsoft.XMLHTTP');
  7.     }
  9.     if(method == 'get' && data){
  10.         url += '?' + data;
  11.     }
  13.     xhr.open(method, url, true);
  14.     if(method == 'get'){
  15.         xhr.send();
  16.     } else {
  17.         xhr.setRequestHeader('content-type', 'application/x-www.form-urlencoded');
  18.         xhr.send(data);
  19.     }
  20.     xhr.onreadystatechange = function(){
  21.         if(xhr.readyState == 4){
  22.             if(xhr.status == 200){
  23.                 success && success(xhr.responseText);
  24.             } else {
  25.                 alert('出错了，Error：' + xhr.status);
  26.             }    
  27.         }
  28.     }
  29. }
  31. window.onload = function(){
  33.     var oUl = document.getElementById('ul1');
  34.     var aLi = oUl.getElementsByTagName('li');
  35.     var iLen = aLi.length;
  36.     var iPage = 1;
  37.     var b = true;
  39.     //初始化数据处理
  40.     getList();
  42.     function getList(){
  43.        ajax('get', 'getPics.php', 'cpage=' + iPage, function(data){
  44.             var data = JSON.parse(data);
  45.             if(!data.length){
  46.                 //后续没有数据了
  47.                 return;
  48.             }
  50.             for (var i=0; i<data.length; i++){
  52.                 //获取高度最短的li
  53.                 var _index = getShort();
  55.                 var oDiv = document.createElement('div');
  56.                 var oImg = document.createElement('img');
  57.                 oImg.src = data[i].preview;
  58.                 oImg.style.width = '225px';
  59.                 oImg.style.height = data[i].height * （225 / data[i].width） + 'px'; //解决由于图片加载造成的图片位置添加有误的问题，并且解决图片固定宽的宽高比例问题
  60.                 oDiv.appendChild(oImg);
  61.                 var oP = document.createElement('p');
  62.                 oP.innerHTML = data[i].title;
  63.                 oDiv.appendChild(oP);
  65.                 aLi[_index].appendChild(oDiv);
  66.             }
  67.             b = true;
  68.         });
  69.     }
  71.     window.onscroll = function(){
  72.         var _index = getShort();
  73.         var oLi = aLi[_index];
  75.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  77.         if(getTop(oLi) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop){
  78.             if(b){
  79.                 b = false;
  80.                 iPage++;
  81.                 getList();
  82.             }
  83.         }
  84.     }
  86.     function getShort(){
  87.         var index = 0;
  88.         var ih = aLi[index].offsetHeight;
  89.         for(var i=0; i<iLen; i++){
  90.             if(aLi[i].offsetHeight < ih){
  91.                 index = i;
  92.                 ih = aLi[i].offsetHeight;
  93.             }
  94.         }
  95.         return index;
  96.     }
  98.     function getTop(obj){
  99.         var iTop = 0;
  100.         while(obj){
  101.             iTop += obj.offsetTop;
  102.             obj = obj.offsetParent;
  103.         }
  104.         return iTop;
  105.     }
  106. }

AJAX-跨域解决之JSONP

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这么参数做一些事情。

然后需要的时候通过script标签加载对应远程文件资源，当远程文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注