- loan balance 借款余額
// Encode the user's input as query parameters in a URL
var url = "getLenders.php" + // Service url plus
"?amt=" + encodeURIComponent(amount) + // user data in query string
"&apr=" + encodeURIComponent(apr) +
"&yrs=" + encodeURIComponent(years) +
"&zip=" + encodeURIComponent(zipcode);
//使用XMLHttpRequest對(duì)象獲取URL中的內(nèi)容
var req = new XMLHttpRequest(); // Begin a new request
XMLHttpRequest
XMLHttpRequest 是一個(gè) API，它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。它提供了一個(gè)通過 URL 來獲取數(shù)據(jù)的簡單方式，并且不會(huì)使整個(gè)頁面刷新。這使得網(wǎng)頁只更新一部分頁面而不會(huì)打擾到用戶。XMLHttpRequest 在 AJAX 中被大量使用。
雖然名字含有XML ，但該對(duì)象可以接受任何數(shù)據(jù)類型而不僅僅為XML，而且它支持的協(xié)議類型不限于HTTP（包括file,ftp）
如果你的連接涉及從服務(wù)器接收事件或者數(shù)據(jù)，可以考慮采用通過 EventSource接口使用 server-sent events 服務(wù)器事件。至于全雙工通信，使用WebSockets 是一個(gè)更好的選擇。
req.open("GET", url); // An HTTP GET request for the url
req.send(null); // Send the request with no body
// Before returning, register an event handler function that will be called
在返回值之前，注冊(cè)事件句柄
// at some later time when the HTTP server's response arrives. This kind of
會(huì)在之后調(diào)用 當(dāng)HTTP 服務(wù)器 響應(yīng)到達(dá)
// asynchronous programming is very common in client-side JavaScript.
這種異步的 編程 在 客戶端 JS非常普遍。
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
// If we get here, we got a complete valid HTTP response
如果執(zhí)行到這里，我們獲得了完全有效的 HTTP 響應(yīng)
var response = req.responseText; // HTTP response as a string
var lenders = JSON.parse(response); // Parse it to a JS array
// Convert the array of lender objects to a string of HTML
把借款對(duì)象數(shù)組 轉(zhuǎn)換 為 HTML字符串
var list = "";
for(var i = 0; i < lenders.length; i++) {
list += "<li><a href='" + lenders[i].url + "'>" +
lenders[i].name + "</a>";
}
// Display the HTML in the element from above.
把上面的HTML元素在網(wǎng)頁中顯示出來
ad.innerHTML = "<ul>" + list + "</ul>";
}
}
}
// Chart monthly loan balance, interest and equity in an HTML <canvas> element.
在<canvas> 畫布中繪制 月貸款余額、利息和股本 表格
// If called with no arguments then just erase any previously drawn chart.
如果不傳入任何參數(shù)，相當(dāng)于清空畫布上之前所畫的表格
function chart(principal, interest, monthly, payments) {
var graph = document.getElementById("graph"); // Get the <canvas> tag
使用js在canvas中繪圖之前得獲取canvas
graph.width = graph.width; // Magic to clear and reset the canvas element
設(shè)置畫布得寬度
// If we're called with no arguments, or if this browser does not support
如果不傳入任何參數(shù)，或者瀏覽器不支持canvas 則返回
// graphics in a <canvas> element, then just return now.
if (arguments.length == 0 || !graph.getContext) return;
// Get the "context" object for the <canvas> that defines the drawing API
獲取繪圖得 上下文對(duì)象，其中定義了繪圖API
var g = graph.getContext("2d"); // All drawing is done with this object
所有得繪圖工作都是這個(gè)對(duì)象完成得
var width = graph.width, height = graph.height; // Get canvas size
獲取canvas得寬度
// These functions convert payment numbers and dollar amounts to pixels
這些函數(shù) 把 支付額度 和 額 轉(zhuǎn)換為圖形（像素）
function paymentToX(n) { return n * width/payments; }
function amountToY(a) { return height-(a * height/(monthly*payments*1.05));}
// Payments are a straight line from (0,0) to (payments, monthly*payments)
g.moveTo(paymentToX(0), amountToY(0)); // Start at lower left
從左下角開始
g.lineTo(paymentToX(payments), // Draw to upper right
畫到右上角
amountToY(monthly*payments));
