PHP结合AJAX获取网页内容并展示源码的实现方案

技术方案概述

本方案旨在实现一个Web工具，允许用户输入目标网址，由服务器端请求该网页并将其内容返回给浏览器。核心逻辑包括：

1. 后端获取：PHP使用`file_get_contents`发起HTTP请求，设置超时控制避免长时间阻塞。
2. 编码处理：分析返回内容的`charset`元标签，若为GBK或GB2312则转换为UTF-8输出，确保浏览器正确显示。
3. 前端交互：分别提供原生`XMLHTTPRequest`和`jQuery`两种AJAX提交方式，支持回车键快捷触发请求。
4. 结果展示：将抓取到的内容同时注入到显示页面视图的容器和显示源码的`textarea`容器中。

准备工作

确保开发环境已配置好PHP运行环境（如Apache/Nginx + PHP）。由于涉及远程请求，需保证服务器能正常访问互联网，且php.ini中未禁用`allow_url_fopen`。若目标网站存在防盗链或反爬虫机制，可能需要额外添加Header伪装User-Agent。

第1步：创建PHP后端文件

创建一个名为`get_web.php`的文件，用于接收前端POST请求并返回处理后的网页内容。

入口：浏览器访问此文件。
动作：判断是否收到`input_text`参数，若有则执行抓取逻辑；若无则返回包含前端JS代码的HTML模板。

<?php
header("Content-type: text/html; charset=utf-8");
// 如果收到了要抓取的URL参数
if(!empty($_POST['input_text'])) {
    // 设置超时时间为10秒
    ini_set('default_socket_timeout', 10);
    
    // 尝试获取内容
    if(!$data = @file_get_contents($_POST['input_text'])) {
        echo "Time out or cannot fetch!";
        exit;
    }

    // 简单的编码检测与转换逻辑
    $charset_pos = stripos($data, 'charset');
    if ($charset_pos) {
        if (stripos($data, 'utf-8', $charset_pos)) {
            echo $data;
        } else if (stripos($data, 'gb2312', $charset_pos)) {
            echo iconv('gb2312', 'utf-8', $data);
        } else if (stripos($data, 'gbk', $charset_pos)) {
            echo iconv('gbk', 'utf-8', $data);
        } else {
            echo $data;
        }
    } else {
        // 未检测到charset，默认按原样输出或尝试转换
        echo $data;
    }
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页抓取工具</title>
    <!-- 此处插入具体的JS和CSS代码 -->
</head>
<body>
    <div id="container">
        <input type="text" id="url_input" placeholder="请输入URL">
        <button onclick="fetchPage()">抓取</button>
        <div id="output_view"></div>
        <textarea id="output_source" readonly></textarea>
    </div>
</body>
</html>