美文网首页
2018-07-06

2018-07-06

作者: 枫叶落尽 | 来源:发表于2018-07-06 23:38 被阅读0次
    • 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 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequestAJAX 中被大量使用。

    虽然名字含有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 += "<li><a href='" + lenders[i].url + "'>" +
    lenders[i].name + "</a>";
    }
    // Display the HTML in the element from above.
    把上面的HTML元素在网页中显示出来
    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.
    如果不传入任何参数,相当于清空画布上之前所画的表格
    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
    设置画布得宽度
    // If we're called with no arguments, or if this browser does not support
    如果不传入任何参数,或者浏览器不支持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
    获取绘图得 上下文对象,其中定义了绘图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));
    

    相关文章

      网友评论

          本文标题:2018-07-06

          本文链接:https://www.haomeiwen.com/subject/yqkiuftx.html