这个从数据库加载的巨大javascript数组会使我的网站崩溃吗?

这个从数据库加载的巨大javascript数组会使我的网站崩溃吗?,javascript,php,mysql,arrays,mysqli,Javascript,Php,Mysql,Arrays,Mysqli,因此,在我正在制作的这个网站上(谁知道我是否真的会完成它lol),当有人打开新的用户页面时,php将数据库中的所有用户名回送到javascript脚本中,以创建一个数组 <script type="text/javascript"> var allUsers = ['!' <?php $result = mysql_query("SELECT username FROM users ") or die("error " .mysql_erro

因此,在我正在制作的这个网站上(谁知道我是否真的会完成它lol),当有人打开新的用户页面时,php将数据库中的所有用户名回送到javascript脚本中,以创建一个数组

 <script type="text/javascript">
        var allUsers = ['!' <?php
        $result = mysql_query("SELECT username FROM users ")  or die("error " .mysql_error());
        $usersArray = array();
        while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $usersArray[] = $row['username'] or die("error ". mysql_error()); 
            }

            foreach ($usersArray as $name) {
                echo ',' . json_encode($name );
            }

         ?> , ];

变量allUsers=['!',];
这一点是要有一个实时检查程序,因此如果您键入一个已经存在的用户名,则用户名输入旁边会显示红色文本。但假设我有1000000个用户(完全是理论上的)。幸运的是,数组仅在网页加载开始时创建。但是,检查用户名是否已经存在于庞大的数组中,并且每次有人更改用户名输入中的文本时都会被调用的函数是否会对脚本施加过大压力,并导致网站崩溃?如果是这样,有没有更好的方法来完成我所描述的

下面是代码的其余部分

function contains(a, obj) {
   var i = a.length;
   while (i--) {
   if (a[i] === obj) {
   return true;
   }
   }
   return false;
   }


   function onUserChange() { //gets called onkeypress, onpaste, and oninput
               if(contains(allUsers, str)) {
               div.innerHTML = "Username already exists";
               div.style.color = "red";
               userValid = false;
               }
   }
   </script>
函数包含(a,obj){
var i=a.长度;
而(我--){
如果(a[i]==obj){
返回true;
}
}
返回false;
}
函数onUserChange(){//调用onkeypress、onpaste和oninput
if(包含(诱惑者、str)){
div.innerHTML=“用户名已存在”;
div.style.color=“红色”;
userValid=false;
}
}

沿着这些思路的东西。(使用jQuery和PDO)-注意-代码未经测试

var keyTimer, request;

$('namefield').blur(function(){
   onUserChange();
});


$('namefield').keyup(function(){
   onUserChange();
});

function onUserChange() { //gets called onkeypress, onblur
    keyTimer = setTimeout(function(){
        if(request && request.readystate != 4){
            //cancel a previous request if a new request is made.
            request.abort();
        }
         request = $.post(
                           'http://yoursite.com/location/of/username/script.php', //post data to server
                            {username : $('namefield').val()},
                            function(data){
                               if(data == 0 ) { //might be a string here
                                    alert( 'the name is ok to use.' );
                               }else{
                                   alert( 'someone has this name already.' );
                                }
                            }
                   );

     }, 500); //overwrite previous timeout if user hits key within 500 milliseconds
   }
然后在后端

    $sql = 'SELECT id FROM users WHERE username = :username'; 
    //insert from post username but we are good programers and are using PDO to prevent sql injection.
    //search for the username in the db, count the number of users or rows should be 1 someone has it 0 no one has it assuming its unique.
$stmt = $Pdo->prepare($sql);
$stmt->execute(array(':username', $_POST['username']));
echo $stmt->rowCount();
exit();

等等……

我可以看到,在加载网站时,您需要加载PHP代码。 首先,我建议您将代码分开。可以将Javascript与PHP混合使用并不意味着这是最佳实践

其次,是的,你的代码效率不高,因为你让Javascript加载结果,这样你就可以在下一步搜索它。我建议您在服务器端进行搜索,而不是在客户端进行搜索,因为正如您所说,如果您有100个元素,那么最好是加载所有内容并执行函数,但是如果您有1000000个元素,那么最好是离开服务器进行计算,这样它就可以使用SQL进行查询


第三,您可以使用Ajax、Javascript或类似于jQuery的框架来完成所有这些,这样您就不必担心Ajax的实现,而只需要担心您的主要任务。

不要这样做。我的建议是使用ajax加载php文件,该文件将生成一个查询,只询问输入中键入的用户,并只返回一个布尔值(exists=true/notexists=false)

代码示例:

HTML(yourFile.HTML):


jQuery(文档).ready(函数(){
//当输入更改中的值触发此ajax查询php文件时:
jQuery(“#inputUser”).change(函数(){
var输入=jQuery(this);
jQuery.ajax({
类型:“post”,
url:“path/to/file.php”,
数据:input.val(),
成功:功能(数据){
//如果php返回true,则添加一条红色错误消息
如果(数据==“1”){
input.after('此用户名已存在');
//如果php返回false,则添加一条绿色的成功消息
}否则如果(数据=“0”){
input.after('您可以使用此用户名');
}
}
});
});
});
PHP(path/to/file.PHP):


这似乎效率极低,并向任何想要破解您的脚本的人提供您所有用户名的列表(可能非常简单)。为什么不使用一个关于Blur或类似的请求,并在后端检查名称?最好将用户名发送到服务器(通过ajax),让服务器执行mysql查询,以查看用户名是否已被获取,并回复消息说wither or not it take。@PatrickEvans snap!每一秒都很重要…;-)与上面的内容相呼应,在客户端执行此操作是一个糟糕的想法。老实说,你甚至不应该给出用户名存在或不存在的指示,因为这是bas安全实践“10000在客户端推它,1000000是不合理的。这应该是一个评论。请你更新这个,适合现代的sql,即不能对其进行sql注入攻击的类型。
<script>
jQuery(document).ready(function(){
   //When the value inside the input changes fire this ajax querying the php file:
   jQuery("#inputUser").change(function(){
       var input = jQuery(this);
       jQuery.ajax({
          type:"post",
          url:"path/to/file.php",
          data:input.val(),
          success: function(data){
              //if php returns true, adds a red error message
              if(data == "1"){
                  input.after('<small style="color:#ff0000;">This username already exists</small>');
              //if php returns false, adds a green success message
              } else if(data == "0"){
                  input.after('<small style="color:#00ff00;">You can use this username</small>');
              }

          }
       });

   });
});
</script>
<input id="inputUser" type="text" name="username" value="">
<?php
$username = $_REQUEST['username']; // The value from the input
$res = mysqli_query("SELECT id FROM users WHERE username='".$username."'"); // asking only for the username inserted
$resArr = mysqli_fetch_array($res);

//verify if the result array from mysql query is empty.(if yes, returns false, else, returns true)
if(empty($resArr)){
    echo false;
} else{
    echo true;
}