一学一做教育视频网站有哪些内容大兴安岭建设局网站
文章目录
- 一、Javascript原生post请求写法
- 二、原生JS封装Ajax请求
- 三、JS里的值或内容输出到HTML网页中
- 四、Javascript页面后退前进刷新示例
- 五、Javascript实现文件上传
- 👉1.成长路线图&学习规划👈
- 👉2.网安入门到进阶视频教程👈
- 👉3.SRC&黑客文档👈
- 👉4.护网行动资料👈
- 👉5.黑客必读书单👈
- 👉6.网络安全岗面试题合集👈
一、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方法将文件发送到服务器，从而实现文件上传。
网络安全学习资源分享:
给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
因篇幅有限，仅展示部分资料，朋友们如果有需要全套《网络安全入门+进阶学习资源包》，请看下方扫描即可前往获取
👉1.成长路线图&学习规划👈
要学习一门新的技术，作为新手一定要先学习成长路线图，方向不对，努力白费。
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
👉2.网安入门到进阶视频教程👈
很多朋友都不喜欢晦涩的文字，我也为大家准备了视频教程，其中一共有21个章节，每个章节都是当前板块的精华浓缩。（全套教程扫描领取哈）
👉3.SRC&黑客文档👈
大家最喜欢也是最关心的SRC技术文籍&黑客技术也有收录
SRC技术文籍：
黑客资料由于是敏感资源，这里不能直接展示哦！ （全套教程扫描领取哈）
👉4.护网行动资料👈
其中关于HW护网行动，也准备了对应的资料，这些内容可相当于比赛的金手指！
👉5.黑客必读书单👈
👉6.网络安全岗面试题合集👈
当你自学到这里，你就要开始思考找工作的事情了，而工作绕不开的就是真题和面试题。
所有资料共282G，朋友们如果有需要全套《网络安全入门+进阶学习资源包》，可以扫描下方二维码或链接免费领取~