学习ajax总结

以前公司的ajax学习分享，作一点总结，加深记忆

什么是ajax?

异步的的js和xml,用js异步形式操做xml,工做主要是数据交互

• 借阅用户操做时间，减小数据请求，能够无刷新请求数据

建立一个对象

oBtn.onclick = function () {
     // 打开浏览器

     var xhr = new XMLHttpRequest();
     // 打开地址
     xhr.open('get', './1.txt', true);
     // 提交
     xhr.send();
     // 等待服务器返回内容
     xhr.onreadystatechange = function () {
         if(xhr.readyState === 4) {
             alert(xhr.responseText);
         }
     }
 }

不兼容ie6一下，须要写判断 window.XMLHttpRequest

try {
    
} catch(e) {
    
}

// 代码尝试执行这个`try`块中的内容，若是有错误，则会执行catch{}不会影响程序执行

xhr = new XMLHttpRequest();

open 方法

参数 打开的方式，数据地址，是否异步

异步： 非阻塞 前面的代码不会影响后面代码的执行 setTimeout true 通常用异步的形式
同步： 阻塞 当前面的工做没有作完，后面会阻塞 好比jq库的加载 false 后续的内容须要前面挂钩，

表单 数据提交

action: 数据提交的地址，默认的当前页面
method: 数据提交的方式，默认get方式

• get
  把数据名称和数据值用=链接，若是有多个数据，会用&进行链接，而后把数据放到url?后面
  不要经过get传递过多的数据，数据多少根据各个浏览器决定

• post
  数据在请求头，发送数据是串联形式，可是位置不同，理论上没有限制
  enctype: 提交的数据格式，默认application/x-www-form-urlencoded
  须要在表格中 method="post"

get请求和post通常用于何种需求

get 方式的历史记录会被记录，影响用户隐私，不太安全，只能传字符串

post 经过请求头，能够用于多种数据类型

数据的获取

怎么获得ajax 返回的数据

xhr.responseText: 返回的数据会放在这个属性，类型是字符串类型

readyState: ajax工做状态 0 1 2 3 4

• 0 初始化
• 1 调用xhr.send()
• 2 载入完成，请求已经发送，收到响应内容
• 3 解析 正在解析内容
• 4 解析完成

onreadychange 当状态值改变的时候触发

xhr.onreadystatechange = function() {
  if(xhr.readyState = 4) {
      // code
  }
}

请求资源的时候，服务器会返回一个状态值

• 1 表明消息
• 2 成功类型
• 3 重定向 调到其余页面，缓存就是一种重定向
• 4 错误
• 5 服务器性错误

能够作更好的容错处理

xhr.onreadystatechange = function() {
  if(xhr.readyState = 4) {
      if(xhr.status === 200) {
          // 请求正确
      } else {
          alert('error'); 
      }
  }
}

请求的处理

• get 请求文件，传输数据

var oBtn = document.getElementById('btn');

oBtn.onclick = function () {
    var xhr = new XMLHttpRequest();
    xhr.open('get','form.get.php?username=may&age=30',true);
    xhr.send();

    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if (xhr.status === 200) {
                alert(xhr.responseText)
            } else {
                alert('error')
            }
        }
    }
}

注意：

1 若是不想存在缓存问题 能够给请求后面加随机数或者时间戳

xhr.open('get','form.get.php?username=may&age=30&' + new Date(),true);

2 中文乱码问题，能够用编码 encodeURI

xhr.open('get','form.get.php?username='+encodeURI('文件') +'&age=30&' + new Date(),true);

• post 方式请求文件

数据做为参数放在send方法里面，而且设置请求头

var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'form.post.php', true);

    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 须要告诉后端发送数据的类型
    xhr.send('username=may&age=30');

    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status = 200) {
                alert(xhr.responseText);
            }
        }
    }   
}

post没有缓存问题，它自己就是提交数据
post没有转码的问题

数据获取的问题

• JSON.stringify(arr): 能够把一个对象转成对应字符串
• JSON.parse(str); key值必须是双引号才能够转为json

var oBtn = document.getElementById('btn');
var oul = document.getElementById('ul');

oBtn.onclick = function () {
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'getNew.php', true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '<li><a href="">' + data[i].title + '</a><span>' + data[i].date+ '</span></li>'
                }

                oul.innerHTML = html;
            }
        }
    }
}

瀑布流展现demo

瀑布流布局需求

• 每次最短的li,而后添加位置
• 须要知道图片的高度，不然图片加载尚未加载完成，就会自动计算那一列最短而去添加。能够有两种解决方案
• 拉到最底下加载

计算最短的li的高度 + top值 < 可视区的高度 + 滚动条的高度 document.documentElement.scrollTop || document.body.scrollTop

• 往下拉， 不单单加载一次，可能会触发 第二页 第三页，能够设置个标识位

数据加载完的时候

应该对每次取到的数据进行判断，若是没有数据， return 出去

后端传值宽高 若是宽度肯定 200 高度就是

element.height * (200/element.width)

document.createElement('li');

• 预加载

跨域解决

一个域名的文件去请求和它不同的域名下的资源文件，就会产生跨域请求

浏览器由于安全问题不容许跨域请求，能够采用

• 经过本地代理 本地创建一个代理，这个代理请求服务器，须要资源的时候，在请求服务器
• 经过flash flash请求资源，服务器端有xml文件，里面存一些资源域名，若是能找到容许你访问
• 经过jsonp （json with Padding）

从另外的域名，把资源拿取过来

1. script标签， 能够加载.js之外的文件类型吗？文件的后缀名是辨识的不是文件类型决定， 跟根据文件里面的实质内容。只认内容，不认文件名字
2. 用script标签加载资源没有跨域问题

在资源加载进来以前定义好一个函数，这个函数接收一个参数（数据），函数利用这个参数作一些事情
而后须要的时候经过script标签加载对应远程文件资源，当远程的问价资源被加载进来的时候，就会去执行咱们前面定义好的函数，而且把数据当作这个函数的参数传入进来

若是想实现按需加载，好比当用户点击的时候？

当用户点击的时候建立 script 标签，加载到 body标签后面，从而实现按需加载