學習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標籤後面，從而實現按需加載