【网络安全零基础入门必知必会】Javascript实现Post请求、Ajax请求、输出数据到页面、实现前进后退、文件上传（02）

本文链接：https://blog.csdn.net/Libra1313/article/details/139641277

这是大白给粉丝朋友准备的网络安全零基础入门第五章Javascript的知识章节里的Javascript实现效果示例。

喜欢的朋友们，记得给大白点赞支持和收藏一下，关注我，学习黑客技术。

一、Javascript原生post请求写法

Javascript：

let xhr = new XMLHttpRequest(); // 创建XHR对象  
xhr.onreadystatechange = function () {  
    if (xhr.readyState == 4) { // 4表示此次请求结束  
    	console.log("后端返回的结果："+this.responseText);  
    	  
    	/** 你的逻辑代码 **/  
    	let result = JSON.parse(this.responseText);// 后端返回的结果为字符串，这里将结果转换为json  
    	if(result.code == 1){ // 这里我通过code来标识结果  
            // 输出后端返回的用户名  
            console.log("用户名："+result.data["username"]);  
            // 输出后端返回的密码  
            console.log("用户名："+result.data["password"]);  
        }  
        /** 你的逻辑代码End **/  
    }  
};  
xhr.open( // 打开链接  
	"post",  
	"server.php", // 后端地址  
	true  
);  
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头  
xhr.send( // 设置需要携带到后端的字段，字符串形式  
    "username="+ "火柴炮炸牛屎" +  
    "&password="+ "123456" // 注意：字段之间需要加上 “ & ” 字符  
);

PHP示例：

// 接受原生JS Post过来的字段值  
$user = isset($_POST['username'];  
$password = isset($_POST['password']);  
  
// 创建一个数组存放字段值  
$data = array();  
$data["username"] = $username;  
$data["password"] = $password;  
  
// 返回结果给JS  
$result = array("code"=>1,"msg"=>"OK!","data"=>$data);  
echo json_encode($result);

二、原生JS封装Ajax请求

Ajax的原理其实就是利用XMLHttpRequest发送的http请求，原生js利用XMLHttpRequest发送http请求大概步骤：

检测浏览器是否存在XMLHttpRequest或者ActiveXObject对象，老的IE版本是用ActiveXObject
创建XMLHttpRequest对象
注册一个接收的事件
调用open建立连接
调用send发送请求

var xmlhttp = null;``// 1、2、检测并创建XMLHttpRequest对象``if (window.XMLHttpRequest) {`  `xmlhttp = new XMLHttpRequest();``} else if (window.ActiveXObject){`  `xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");``}``   ``if (xmlhttp != null) {`   `// 3、注册接收事件`   `xmlhttp.onreadystatechange = function(){`     `// 通过xmlhttp.status判断状态`     `     if(xmlhttp.status = 200){`        `// 通过xmlhttp.responseText获取数据`     `}`   `}`  `   // 4、建立连接，open(method,url,async,user,password)有5个参数`   `/*`    `* method:必选，请求方法`    `* url:必选，请求地址`    `* async:可选，布尔值，异步操作，默认true`    `* user:可选，用户名，用于认证，默认null`    `* password:可选，密码，用于认证，默认null`    `*/`   `xmlhttp.open("GET","http://localhost",true);`  `   // XMLHttpRequest.setRequestHeader(header,value)`   `// 设置HTTP请求头部的方法，必须在open()方法和send()方法之间调用`  `   // 5、发送请求，send(body)有1个参数`   `/*`    `* body:可选，需要发送的数据体，即参数，默认null`    `*/`   `xmlhttp.send();`  `} else {`  `alert("浏览器不支持XMLHTTP")``}

了解XMLHttpRequest后，我们可以利用XMLHttpRequest封装一个简单的Ajax的方法

// 封装一个 ajax 函数``function myAjax(options) {`   `options = options || {};``   `   `options.url = options.url || "";``   `   `options.method = (options.method || "GET").toUpperCase();``   `   `options.dataType = options.dataType || "json";``   `   `var xmlhttp = null;``   `   `if (window.XMLHttpRequest) {`       `xmlhttp = new XMLHttpRequest();`   `} else if (window.ActiveXObject) {`       `xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");`   `} else {`       `console.log("浏览器不支持XMLHTTP");`       `return false`   `}``   `   `if (Object.is(options.method, 'GET')) {`       `// get的参数特殊处理`       `let params = "";`       `if (typeof options.params === "object") {`           `for (let key of Object.keys(options.params)) {`               `params = params === "" ? params + "" + key + "=" + options.params[key] : params + "&" + key + "=" + options.params[key]`           `}``   `           `console.log(params);`       `} else {`           `params = options.params;`       `}``   `       `console.log(params);``   `       `options.url = options.url + "?" + params;``   `       `xmlhttp.open(options.method, options.url, true)`       `xmlhttp.send()`   `} else if (Object.is(options.method, 'POST')) {`        `xmlhttp.open(options.method, options.url, true)`        `xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')`        `xmlhttp.send(options.params)`    `}``   `    `xmlhttp.onreadystatechange = function () {`        `console.log(xmlhttp.responseText);`        `if (Object.is(xmlhttp.status === 200)) {`            `options.success(xmlhttp.responseText)`        `}`    `}``}``   ``myAjax({`    `url: "http://www.baidu.com",`    `method: "post",`    `params: {`        `name: "1",`        `age: 18`    `},`    `success: function (result) {`        `console.log(result);`    `}``})

三、JS里的值或内容输出到HTML网页中

JS通过id获取HTML网页中输入的内容使用:(.value)

一般格式如下：

var arr = document.getElementById("id").value;

将JS里的值输出到HTML网页中使用：(innerHTML)

一般格式如下：

id.innerHTML = 输出的内容或者值;

举个例子：用户在网页中输入身份证号，JS获取并提取输出其生日信息

<div class="topic2">  
    <div class="number">  
        <input  type="text" class="sr" id="num" placeholder="请输入你的身份证号码" name="username">  
        <button class="tj" onclick="get()">提交</button>  
        <p>生日:</p>  
        <p id="brth"></p>  
    </div>  
</div>  
<script>  
    function get(){  
        var arr = document.getElementById("num").value;  //获取html代码中输入的身份张号码  
        var brth = document.getElementById("brth");  
        var year = arr.slice(6,10);    
        var month = arr.slice(10,12);  
        var date = arr.slice(12,14);  //slice函数提取指定范围的数  
        if(arr.length == 18)  
            birthday = year + '年' + month + '月' + date + '日';  
        else  
            birthday = '请输入正确的身份证号！'  
        brth.innerHTML = birthday;  //输出显示到网页中  
    }  
</script>

四、Javascript页面后退前进刷新示例

1、页面刷新示例

     为了及时反映站点数据的变化，通常需要页面进行自动刷新；可以将刷新结果指向当前页面，也可以转换到指定页面。重点是meta元素，其属性“HTTP-EQUIV”设置为“refresh”时，会自动刷新当前页面，此属性包含两个重要的设置：CONTENT和URL，CONTENT表示自动刷新的时间间隔，URL表示刷新后的页面地址。

   ``   ``<!DOCTYPE html>``<html lang="en">``<head>`    `<meta charset="UTF-8" HTTP-EQUIV="refresh" CONTENT="3;URL=http://www.baidu.com">`    `<title>猿小猴子</title>``</head>``<body>``<table id="mytbl" width="300" height="50" border="0" cellspacing="2" cellpadding="0"`       `bgcolor="#FFb609">`    `<tr>`        `<td> 第一行第一列</td>`        `<td> 第一行第二列</td>`    `</tr>`    `<tr>`        `<td> 第二行第一列</td>`        `<td> 第二行第二列</td>`    `</tr>``</table>``</body>``</html>

    页面自动刷新实例的运行效果如图所示：

2、页面的后退与前进示例

    后退和前进是页面浏览时最常用的操作，系统自带浏览器可以完成这三个功能，在Web应用系统中，有时需要屏蔽浏览器的工具栏，此时需要使用代码实现页面的这三个操作。重点是“history”对象，其用来存储浏览器的历史记录，其参数为正数时，表示前进页面，负数则表示后退页面，如要后退2页则使用“history.go(-2)”。

   ``   ``<script language="javascript">``function back()``{`    `history.go(-1);  //后退1页``}``function forward()``{`    `history.go(+1);  //前进1页``}``function refresh()``{`    `history.go(-0)  //刷新``}``</script>``   ``   ``<input type=button value=后退 onclick="back()">``<input type=button value=刷新 onclick="refresh()">``<input type=button value=前进 onclick="forward()">

    后退、刷新、前进操作按钮的运行界面如图所示：

五、Javascript实现文件上传

在JavaScript中，你可以使用HTML5提供的File API来实现文件的上传功能。File API允许你通过JavaScript访问用户选择的文件，并将其上传到服务器。下面是一个使用File API实现文件上传的示例：

<!-- HTML -->``<input type="file" id="file-input">``<button onclick="uploadFile()">上传</button>``   ``// JavaScript``function uploadFile() {`  `const fileInput = document.getElementById('file-input');`  `const file = fileInput.files[0];``   `  `if (file) {`    `const formData = new FormData();`    `formData.append('file', file);``   `    `fetch('upload-url', {`      `method: 'POST',`      `body: formData`    `})`    `.then(response => {`      `// 处理响应`      `console.log('文件上传成功！')`    `})`    `.catch(error => {`      `// 处理错误`      `console.error('文件上传失败:', error);`    `});`  `} else {`    `console.error('未选择文件！');`  `}``}

在上述示例中，我们首先定义了一个包含文件选择框和上传按钮的HTML结构。当用户点击上传按钮时，调用uploadFile函数。

uploadFile函数获取文件输入框的DOM元素，并使用files属性获取用户选择的文件。我们创建了一个FormData对象，将文件添加到该表单数据中，使用append方法指定文件字段名为file。

然后，我们使用fetch方法发送HTTP POST请求到上传URL（请替换为真实的上传URL），并将formData作为请求的主体数据。在响应处理中，你可以根据需要对成功上传和错误情况进行处理。

需要注意的是，由于安全限制，JavaScript在浏览器中无法直接访问文件的内容，只能通过用户主动选择文件才能获取到。另外，上传文件需要与服务器进行交互，你需要根据你的服务器端实现来处理接收和保存上传的文件。

总结起来，使用File API可以轻松实现文件的上传功能。通过获取用户选择的文件，创建FormData对象并使用fetch方法将文件发送到服务器，从而实现文件上传。

为了帮助大家更好的学习网络安全，我给大家准备了一份网络安全入门/进阶学习资料，里面的内容都是适合零基础小白的笔记和资料，不懂编程也能听懂、看懂这些资料！

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

[2024最新CSDN大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享]

在这里插入图片描述