Ajax is what??????

What I understand is this:

Ajax is the ability to update parts of a web page without refreshing the page.

Requesting data using Ajax has four steps:

1. Create an object

var xhr = new XMLHttpRequest();

2. Send the request

Xhr. open(“GET”,”hot.json “, true);

3. Wait for the response. This method is called on the status representative of each network request

xhr.send(); // Because we want to fetch data, not submit data, there is no data in the send method.

4. After the execution is completed, the background returns data in a certain format to the foreground. At this time, the execution status of XHR needs to be determined, as shown in the following figure:

$.ajax() {request (XHR).responseText ($.ajax());

It is worth mentioning that the code in the above image is equivalent to the onload event in XHR.

Let’s summarize the minions’ execution states (numbers represent various states) :

0: initial state (the request is not initialized) 1: connection is created (the server connection is established) 2: the client sends data to the background (the request is received) 3: the server starts to return data (the request is being processed) 4: the client receives data (the request is completed and the response is ready)Copy the code

This is all about Ajax. It seems to be written in a fixed way, and there is nothing to explain. What I want to talk about is the following little exercise: click on an image, and the corresponding movie will appear.

CSS style section :(readers can set styles according to their own preferences)

.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; }Copy the code

Body section :(write a basic box ok, anyway, it is to dynamically generate elements)

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(); var request = new XMLHttpRequest(); <! --true indicates an asynchronous request, which can be omitted or not written.falseIt is synchronous, usually not used. --> request.open("GET"."hot.json".true); <! --> request. Send (); request.onreadystatechange =function() {<! -- State judgment -->if(request.readyState ==4 && request.status ==200){ <! Var obj = json.parse (request.responseText); console.log(obj); title1.innerHTML = obj.title; var arr = []; <! -- the for loop iterates through the data passed from the background and places it in the appropriate position -->for(var i = 0; i < obj.subjects.length; i++) { <! Var divs = document.createElement() 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]; / / page for detailsfor (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 = "Movie Year :"+obj.subjects[this.index].year;

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

looked1.innerHTML = obj.subjects[this.index].collect_count+"People have.";

scores1.innerHTML = "Scoring."+obj.subjects[this.index].rating.average+"The supreme."+obj.subjects[this.index].rating.max+"Minimum."+obj.subjects[this.index].rating.min+"Star."+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 = Director: ""+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 = "Star."+obj.subjects[this.index].casts[i].name;

}}}}}
Copy the code

Finally: hope the article is helpful to the reader, the inadequacies also ask you to give more advice.