我理解的Ajax，与你相同吗？-优快云博客

本文介绍了Ajax技术的基本概念及其在网页局部更新中的应用，并通过一个具体的电影介绍案例展示了如何使用Ajax进行前后端交互，实现点击图片展示电影详情的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是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;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 div{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部分：（写个基本的框框就ok，反正是要动态生成元素的）

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();

<!--true为异步请求，可省略不写，默认的就是异步，false是同步，一般不用。-->
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循环遍历后台传过来的数据，放在对应的位置就好了-->
for (var i = 0; i < obj.subjects.length; i++) {
<!--注意：既然是要摆出点高级的东西（开个玩笑），元素自然是要动态生成的-->
var divs = document.createElement("div");

divs.className = "box";

wrap1.appendChild(divs);

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

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

tits1.className = "tits";

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

divs.appendChild(tits1);

arr.push(divs);

}

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("div");

preserve1.className = "preserve";

scrolls1.appendChild(preserve1);

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

tu1.className = "tu";

preserve1.appendChild(tu1);

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

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("div");

preserve2.className = "preserve";

scrolls1.appendChild(preserve2);

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

tu2.className = "tu";

preserve2.appendChild(tu2);

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

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;

}}}}}
复制代码