Question

我在我的页面中创建了XHR，并从textarea中的php文件中获得了答案。因此，请回答不要从文本框的顶部显示，也不要从中心显示。我该怎么做才能从textarea的开头打印出答案？ My page with XHR here还有一个问题是XHR请求的速度。是否有可能为即时处理和响应创建类似的东西。例如，像谷歌翻译。

代码ajax.php

var _myColorOne = Colors.grey;
  var _myColorTwo = Colors.grey;
  var _myColorThree = Colors.grey;
  var _myColorFour = Colors.grey;
  var _myColorFive = Colors.grey;


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
     appBar: new AppBar(
       title: new Text("My Rating"),
     ),
      body:  new Center(
        child: new Container(
          height: 10.0,
          width: 500.0,
          child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new IconButton(icon: new Icon(Icons.star),
                  onPressed: ()=>setState((){
                    _myColorOne=Colors.orange;
                    _myColorTwo=null;
                    _myColorThree=null;
                    _myColorFour=null;
                    _myColorFive=null;
                }),color: _myColorOne,),
                new IconButton(icon: new Icon(Icons.star),
                  onPressed: ()=>setState((){
                    _myColorOne=Colors.orange;
                    _myColorTwo=Colors.orange;
                    _myColorThree=Colors.grey;
                    _myColorFour=Colors.grey;
                    _myColorFive=Colors.grey;
                }),color: _myColorTwo,),
                new IconButton(icon: new Icon(Icons.star), onPressed: ()=>setState((){
                  _myColorOne=Colors.orange;
                  _myColorTwo=Colors.orange;
                  _myColorThree=Colors.orange;
                  _myColorFour=Colors.grey;
                  _myColorFive=Colors.grey;
                }),color: _myColorThree,),
                new IconButton(icon: new Icon(Icons.star), onPressed: ()=>setState((){
                  _myColorOne=Colors.orange;
                  _myColorTwo=Colors.orange;
                  _myColorThree=Colors.orange;
                  _myColorFour=Colors.orange;
                  _myColorFive=Colors.grey;
                }),color: _myColorFour,),
                new IconButton(icon: new Icon(Icons.star), onPressed: ()=>setState((){
                  _myColorOne=Colors.orange;
                  _myColorTwo=Colors.orange;
                  _myColorThree=Colors.orange;
                  _myColorFour=Colors.orange;
                  _myColorFive=Colors.orange;
                }),color: _myColorFive,),
              ],

          ),
        ),
      ),
    );
  }

代码request.php

<!DOCTYPE html>
<html lang="en" class="js">
<head>
    <meta charset="UTF-8">
    <title>Translator</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />

    <!-- Style Sheets -->

        <?php require_once("../resources/views/template/stylesheets.php"); ?>

    <!-- Style Sheets -->

    <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
    <script>
    function response(str) {
        if (str.length == 0) { 
            document.getElementById("lang-output").innerHTML = "";
            return;
        } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("lang-output").innerHTML = this.responseText;
                }
            };

            var body = "request=" + encodeURIComponent(str);
            xmlhttp.open("POST", "request.php", true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.setRequestHeader("Content-Length", body.length);
            xmlhttp.setRequestHeader("Connection", "close");
            xmlhttp.send(body);
        }
    }

    </script>
</head>
<body>
    <!-- Loader -->

        <?php require_once("../resources/views/template/loader.php"); ?>

    <!-- Loader -->



    <!-- Main-Navigation -->



<?php require_once("../resources/views/template/AjaxMainNavigation.php"); ?>

    <!-- Main-Navigation -->



    <!-- Quick Translator -->

    <section id="quick-translator">
        <div class="container">
            <div class="row text-center">
                <h1 class="section-heading wow fadeInDown" data-wow-duration="0.5s">Дар матни Шумо хатогиҳо мавҷуд аст?</h1>
                <p class="section-desc wow fadeIn" data-wow-duration="0.5s">
                    Он гоҳ ба шумо онлайн сервиси MAHORAT.ORG кӯмаки зуддии худро расонида, матнотонро дуруст месозад. 
                </p>
                <div class="section-seperator">
                    <span></span>
                </div>
            </div>
            <div class="row">
                <div id="translator">
                    <form class="translation-form">
                        <div class="col-sm-6">

                            <div class="language-area">
                                <textarea onkeyup="response(this.value)" class="form-control wow fadeIn" data-wow-duration="0.5s" name="lang-input" id="lang-input" rows="10"></textarea>
                            </div>
                            <p class="upload-info wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.3s">
                                Матнро ворид намоед ё суроғаи веб-сомонаро нависед ё ин ки
                                <input type="file" name="file-1" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
                                <label for="file-1"><span title="Боркунии файли беруна">Боркунии файли беруна</span></label>
                            </p>
                        </div>

                        <div class="col-sm-6">

                            <div class="language-area">
                                <textarea valign="top" class="form-control wow fadeIn" data-wow-duration="0.5s" name="lang-output" id="lang-output" rows="10"></textarea>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Quick Translator -->

    <!-- CopyRight -->

        <?php require_once("../resources/views/template/copyright.php"); ?>

    <!-- CopyRight -->

    <!-- Scripts -->

        <?php require_once("../resources/views/template/scripts.php"); ?>

    <script src="http://diplom.loc/resources/views/template/assets/js/typed.js"></script>

    <script>
      document.addEventListener('DOMContentLoaded', function(){

          Typed.new('.incorrect', {
            strings: ["точики", "забони точики", "Точикистон", "Гайратчон", "Хаёт ба хар як шахс дар ин дунё як бор дода мешавад.","точики", "забони точики", "Точикистон", "Гайратчон", "Хаёт ба хар як шахс дар ин дунё як бор дода мешавад.","Мувафаккият барои шумо!"],
            typeSpeed: 230
          });

          Typed.new('.correct', {
            strings: ["тоҷикӣ", "забони тоҷикӣ", "Тоҷикистон", "Ғайратҷон", "Ҳаёт ба ҳар як шахс дар ин дунё як бор дода мешавад.","тоҷикӣ", "забони тоҷикӣ", "Тоҷикистон", "Ғайратҷон", "Ҳаёт ба ҳар як шахс дар ин дунё як бор дода мешавад.", "Мувафаққият барои шумо!"],
            typeSpeed: 250
          });""
      });      
    </script>

    <!-- Scripts -->

</body>
</html>

为什么在执行XMLHttpRequest时文本框的中心输出文本？

0 个答案: