Javascript Ajax little exercise: movie site click-free display Plot

Ajax little exercise: 80S Movie Network clickless displayed directly Plot

1. derived from

Each time the election 80S Movie Network movie watching, watching Synopsis is indispensable, because the movie listings page often no film synopsis, brief introduction is necessary to look into the details page click on, so many movies have a point to go see this in the choice of the film is more trouble. Just recently learned of Ajax request Js, wanted to try to write a few lines of code to practice.

2. Code

//80S电影网免点击直接看剧情简介

(function(){

    var oul=document.getElementsByClassName("stui-vodlist")[0];

    var oli=oul.getElementsByTagName("li");

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

        oli[i].onmouseenter=function(){

            //1.获得详情链接，nowA为当前li下的A标签

            var nowA=this.getElementsByClassName("stui-vodlist__box")[0].getElementsByTagName("a")[0];

            var olink="http://www.80smp4.cc"+nowA.getAttribute("href");

            //2.发送Ajax请求

            function getJuQingData(){

                return new Promise(function(resolve,reject){

                    var xhr=new XMLHttpRequest();

                    xhr.onreadystatechange=function(){

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

                            var res=xhr.responseText;

                            var juQingData=res.split("<meta")[2];

                            resolve(juQingData);

                        }

                    }

                    xhr.open("GET",olink,true);

                    xhr.send();

                })

            }

            //3.将数据写入title

            async function main(){

                var juQing = await getJuQingData();

                nowA.setAttribute("title",juQing);

            }

            main();

        }

    }

})();

Here the use of the title attribute A label (the original value is the name of the movie) to store the film synopsis. As a result, simply mouse over the movie picture will trigger the Ajax request, to obtain details of the data page, and direct shows film synopsis. (Note: only supports movie section of the list of movies tab)

3. Run

Javascript code to run in the browser in several ways:

1. Copy the code into the console, and press Enter.

2. Copy the code into the address bar, and prefixed javascript:, press Enter.

3. To save a bookmark, the bookmark URL amended as follows: prefix javascript: + your code. (Be careful not to have a "//" comment)

4. Highly recommended: Grease Monkey expansion.

4. Effects