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請求　

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

$ 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) {
            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

200-300        訪問成功
304                請求沒有改變瀏覽器已經緩存下來了
404                文件不存在
500                服務器故障
502                錯誤的訪問
503                服務器不可用

//xhr.readyState

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

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

　　請求跨域資源的兩種方法　　1.jsonp　　2.使用 jquery封裝的ajax

Ajax深入理解