我理解的Ajax，與你相同嗎？

shizhuanzhi發表於2017-12-12
原文網址 : https://juejin.im/post/5a2f95f5f265da43346fe219

什麼是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。

我理解的Ajax，與你相同嗎？

值得一提的是：上述圖片的程式碼，就相當於xhr的onload事件，即上述程式碼用下圖替換也是一樣的：

我理解的Ajax，與你相同嗎？

那我們來總結一下小黃人的執行狀態(數字代表各種狀態)：

  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，反正是要動態生成元素的）

我理解的Ajax，與你相同嗎？

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;

}}}}}
複製程式碼

最後：希望文章對讀者有所幫助，不足之處還請各位大牛多多指教。

相關文章