原生Ajax(xhr)深刻理解

　　　　　　　　Ajax 　　Asynchronous JavaScript and XML　異步的JavaScript和XML

 

　　ajax經過與後臺服務器進行少許的數據交換，ajax可使頁面實現異步更新，即不須要從新加載整個頁面

 

1.建立XMLHttpRequest對象

　　全部現代瀏覽器

var xhr = new XMLhttpRequest();

　　老版本的 ie

var xhr = new ActiveXObect("Micrsoft.XMLHTTP");

2.向服務器發送請求

xhr.open(method,url,async)    //method 可選 GET / POST
                          //url  文件在服務器上的位置
                          //async true（異步）,false(同步)

 

xhr.send(string)    //僅適用於POST請求    將請求發送到服務器

 

GET與POST優缺點

與POST相比GET更簡單，更快，而且大部分狀況都能用

然而 如下狀況中要用POST請求

    ·沒法使用緩存文件（更新服務器上的文件或數據庫）
    ·向服務器發送大量數據（POST沒有數據量限制）
    ·發送包含位置字符的用於輸入時 POST 比GET跟穩定
　　 .get參數在url中展現，利於分享、收藏 

簡單的GET請求　ajax是在服務器端的請求 因此本地模擬一個　

　　我使用的是node　　切換到本地對應目錄

$ npm install --global http-server　　//node包管理工具下載

$ http-server　　　　　　　　　　//運行http-server

服務器掛起了

html

  <span>你好</span>
  <button onclick="lodMessage()">change</button>

js

      var lodMessage = () => {
        console.log('發送請求');
        var xhr = new XMLHttpRequest();
        console.log(xhr.readyState);
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState);
          console.log(xhr.status);
          if (xhr.readyState == 4 && xhr.status <=200 && xhr.status <= 300 || xhr == 304) {
            document.getElementsByTagName('span')[0].innerHTML = xhr.responseText;
          }
          
        }
        xhr.open('GET', 'http://127.0.0.1:8080/demo.php', true);
        xhr.send();
      }

demo.php

<?php
  echo 'changed';
?>

 

這樣打開本地的 localhost:8080/01-get.html　　便可   點擊按鈕 就能夠顯示在 demo.php裏面請求回來的數據

 點擊前

點擊後

 

 

當我改變demo.php裏的內容

 

<?php
  echo 'changedededededed';
?>

 

 

再次刷新頁面後再次點擊 button 發送請求  指望獲得改變後的demo.php的值　　

　　

然而並無的到更新後的數據　　（這種狀況 不是每次都會碰到  ，  可是的確碰到了）

 

這是由於  兩次請求，瀏覽器將數據緩存下來了

 　　

解決辦法　(讓請求不同)　

　　改變 xhr.open 　給url加一個惟一的id

 

這樣 瀏覽器就不會使用緩存的數據 

 

GET時傳一些數據

　　

 

POST請求

　　更換open方法的method

xhr.open('POST','http://127.0.0.1:8080/demo.php',true)

　　添加請求頭規定想要發送的數據類型

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

　　http的content-type還有好多種  http://tool.oschina.net/commons

　　send方法中添加數據

xhr.send('name=weibin&age=12');

 

xhr.status與xhr.readyState的值以及其意義

//xhr.status
1**　　　　　　　　  消息
2**        　　    訪問成功
3**               重定向  　　301永久重定向　　302臨時重定向　　304重定向到磁盤（緩存）
4**               客戶端錯誤
500               服務端錯誤
502               錯誤的訪問
503               服務器不可用
6++　　　　　　　　　自行拓展

//xhr.readyState

0    請求未初始化
1    服務器連接簡歷
2    發送send請求
3    內容下載
4    完成

ajax 默認是不能請求跨域的資源的 　　

　　　　請求跨域資源的方法 　　關於jsonp (基本用不到)     

 　　　　http默認是容許跨域訪問的，而咱們不能訪問是由於瀏覽器的限制，例如簡單的get、post方法使用curl中執行就是能夠得。

　　　　能夠經過修改http的請求頭中 white-head、content-type、method 等參數 實現多種ajax方法、頭、內容的跨域訪問。