2018-07-06

• 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);

encodeURIComponent()

//使用XMLHttpRequest对象获取URL中的内容
var req = new XMLHttpRequest(); // Begin a new request

XMLHttpRequest
XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

虽然名字含有XML ，但该对象可以接受任何数据类型而不仅仅为XML，而且它支持的协议类型不限于HTTP（包括file,ftp）

如果你的连接涉及从服务器接收事件或者数据，可以考虑采用通过 EventSource接口使用 server-sent events 服务器事件。至于全双工通信，使用WebSockets 是一个更好的选择。

req.open("GET", url); // An HTTP GET request for the url

XMLHttpRequest.open()

req.send(null); // Send the request with no body
// Before returning, register an event handler function that will be called
在返回值之前，注册事件句柄
// at some later time when the HTTP server's response arrives. This kind of
会在之后调用       当HTTP 服务器 响应到达
// 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
如果执行到这里，我们获得了完全有效的 HTTP 响应
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
把借款对象数组 转换 为 HTML字符串
var list = "";
for(var i = 0; i < lenders.length; i++) {
list += "
" +
lenders[i].name + "";
}
// Display the HTML in the element from above.
把上面的HTML元素在网页中显示出来
ad.innerHTML = "
" + list + "
";
}
}
}
// Chart monthly loan balance, interest and equity in an HTML  element.
在 画布中绘制 月贷款余额、利息和股本 表格
// If called with no arguments then just erase any previously drawn chart.
如果不传入任何参数，相当于清空画布上之前所画的表格
function chart(principal, interest, monthly, payments) {
var graph = document.getElementById("graph"); // Get the  tag
使用js在canvas中绘图之前得获取canvas
graph.width = graph.width; // Magic to clear and reset the canvas element
设置画布得宽度
// If we're called with no arguments, or if this browser does not support
如果不传入任何参数，或者浏览器不支持canvas 则返回
// graphics in a  element, then just return now.
if (arguments.length == 0 || !graph.getContext) return;
// Get the "context" object for the  that defines the drawing API
获取绘图得 上下文对象，其中定义了绘图API
var g = graph.getContext("2d"); // All drawing is done with this object
所有得绘图工作都是这个对象完成得
var width = graph.width, height = graph.height; // Get canvas size
获取canvas得宽度
// These functions convert payment numbers and dollar amounts to pixels
这些函数 把 支付额度 和 额 转换为图形（像素）
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));