一、处理数据:
将一些数据发送到服务器并接收响应 【post请求】
<label>Your name: <input type="text" id="ajaxTextbox" /> </label> <span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> Make a request </span> //1、步骤 document.getElementById("ajaxButton").onclick = function() { var userName = document.getElementById("ajaxTextbox").value; // makeRequest('test.php',userName); }; //2、发送请求 function makeRequest(url, userName) { ... httpRequest.onreadystatechange = alertContents; //POST请求, httpRequest.open('POST', url); // httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //将数据作为参数 包含在对的调用中http...send() httpRequest.send('userName=' + encodeURIComponent(userName)); } //3、响应处理 function alertContents() { if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { // var response = JSON.parse(httpRequest.responseText); alert(response.computedString); } else { alert('There was a problem with the request.'); } } }
二、定时XHR例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>XHR log time</title> <style> </style> </head> <body> <p id="writeData" class="data">Off-Line</p> <p id="lastStamp">No Data yet</p> <script> const fullData = document.getElementById('writeData'); const lastData = document.getElementById('lastStamp'); function fetchData() { console.log('Fetching updated data.'); //1、发出请求 let xhr = new XMLHttpRequest(); // 2、发出实际请求 xhr.open("GET", "time-log.txt", true); // 3、 xhr.onload = function() { // updateDisplay(xhr.response); } xhr.send(); } function updateDisplay(text) { // fullData.textContent = text; // let timeArray = text.split(' '); // if(timeArray[timeArray.length-1] === '') { // timeArray.pop(); } // lastData.textContent = timeArray[timeArray.length-1]; } //电话每5秒重复一次 setInterval(fetchData, 5000); </script> </body> </html>