1、html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
点击按钮，显示对应内容
<hr>
<input type="button" value="发送" name="btn1" id="btn1">
<div id="div1"></div>
<script>
document.querySelector("#btn1").onclick=function(){
// 第一步：创建一个XMLHttpRequet对象
var xmlhttp = new XMLHttpRequest()
// 第二步:告诉浏览器请求的方式是什么,以及请求发送到哪儿
// xmlhttp.open("get","url",true)
xmlhttp.open("get","http://127.0.0.1:8090",true)
// 第三步:设置相应服务器端数据处理
xmlhttp.onreadystatechange=function(){
// 做数据处理
document.querySelector("#div1").innerHTML = xmlhttp.responseText
}
// 第四步:发送请求
xmlhttp.send()
}
</script>
</body>
</html>js文件：
var http = require("http");
http.createServer(function(req, res) {
//实现跨域
res.writeHead(200, { "Access-Control-Allow-Origin": "*" });
res.write("<head><meta charset='utf-8'/></head>");
res.write("第一个web服务器");
res.write("<h1>Hello Ajax</h1>");
res.end();
}).listen(8090);2、
student.json文件:
[{
"stuID": "1001",
"stuName": "张三",
"stuAge": 20
}, {
"stuID": "1002",
"stuName": "李四",
"stuAge": 19
}, {
"stuID": "1003",
"stuName": "李梅",
"stuAge": 21
}, {
"stuID": "1004",
"stuName": "Rose",
"stuAge": 19
}, {
"stuID": "1005",
"stuName": "Tom",
"stuAge": 20
}]
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
点击按钮，显示对应内容
<hr>
<input type="button" value="发送" name="btn1" id="btn1">
<div id="div1"></div>
<script>
document.querySelector("#btn1").onclick=function(){
// 第一步：创建一个XMLHttpRequet对象
var xmlhttp = new XMLHttpRequest()
// 第二步:告诉浏览器请求的方式是什么,以及请求发送到哪儿
xmlhttp.open("get","data/student.json",true)
// 第三步:设置相应服务器端数据处理
xmlhttp.onreadystatechange=function(){
//做数据处理
//需要将json字符串转换成js对象，JSON.parse()实现反序列化
var students = JSON.parse( xmlhttp.responseText)
console.log(students[0].stuID)
var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
for(var i = 0;i<students.length;i++){
var stuid = students[i].stuID
var stuname = students[i].stuName
var stuage = students[i].stuAge
table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
}
table += "</table>"
document.querySelector("#div1").innerHTML = table
}
// 第四步:发送请求
xmlhttp.send()
}
</script>
</body>
</html>3、
data.json文件:
[
{
"img":"img/img_1.jpg",
"title":"免烫高支棉衬衫",
"price":"120"
},
{
"img":"img/img_2.jpg",
"title":"免烫高支棉衬衫",
"price":"130"
},
{
"img":"img/img_3.jpg",
"title":"免烫高支棉衬衫",
"price":"120"
},
{
"img":"img/img_4.jpg",
"title":"免烫高支棉衬衫",
"price":"160"
}
]
html:第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
<style>
a{
margin-top: 20px;
display: block;
text-decoration: none;
width: 220px;
}
img{
width: 100px;
}
span{
color: red;
}
p{
float: right;
margin-top: 30px;
}
</style>
</head>
<body>
点击按钮，显示对应内容
<hr>
<input type="button" value="发送" name="btn1" id="btn1">
<div id="div1"></div>
<script>
//第一种
document.querySelector("#btn1").onclick=function(){
// 第一步：创建一个XMLHttpRequet对象
var xmlhttp = new XMLHttpRequest()
// 第二步:告诉浏览器请求的方式是什么,以及请求发送到哪儿
xmlhttp.open("get","data.json",true) //json文件位置
// 第三步:设置相应服务器端数据处理
xmlhttp.onreadystatechange=function(){
//做数据处理
//需要将json字符串转换成js对象，JSON.parse()实现反序列化
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var goods = JSON.parse(xmlhttp.responseText)
console.log(goods[0].img)
var a = ""
for(var i = 0;i<goods.length;i++){
a += "<a><img src='" + goods[i].img + "'/><p>"+ goods[i].title + "<br>价格：<span>" + goods[i].price + "</span></p></a>"
}
document.querySelector("#div1").innerHTML = a
}
}
// 第四步:发送请求
xmlhttp.send()
}
</script>
</body>
</html>第二种：
<script>
$(function() {
$("#btn").click(function() {
$.get("xml/data.json", function(data) {
// console.log(data)
var img = ''
for (var i = 0; i < data.length; i++) {
// img += "<img src=" + data[i].img + ">" + "<p>" + data[i].title + "</p>" + "<br>" + "<p>" + "价格：" + data[i].price + "</p>"
img += "<img src=" + data[i].img + "><p><span>" + data[i].title + "</span><br><span>" + data[i].price + "</span></p><br>"
}
$("div").html(img)
})
})
})
</script>