Uncaught SyntaxError：予期しないトークン<VM3419：1

Question

私はAJAX技術を使ってデモを作成しています。私のプロジェクトでは、AJAXメソッドを使用してサーバーからデータを取得します。しかし、私はこのエラーを取得する：

" Uncaught SyntaxError: Unexpected token< xhr.onreadystatechange @main.js"

JS：

(function(){ 
 
\t var xhr = null; 
 
\t if(window.ActiveXObject){ 
 
\t \t xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
 
\t } 
 
\t else{ 
 
\t \t xhr = new XMLHttpRequest(); 
 
\t } 
 

 
\t xhr.open("GET","data/stuInfo.php",true); 
 
\t xhr.send(); 
 

 
\t xhr.onreadystatechange = function(){ 
 
\t \t if(xhr.readyState == 4){ 
 
\t \t \t if(xhr.status == 200){ 
 
\t \t \t \t var HTML = ""; 
 
\t \t \t \t 
 
\t \t \t \t var data = eval("("+xhr.responseText + ")"); 
 
\t \t \t \t 
 
\t \t \t \t for(var i =0;i<data.length;i++){ 
 
\t \t \t \t \t HTML += "<li><span>"+data[i].Code+"</span>"; 
 
\t \t \t \t \t HTML += "<span>"+data[i].Name+"</span>"; 
 
\t \t \t \t \t HTML += "<span>"+data[i].Score+"</span></li>"; 
 
\t \t \t \t } 
 
\t \t \t \t document.getElementByID("stuInfo").innerHTML = HTML; 
 
\t \t \t } 
 
\t \t } 
 
\t }; 
 

 
\t 
 
})();

PHP：

<?php 
 
\t header("Content-type:text/json"); 
 
\t $stulist = array(
 
\t \t array("Code" => "10101", "Name" => "刘真真", "Score" => "530"), 
 
\t \t array("Code" => "10102", "Name" => "张明基", "Score" => "460"), 
 
\t \t array("Code" => "10103", "Name" => "舒虎", "Score" => "660"), 
 
\t \t array("Code" => "10104", "Name" => "周小敏", "Score" => "500"), 
 
\t \t array("Code" => "10105", "Name" => "陆明明", "Score" => "300") 
 
\t); 
 
?>

ここ

Answer 1

変更するカップルの事です：

1. PHPコードは$stulistで何もしていないことが表示されます。下記の更新例のように、echoまたはprintにJSON形式のデータを使用してみてください。
2. レスポンステキストにeval()を使用する代わりに、var data = JSON.parse(xhr.responseText)というを使用することができます（content-typeのヘッダーは `test/json '）。以下の2番目のコードスニペットを参照してください。
3. への呼び出しには、関数名の末尾に小文字のdではなく、大文字のDがあります。エラーを回避するには、小文字のdに変更します。

PHP：

<?php 
header("Content-type:text/json"); 
$stulist = array(
    array("Code" => "10101", "Name" => "刘真真", "Score" => "530"), 
    array("Code" => "10102", "Name" => "张明基", "Score" => "460"), 
    array("Code" => "10103", "Name" => "舒虎", "Score" => "660"), 
    array("Code" => "10104", "Name" => "周小敏", "Score" => "500"), 
array("Code" => "10105", "Name" => "陆明明", "Score" => "300") 
); 
echo json_encode($stulist); 
?> 

JS：

(function(){ 
 
\t var xhr = null; 
 
\t if(window.ActiveXObject){ 
 
\t \t xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
 
\t } 
 
\t else{ 
 
\t \t xhr = new XMLHttpRequest(); 
 
\t } 
 
     //sample API request to get sample data in JSON format - replace the second parameter with your endpoint "data/stuInfo.php" 
 
    \t xhr.open("GET","http://elliott.andrewz.org/data/stuInfo.php",true); 
 
\t xhr.send(); 
 

 
\t xhr.onreadystatechange = function(){ 
 
\t \t if(xhr.readyState == 4){ 
 
\t \t \t if(xhr.status == 200){ 
 
\t \t \t \t var HTML = ""; 
 
\t \t \t \t 
 
\t \t \t \t //use JSON.parse here instead of eval() 
 
\t \t \t \t var data = JSON.parse(xhr.responseText); 
 
\t \t \t \t //reveal what that data object is: 
 
\t \t \t \t console.log('data: ',data); 
 
       
 
\t \t \t \t for(var i =0;i<data.length;i++){ 
 
\t \t \t \t \t HTML += "<li><span>"+data[i].Code+"</span>"; 
 
\t \t \t \t \t HTML += "<span>"+data[i].Name+"</span>"; 
 
\t \t \t \t \t HTML += "<span>"+data[i].Score+"</span></li>"; 
 
\t \t \t \t } 
 
\t \t \t \t document.getElementById("stuInfo").innerHTML = HTML; 
 
\t \t \t } 
 
\t \t } 
 
\t }; 
 

 
\t 
 
})();

更新

コメントには、まだエラーが表示されていることが記載されています。ブラウザのコンソールの[ネットワーク]タブを使用してAJAXリクエストを見て、レスポンスコードと本文が何かを確認しようとしましたか？下のスクリーンショットでは、私は（私はF12またはCTRL +SHIFT +を押すことで開くことができます）GoogleのChromeでこのシナリオでは、AJAX要求を検査しています。 Mozilla Firefox、Safari、IE/Edgeの最新バージョンには、同様のコンソールがあります。私はXHRリクエストにフィルタをかけ、response codeが200であることを確認します。別の番号（400,400など）が表示される場合は、ファイルまたはコードを見つける際にエラーが発生する可能性があります。