前端学习 之 HTML通过JS调用HTTP

1、简介

最近在搞爬虫抓包,抓到的东西只是后台展示太不方便了。于是就写了一些前端的js代码,通过HTTP协议与后台通信,然后把内容展现出来。以前写过这方面前端的代码,但每次用时又总是忘记,所以这次把它记录下来。本文只是举个最简单的get请求示例,供大家参考。

2、效果

在这里插入图片描述

3、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo_http——沙师弟</title>
    <script>
	    var xhr = new GetXmlHttpObject(); // Http传输类初始化
        var urlPath = "http://www.shazhenyu.com:8889/getInfo?url=https://shazhenyu.blog.csdn.net";
        // Http传输类
        function GetXmlHttpObject() {
                var xmlHttp=null;
                try {
                    // Firefox, Opera 8.0+, Safari
                    console.log("XMLHttpRequest");
                     xmlHttp=new XMLHttpRequest();
                } catch (e) {
                    // Internet Explorer
                    try {
                        console.log("Msxml2");
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        console.log("Microsoft");
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                return xmlHttp;
        }
        // get请求
        function get_network(){
            var url = urlPath;
            xhr.onreadystatechange = toGetProcess;
            xhr.open("GET", url);
            xhr.send(null);
            console.log("url:",url);
        }
        // 设置当获XHR对象获取到返回信息后执行以下代码
        function toGetProcess() {
            console.log("xhr:",xhr.readyState,xhr.status);
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    res = xhr.responseText;
                    console.log("res",res);
                    var obj = eval ("(" + res + ")");
                    console.log("ok good");// obj为json的以下目录
                    console.log("code:",obj.code);
                    console.log("msg:",obj.msg);
                    try {
                        content_whData = obj.info;
                        var result_div = document.getElementById("result");
                        console.log("msg:",content_whData);
                        console.log("result_div:",result_div);
                        var artlist = content_whData.arts_list;
                        var html_content = "博客名称:"+content_whData.name+" " +
                            "   "+content_whData.other+
                            "<br/>文章链接:"+content_whData.url+
                            "<br/>原创数:"+content_whData.info_yc_num+
                            "<br/>粉丝数:"+content_whData.info_fans_num+
                            "<br/>喜欢数:"+content_whData.info_lovers_num+
                            "<br/>最新文章:<br/>";
                        var html_context2 = "";
                        for (var i = 0; i < artlist.length; i++) {
                            html_context2 += "--------------------------------------------------------------------------------<br/>"
                                +" - 名称:\""+artlist[i].name+"\"<br/> - 链接:\""+artlist[i].link+"\"<br/> - 创作日期:\""
                                +artlist[i].date+"\"<br/> - 阅读量:\""+artlist[i].read+"\"<br/> - 评论数:\""+artlist[i].pl+"\"<br/>";
                        }
                        result_div.innerHTML="<p>"+html_content+html_context2+"</p>"
                    } catch (e){
                        console.log("file error:",e);
                    }
                }
            } else {
                console.log("可能存在跨域问题,解决即可");
            }
        }
    </script>
</head>

<body>
<button onclick="get_network()">
    触发请求
</button>
<div id="result"></div>
</body>
</html>

4、流程

  • 先做一个Http传输函数GetXmlHttpObject
  • 然后new出一个对象xhr
  • 再写一个传参函数get_network()和一个回收函数toGetProcess()
  • 最后写一个触发条件,本文是用按钮Button的点击事件触发的
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页