Ajax相关练习题及请求数据分析

备注:下面的小练习仅供参考。

Ajax是能够在不刷新页面的情况下，让网页局部更新的技术。

使用Ajax请求数据分为三步：

1.创建对象

var xhr = new XMLHttpRequest();

2.发送请求

xhr.open("GET","hot.json(这里写与后台文件的路径)"，true);

3.等待响应，每次网络请求的状态代表都会调用这个方法

xhr.send();//因为我们是要获取数据，而不是提交数据，所以这里的send方法里面的数据为空。

4.执行完成之后，后台给前台返回一定格式的数据，此时需要判断xhr的执行状态，如下图：

注意：request(就是xhr).responseText就是后台返回给我们的数据，这里就相当于$.ajax()里面的success所对应的函数，所包含的参数data。

值得一提的是：上述图片的代码，就相当于xhr的onload事件，即上述代码用下图替换也是一样的：

那我们来总结一下小黄人的执行状态(数字代表各种状态)：

0：初始状态(请求未初始化)

1：创建连接(服务器连接已建立)

2：客户端向后台发送数据(请求已接收)

3：服务器开始返回数据(请求处理中)

4：客户端接受数据完毕(请求已完成，且响应已就绪)

关于ajax就先介绍到这里，接下来就是上代码：这里是一个小练习，用来实现点击图片，出现相应的电影介绍，数据来源都是后台。

CSS样式部分：

.wrap{

width: 620px;

/*height: 800px;*/

border: 1px solid black;

margin:0px auto;

float: left;

}

.title{

width: 618px;

height: 50px;

border: 1px solid yellow;

font-size: 32px;

color: red;

text-align: center;

text-shadow: 0 0 5px blue;

}

.box{

width: 200px;

height: 248px;

border: 1px solid green;

float: left;

margin-top: 10px;

position: relative;

}

.box:nth-of-type(3n){

margin-left: 3px;

margin-right: 3px;

}

.tits{

width: 200px;

position: absolute;

bottom: 0;

left: 0;

text-align: center;

}

.detail{

width: 520px;

border: 1px solid black;

background: rgba(0,0,0,0.8);

margin:0px auto;

position: relative;

left: 50px;

}

.fm{

width: 210px;

height: 300px;

border: 1px solid transparent;

float: left;

margin-top: 15px;

margin-left: 20px;

}

.jianjie{

width: 260px;

float: right;

border: 1px solid transparent;

margin-right: 20px;

margin-top: 15px;

height: 300px;

}

.jianjie p{

width: 250px;

height: 35px;

font-size: 17px;

padding-left: 10px;

box-sizing: border-box;

color: blue;

text-shadow: 0 0 3px white;

text-align: start;

border: 1px solid transparent;

line-height: 35px;

margin-top: 14px;

margin-left: auto;

margin-right: auto;

}

.scores{

width: 518px;

height: 40px;

border: 1px solid transparent;

margin: 15px auto;

float: left;

color: red;

text-shadow: 0 0 3px white;

text-align: start;

padding-left: 20px;

box-sizing: border-box;

line-height: 40px;

}

.yanyuan{

width: 518px;

height: 273px;

border: 1px solid cyan;

overflow-x: scroll;

overflow-y: hidden;

}

.scrolls{

width: 300%;

height: 258px;

}

.preserve{

width: 200px;

height: 250px;

float: left;

margin: 8px 5px;

}

.tu{

width: 198px;

height: 200px;

}

.mingzi{

width: 198px;

height: 30px;

text-align: center;

color: blue;

text-shadow: 0 0 3px white;

line-height: 30px;

font-size: 14px;

margin-top: 15px;

}

.btn{

width: 30px;

height: 30px;

background: orange;

position: absolute;

right: 0;

top: 0;

color: white;

text-align: center;

line-height: 24px;

font-size: 24px;

outline: none;

}

.whole{

width: 1160px;

border: 1px solid red;

}

.wrap,.detail{

float: left;

}

.whole_father{

width: 640px;

height: 800px;

overflow: auto;

margin-top: 50px;

}

body部分：

JS部分：

var title1 = document.getElementsByClassName("title")[0];

var wrap1 = document.getElementsByClassName("wrap")[0];

var detail1 = document.getElementsByClassName("detail1")[0];

var fm1 = document.getElementsByClassName("fm")[0];

var btn = document.getElementsByClassName("btn")[0];

console.log(wrap1);

var request = new XMLHttpRequest();

request.open("GET","hot.json",true);

request.send();

request.onreadystatechange = function(){

if(request.readyState ==4 && request.status ==200){

var obj = JSON.parse(request.responseText);

console.log(obj);

title1.innerHTML = obj.title;

var arr = [];

for (var i = 0; i < obj.subjects.length; i++) {

var ps = document.createElement("p");

ps.className = "box";

wrap1.appendChild(ps);

ps.style.background = "url("+obj.subjects[i].images.large+") 0 0/100% 85% no-repeat";

var tits1 = document.createElement("p");

tits1.className = "tits";

tits1.innerHTML = obj.subjects[i].title;

ps.appendChild(tits1);

arr.push(ps);

}

console.log(arr);

var names1 = document.getElementsByClassName("names")[0];

var man1 = document.getElementsByClassName("man")[0];

var years1 = document.getElementsByClassName("years")[0];

var bqian1 = document.getElementsByClassName("bqian")[0];

var looked1 = document.getElementsByClassName("looked")[0];

var scores1 = document.getElementsByClassName("scores")[0];

var scrolls1 = document.getElementsByClassName("scrolls")[0];

var detail1 = document.getElementsByClassName("detail")[0];

var whole1 = document.getElementsByClassName("whole")[0];

var whole_father = document.getElementsByClassName("whole_father")[0];

// 详情页

for (var i = 0; i < arr.length; i++) {

arr[i].index = i;

arr[i].onclick = function(){

whole1.style.transform = "translateX("+(-wrap1.offsetWidth)+"px)";

// detail1.offsetTop = parseInt(detail1.offsetTop+this.offsetTop)+"px";

console.log(detail1.offsetTop);

btn.onclick = function(){

whole1.style.transform = "translateX(0px)";

}

fm1.style.background = this.style.background;

fm1.style.backgroundSize = "100% 100%";

names1.innerHTML = obj.subjects[this.index].title;

man1.innerHTML = obj.subjects[this.index].original_title;

years1.innerHTML = "电影年份:"+obj.subjects[this.index].year;

bqian1.innerHTML = "标签:"+obj.subjects[this.index].genres.join("/");

looked1.innerHTML = obj.subjects[this.index].collect_count+"人看过";

scores1.innerHTML = "评分:"+obj.subjects[this.index].rating.average+"最高:"+obj.subjects[this.index].rating.max+"最低:"+obj.subjects[this.index].rating.min+"星级:"+obj.subjects[this.index].rating.stars;

scrolls1.innerHTML = null;

for (var i = 0; i < obj.subjects[this.index].directors.length; i++) {

var preserve1 = document.createElement("p");

preserve1.className = "preserve";

scrolls1.appendChild(preserve1);

var tu1 = document.createElement("p");

tu1.className = "tu";

preserve1.appendChild(tu1);

var mingzi1 = document.createElement("p");

mingzi1.className = "mingzi";

preserve1.appendChild(mingzi1);

tu1.style.background = "url("+obj.subjects[this.index].directors[i].avatars.large+") 0 0/100% 100% no-repeat";

console.log(preserve1);

mingzi1.innerHTML = "导演:"+obj.subjects[this.index].directors[i].name;

}

for (var i = 0; i < obj.subjects[this.index].casts.length; i++) {

var preserve2 = document.createElement("p");

preserve2.className = "preserve";

scrolls1.appendChild(preserve2);

var tu2 = document.createElement("p");

tu2.className = "tu";

preserve2.appendChild(tu2);

var mingzi2 = document.createElement("p");

mingzi2.className = "mingzi";

preserve2.appendChild(mingzi2);

tu2.style.background = "url("+obj.subjects[this.index].casts[i].avatars.large+") 0 0/100% 100% no-repeat";

mingzi2.innerHTML = "主演:"+obj.subjects[this.index].casts[i].name;

}

}

}

}

}