<script>
//W3C標(biāo)準(zhǔn)
  var xhr = new XMLHttpRequest();
</script>

<script>
//早期IE瀏覽器
  var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP.5.0');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
</script>

<script>
    // 1、創(chuàng)建ajax對(duì)象
    var xhr = new XMLHttpRequest();
    // 2、建立http請(qǐng)求
    xhr.open('GET','test.php?a=1&b=2');
    // 3、發(fā)送請(qǐng)求到web服務(wù)器并接收響應(yīng)
    xhr.send();
</script>
<!-- get:適合從服務(wù)器獲取數(shù)據(jù) -->

<script>
    // 1、創(chuàng)建ajax對(duì)象
    var xhr = new XMLHttpRequest();
    // 2、建立http請(qǐng)求
    xhr.open('POST','test.php?a=1&b=2');
    // 3、請(qǐng)求頭內(nèi)指定實(shí)體內(nèi)容的編碼格式
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    // 4、發(fā)送請(qǐng)求到web服務(wù)器并接收響應(yīng)
    xhr.send('c=3&d=4');
</script>
<!-- POST:適合向服務(wù)器發(fā)生數(shù)據(jù) -->

<script>
  XMLHttpRequest.UNSENT;                    // 對(duì)應(yīng)狀態(tài)值0
  XMLHttpRequest.OPENED;                    // 對(duì)應(yīng)狀態(tài)值1
  XMLHttpRequest.HEADERS_RECEIVED;          // 對(duì)應(yīng)狀態(tài)值2
  XMLHttpRequest.LOADING;                   // 對(duì)應(yīng)狀態(tài)值3
  XMLHttpRequest.DONE;                      // 對(duì)應(yīng)狀態(tài)值4
</script>

<script>
    // 1、創(chuàng)建ajax對(duì)象
    var xhr = new XMLHttpRequest()
    console.log(xhr.readyState)//0
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState)//1,2,3,4
    }
    xhr.open('get','test.php')
    xhr.send()
</script>

<script>
    // 1、創(chuàng)建對(duì)象
    var xhr = new XMLHttpRequest();
    // 2、事件屬性
    xhr.onreadystatechange = function(){
        // xhr.readyState 獲取狀態(tài)值 1，2，3，4
        if(xhr.readyState === XMLHttpRequest.DONE){
            // status 響應(yīng)狀態(tài)碼
            if(xhr.status<200 || xhr.status>=300 && xhr.status !== 304){
                alert('服務(wù)器異常');
                return;
            }
            // xhr.responseText //Hello
            console.log(xhr.responseText)
            document.write('<h2>'+xhr.responseText+'</h2>')
        }
    }
    xhr.open('get','hello.php')
    xhr.send()
</script>

<script>
  var str = encodeURIComponent('A&B C');
  var url = 'http://xxx/test.php?name=' + str;
  console.log(url);                        // 輸出結(jié)果：http://xxx/test.php?name=A%26B%20C
</script>

<script>
  var str = 'A%26B%20C';
  console.log(decodeURIComponent(str));    // 輸出結(jié)果：A&B C
</script>

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === XMLHttpRequest.DONE){
            var data = xhr.responseXML;
            var booklist = data.getElementsByTagName('booklist')[0];//<booklist>...</booklist>
            console.log(booklist.childNodes)//[text\book\text]
            console.log(booklist.children)//[book]
            var book = booklist.children[0]//<book>...</book>
            console.log(book.children)//[name,author]
            console.log(book.children[0].innerHTML)//西游記
            console.log(book.children[0].firstChild)// '西游記'
            console.log(book.children[0].firstChild.wholeText)//西游記
        }
    }
    xhr.open('get','xml.php')
    xhr.send()
</script>

<script>
    var obj = {name:'Tom',age:21} //準(zhǔn)備要發(fā)生的數(shù)據(jù)
    var json = JSON.stringify(obj)//將obj對(duì)象轉(zhuǎn)換為json字符串
    var xhr = new XMLHttpRequest();//創(chuàng)建ajax對(duì)象
    xhr.open('post','json.php');//建立連接

    xhr.onreadystatechange = function(){
        if(xhr.readyState === XMLHttpRequest.DONE){
            console.log(typeof xhr.responseText)//查看服務(wù)器返回的數(shù)據(jù)類型：string
            var obj = JSON.parse(xhr.responseText)//將json字符串轉(zhuǎn)換為對(duì)象
            console.log(obj)
            // eval() 將傳入的字符串當(dāng)js代碼執(zhí)行
            eval("var obj="+xhr.responseText)//用eval函數(shù)將字符型轉(zhuǎn)換為對(duì)象
            console.log(obj.name)
            console.log(obj.age)
        }
    }
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send('json='+encodeURIComponent(json))//發(fā)送請(qǐng)求
</script>

<form id="form">
    姓名：<input type="text" name="name"><br>
    密碼：<input type="password" name="pass"><br>
    郵箱：<input type="text" name="email"><br>
    <input type="submit" value="提交">
</form>
<script>
    document.getElementById('form').onsubmit = function(){
        var fd = new FormData(this);
        // 1、創(chuàng)建ajax對(duì)象
        var xhr = new XMLHttpRequest()
        // 2、建立http請(qǐng)求
        xhr.open('post','test.php')
        // 3、發(fā)送請(qǐng)求
        xhr.send(fd)
        return false;//阻止表單默認(rèn)的提交操作
    }
</script>

<script>
    var fd = new FormData();
    fd.append('','')
</script>

<script>
  function xhr(options) {
    return new Promise(function(resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.open(options.type || 'GET', options.url);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            resolve(xhr.responseText);     // 成功時(shí)執(zhí)行的函數(shù)
          } else {
            reject('服務(wù)器發(fā)生錯(cuò)誤。');    // 失敗時(shí)執(zhí)行的函數(shù)
          }
        }
      };
      xhr.send(options.data);
    });
  }
  
  var fd = new FormData();
  fd.append('num', 100);
  
  xhr({url: 'test.php', type: 'POST', data: fd})
  .then(function(data) {
    console.log('請(qǐng)求成功：' + data);
  }, function(err) {
    console.log('請(qǐng)求失敗：' + err);
  });
  
  xhr({url: '1.txt', type: 'POST', data: fd})
  .then(function(data) {
    console.log('請(qǐng)求成功：' + data);
  })
  .catch(function(err) {
    console.log('發(fā)生異常：' + err);
  });
  
  xhr({url: 'test.php', type: 'POST', data: fd})
  .then(function(data) {
    console.log('第1次請(qǐng)求結(jié)果：' + data);
    return xhr({url: 'test.php', type: 'POST', data: fd});
  })
  .then(function(data) {
    console.log('第2次請(qǐng)求結(jié)果：' + data);
  })
  .catch(function(err) {
    console.log('發(fā)生異常：' + err);
  });
</script>

<script>
  // 創(chuàng)建WebSocket對(duì)象，連接服務(wù)器
  var ws = new WebSocket('ws://127.0.0.1:2000'); 
  // 當(dāng)連接成功時(shí)執(zhí)行的回調(diào)函數(shù)
  ws.onopen = function() { 
    console.log('連接成功');
    ws.send('Tom');
    console.log('向服務(wù)端發(fā)送一個(gè)字符串：Tom');
  };
  // 當(dāng)收到服務(wù)器消息時(shí)執(zhí)行的回調(diào)函數(shù)，event是事件對(duì)象
   ws.onmessage = function(event) {
     console.log('收到服務(wù)器消息：' + event.data);
   };
</script>

<?php
  // 載入Workerman
  use Workerman\Worker;
  require_once __DIR__ . '/workerman-for-win-master/Autoloader.php';
  // 創(chuàng)建一個(gè)Worker監(jiān)聽2000端口，使用WebSocket協(xié)議通訊
  $ws_worker = new Worker('websocket://127.0.0.1:2000');
  // 啟動(dòng)4個(gè)進(jìn)程對(duì)外提供服務(wù)
  $ws_worker->count = 4;
  // 當(dāng)收到客戶端發(fā)來的數(shù)據(jù)$data后返回給客戶端
  $ws_worker->onMessage = function($connection, $data) {
    // 向客戶端發(fā)送Hello $data
    $connection->send('Hello ' . $data);
  };
  // 運(yùn)行Worker
  Worker::runAll();

<script>
  var ws = new WebSocket('ws://127.0.0.1:2000');
  ws.onopen = function() {
    console.log('連接成功');
  };
  ws.onmessage = function(e) {
    console.log('收到服務(wù)器消息：' + e.data);
  };
</script>

<?php
  use Workerman\Worker;
  use Workerman\Lib\Timer;
  require_once __DIR__ . '/workerman-for-win-master/Autoloader.php';
  $worker = new Worker('websocket://127.0.0.1:2000');
  // 進(jìn)程啟動(dòng)時(shí)設(shè)置一個(gè)定時(shí)器，定時(shí)向所有客戶端連接發(fā)送數(shù)據(jù)
  $worker->onWorkerStart = function($worker) {
    // 每2秒一次，遍歷當(dāng)前進(jìn)程所有的客戶端連接，發(fā)送當(dāng)前服務(wù)器的時(shí)間
    Timer::add(2, function() use($worker) {
      foreach($worker->connections as $connection) {
        $connection->send(time());
      }
    });
  };
  Worker::runAll();