WEB前端开发笔记之ajax的跨域访问（搜索引擎篇）

最新推荐文章于 2019-04-11 21:15:33 发布

萧凝云

最新推荐文章于 2019-04-11 21:15:33 发布

阅读量243

点赞数

分类专栏： ----------前端开发

本文链接：https://blog.csdn.net/qq_36936155/article/details/71437232

版权

----------前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
    <script src="jQ/jquery-3.2.0.min.js"></script>
    <style>
        .main{
            width: 700px;
            margin: 200px auto;
        }
        .keywords{
            width: 500px;;
            font-size: 28px;
        }
        input[type=button]{
            font-size: 20px;
        }
        .message {
            border: 1px solid #ccc;
            width: 500px;
            margin-left: -100px;
            border-top: none;

        }
        .message ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .message ul li{
            margin: 5px;
        }
    </style>

</head>
<body>
	<div align="center" class="main">
        <input type="text" class="keywords">
        <input type="button" value="搜索一下">
        <div class="message" align="left" style="display:none;" >
            <ul>
                <!--<li>中国好声音</li>
                <li>中国好嫂子</li>
                <li>中国好声音</li>
                <li>中国好声音</li>
                <li>中国好声音</li>
                <li>中国好声音</li>
                <li>中国好声音</li>
                <li>中国好声音</li>
                <li>中国好声音</li>
                <li>中国好声音</li>-->
            </ul>
        </div>
	</div>
    <script >
        //如果页面加载直接给li元素绑定事件，你是获取不到li元素的
        //我们看恶意使用jq引入的事件委托

        $(".message ul").on("mouseover","li",function () {
            this.style.background="red";
        });
        $(".message ul").on("mouseout","li",function () {
            this.style.background="white";
        });


        function getInfo(obj) {
            console.log(obj);
            var r = obj.s;
            document.querySelector(".message>ul").innerHTML="";//清除上次ul下的li
            for(var i = 0;i<r.length;i++){
                var li = document.createElement("li");
                li.innerHTML = r[i];
                document.querySelector(".message>ul").appendChild(li);
            }
        }
        document.querySelector(".keywords").οnkeyup=function () {

            var keywords = this.value;

            //我要对这个关键字进行一个判断
            if(keywords.length>0){
                //我根据这个关键字去获取数据，获取到数据之后
                //加载到列表
                //显示这个区域message
                document.querySelector(".message").style.display="block";

                //把关键字给360的这个搜索接口，让它来给我结果

                //使用script 标签去发送请求

                var script = document.createElement("script");
                script.src = "http://suggestion.baidu.com/su?cb=getInfo&wd="+this.value+"&sc=hao123&_=1427618279165";
                document.body.appendChild(script);

            }else{

                //隐藏message
                document.querySelector(".message").style.display="none";
            }
            //因为我现在给服务器发送请求，跨域的请求
            //现在采用的跨域方案是jsonp jsonp 只支持get方式的跨域，
            //并不支持post
            //如果我要给跨域的服务器传递非常多数据，get对请求的数据大小有限制，传不过去
            
            //我们就要处理post方式的跨域
            
            //使用一个叫做cors的方案 跨域资源共享，其实这个是需要在服务器端进行一个配置
            //其实就服务器端给客户端一个响应头，就搞定
        };
        
    </script>
</body>
</html>

萧凝云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端开发笔记之ajax的跨域访问（搜索引擎篇）

Title .main{ width: 700px; margin: 200px auto; } .keywords{ width: 500px;; font-size: 28px; } input[ty
复制链接

扫一扫

专栏目录