如何使用javascript和XMLHttpRequest生成div_Javascript_Css

如何使用javascript和XMLHttpRequest生成div

javascript css

如何使用javascript和XMLHttpRequest生成div,javascript,css,Javascript,Css,我目前正在学习javascript，并尝试基于xml文件创建div XML文件-我意识到信息不正确（年）独立日 2003 75 土拨鼠日 1998 80 然后我尝试生成一个html文件，在这里我可以用css格式化div 带JS的html <html> <style type="text/css"> p { font-size: 14px; } div { border: 1px black solid; width: 100px;

我目前正在学习javascript，并尝试基于xml文件创建div

XML文件-我意识到信息不正确（年）


独立日
2003
75
土拨鼠日
1998
80

然后我尝试生成一个html文件，在这里我可以用css格式化div

带JS的html

<html>
    <style type="text/css">
p {
    font-size: 14px;
}

div {
    border: 1px black solid;
    width: 100px;
    height: 100px;  
    position: relative;
    float: left;
}

</style>

 <body>

 <script>
 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","movies.xml",false);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML; 


 var x=xmlDoc.getElementsByTagName("Movie");
 for (i=0;i<x.length;i++)
   { 
   document.write("<div><p>");
   document.write(x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue);
   document.write("</p><p>");
   document.write(x[i].getElementsByTagName("Year")[0].childNodes[0].nodeValue);
   document.write("</p><p>");
   document.write(x[i].getElementsByTagName("Rating")[0].childNodes[0].nodeValue);
   document.write("</p></div");
   }

 </script>

 </body>
 </html>


p{
字体大小：14px；
}
div{
边框：1px黑色实心；
宽度：100px；
高度：100px；
位置：相对位置；
浮动：左；
}
xmlhttp=新的XMLHttpRequest（）；
open（“GET”，“movies.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var x=xmlDoc.getElementsByTagName（“电影”）；
对于（i=0；i不确定这是否是您的帖子或实际代码中的错误，但您缺少上一个div
的结尾
。这很可能是导致问题的原因…
不确定这是否是您的帖子或实际代码中的错误，但您缺少上一个div
的结尾这很可能是导致问题的原因…< P/> < P>既然你想学习东西，我注意到你应该考虑的一些要点。
你写的风格看起来很老派，你应该改进以下几点：

使用JSON而不是XML。此协议比XML更轻量级，并且更好地由Javascript处理
不要使用同步Ajax调用
不要使用文档写入，直接创建元素，然后插入它们

我的示例不包括ajax请求，您可以查看如何正确完成
// the important stuff of your async ajax call:

xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      writeYourResultToTheDocument(xhr.responseText);
    } else {
      console.error("An error occured!" + xhr.statusText);
    }
  }
};


function writeYourResultToTheDocument(response){

/* This code should is called when your request is complete */

// this is how it would look like in real:
// var movies = JSON.decode(response);
// since I don't do a real request, I take a "fake" result:
var movies =  [
        {   "Title" : "Independence Day",
            "Year": 2003,
            "Rating":75
        },
        {
            "Title":"GroundHog Day",
            "Year":1998,
            "Rating":80
        } 
    ];

 // Create Container Element for all movies
var container = document.createElement("div");

// declare every variable you use with "var" to *not* 
// create a global variable accidently
var movie,node;

// iterate over the result
for (var i = 0;i < movies.length;i++){
    //create a div for each movie
    movie = document.createElement("div");
    // insert all information
    for(el in movies[i]){
        node = document.createElement("p");
        node.innerHTML = el + " : " +movies[i][el];
        console.log(node);
        movie.appendChild(node);
    }
    container.appendChild(movie);
}
// finally, append the container to your document
document.body.appendChild(container);

}

//异步ajax调用的重要内容：
xhr.onload=函数（e）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
将结果写入文档（xhr.responseText）；
}否则{
console.error（“发生错误！”+xhr.statusText）；
}
}
};
函数将结果写入文档（响应）{
/*当您的请求完成时，应调用此代码*/
//这就是现实中的情况：
//var movies=JSON.decode（响应）；
//因为我没有做真正的请求，所以我接受了一个“假”结果：
var电影=[
{“标题”：“独立日”，
“年份”：2003年，
“评级”：75
},
{
“标题”：“土拨鼠日”，
“年份”：1998年，
“评级”：80
} 
];
//为所有电影创建容器元素
var container=document.createElement（“div”）；
//将与“var”一起使用的每个变量声明为*not*
//意外地创建了一个全局变量
var电影，节点；
//迭代结果
for（var i=0；i

<>和它是如何工作的： 既然你想学习东西，我注意到你应该考虑的一些要点。
你写的风格看起来很老派，你应该改进以下几点：

使用JSON而不是XML。此协议比XML更轻量级，并且更好地由Javascript处理
不要使用同步Ajax调用
不要使用文档写入，直接创建元素，然后插入它们

我的示例不包括ajax请求，您可以查看如何正确完成
// the important stuff of your async ajax call:

xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      writeYourResultToTheDocument(xhr.responseText);
    } else {
      console.error("An error occured!" + xhr.statusText);
    }
  }
};


function writeYourResultToTheDocument(response){

/* This code should is called when your request is complete */

// this is how it would look like in real:
// var movies = JSON.decode(response);
// since I don't do a real request, I take a "fake" result:
var movies =  [
        {   "Title" : "Independence Day",
            "Year": 2003,
            "Rating":75
        },
        {
            "Title":"GroundHog Day",
            "Year":1998,
            "Rating":80
        } 
    ];

 // Create Container Element for all movies
var container = document.createElement("div");

// declare every variable you use with "var" to *not* 
// create a global variable accidently
var movie,node;

// iterate over the result
for (var i = 0;i < movies.length;i++){
    //create a div for each movie
    movie = document.createElement("div");
    // insert all information
    for(el in movies[i]){
        node = document.createElement("p");
        node.innerHTML = el + " : " +movies[i][el];
        console.log(node);
        movie.appendChild(node);
    }
    container.appendChild(movie);
}
// finally, append the container to your document
document.body.appendChild(container);

}

//异步ajax调用的重要内容：
xhr.onload=函数（e）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
将结果写入文档（xhr.responseText）；
}否则{
console.error（“发生错误！”+xhr.statusText）；
}
}
};
函数将结果写入文档（响应）{
/*当您的请求完成时，应调用此代码*/
//这就是现实中的情况：
//var movies=JSON.decode（响应）；
//因为我没有做真正的请求，所以我接受了一个“假”结果：
var电影=[
{“标题”：“独立日”，
“年份”：2003年，
“评级”：75
},
{
“标题”：“土拨鼠日”，
“年份”：1998年，
“评级”：80
} 
];
//为所有电影创建容器元素
var container=document.createElement（“div”）；
//将与“var”一起使用的每个变量声明为*not*
//意外地创建了一个全局变量
var电影，节点；
//迭代结果
for（var i=0；i

下面是它的工作原理：
使用document.createElement（'div'）
来创建元素并将子元素附加到主体中
var newDiv = document.createElement('div');
document.body.appendChild(newDiv);

还有一个小例子：
以下是一些文本内容的相同示例：
var Text = "Hello fine sir!"
var newDiv = document.createElement('div'); 
newDiv.appendChild(document.createTextNode(Text));
document.body.appendChild(newDiv);

请参见此操作：
使用document.createElement（'div'）
创建元素并将子元素附加到正文中
var newDiv = document.createElement('div');
document.body.appendChild(newDiv);

还有一个小例子：
以下是一些文本内容的相同示例：
var Text = "Hello fine sir!"
var newDiv = document.createElement('div'); 
newDiv.appendChild(document.createTextNode(Text));
document.body.appendChild(newDiv);

在行动中看到这一点：
谢谢德莱顿，总是最简单的事情，我必须等11分钟才能给你答案