第三十五天(JS&Ajax技术)-EW帮帮网

JavaScript被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。嵌入动态文本于HTML页面；对浏览器事件做出响应，读写HTML元素，在数据被提交到服务器之前验证数据；检测访客的浏览器信息；控制用户凭据，包括创建和修改等。

#Ajax技术

概念：Asynchronous JavaScript And XML：异步的 JavaScript 和 XML

AJAX作用：

1、数据交换：通过AJAX可给服务器发送请求，并获取服务器响应的数据

2、后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行。

3、局部刷新：浏览器接收到结果以后进行页面局部刷新

JS-AJAX知识点：

1、变量，函数，运算，事件等

2、引用库，Ajax，JQuery，Axios等s

#安全结合：

1、发现更多的有利用价值的信息（URL、域名、路径等等）

测试站、后台路径、未公开的路径、api地址等等

2、发现敏感信息（硬编码的帐号、pass、API密钥、注释等等）

硬编码帐号可登录、测试帐号可被登录、密钥泄露、注释中开发信息等等

3、发现危险的代码（eval、dangerouslySetInnerHTML等等）

URL跳转，XSS跨站、模版注入（SSTI）等

4、了解网站的逻辑校验功能

前端检测，加密逆向，数据走向等

#学习文档：

ajax 工作原理：

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

1、原生JS教程

JavaScript 教程

用get请求去请求服务器中的1.txt文件采用异步；当请求完成且相应已就绪和返回状态码返回两百时，将响应的内容以字符串格式输出到控制台中

输出1.txt内容

2、jQuery库教程

jQuery 教程

远程调用 jQuery 库使用方法：

使用本地jQuery 库方法

3、Axios库教程

立即开始 | Axios 文档

远程获取axios库方法

使用本地 axios 库方法

更简单的代码写法，直接一句代码搞定

#文件上传

1、布置前端页面

2、JS获取提交数据

3、JS对上传格式判断

4、后端对上传数据处理

前端JS进行后缀过滤，后端PHP进行上传处理

原生开发:

js代码：

php后端处理代码：

<?php

$name=$_FILES['file_upload']['name'];
$type=$_FILES['file_upload']['type'];
$size=$_FILES['file_upload']['size'];
$tmp_name=$_FILES['file_upload']['tmp_name'];
$error=$_FILES['file_upload']['error'];

echo $name."<br>";
echo $type."<br>";
echo $size."<br>";
echo $tmp_name."<br>";
echo $error."<br>";

测试：选择一张 png格式图片上传，文件格式提示正确，

可以进到后端，后端代码处理好后展示数据

上传一个错误格式文件，直接提示错误了，

点击确定后。跳转回上传页面

安全问题：

1、过滤代码能看到分析绕过

2、禁用JS或删除过滤代码绕过

绕过测试：

直接将源代码下载下来，之后将文件后缀名改成.html 等修改完后双击打开，然后修改白名单的文件类型或者将 onchange 删掉

将png 格式改成php 格式

这里要修改一下地址，发送到处理的php上

打开修改后的文件，上传一个png格式看看是否会报文件格式错误成功报错

上传一个php格式文件查看是否能正确上传

文件上传成功，绕过成功

#登录验证

0、布置前端页面

1、获取登录事件

2、配置Ajax请求

3、后端代码验证

4、成功回调判断

后端PHP进行帐号判断，前端JS进行登录处理

用 jQuery 进行登录验证

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台登录</title>
<style>
    body {
      background-color: #f1f1f1;
    }
    .login {
      width: 400px;
      margin: 100px auto;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      padding: 30px;
    }
    .login h2 {
      text-align: center;
      font-size: 2em;
      margin-bottom: 30px;
    }
    .login label {
      display: block;
      margin-bottom: 20px;
      font-size: 1.2em;
    }
    .login input[type="text"], .login input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1.2em;
      margin-bottom: 20px;
    }
    .login input[type="submit"] {
      background-color: #2ecc71;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 1.2em;
      cursor: pointer;
    }
    .login input[type="submit"]:hover {
      background-color: #27ae60;
    }
</style>
</head>
<body>
<div class="login">
<h2>后台登录</h2>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="user" >
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="pass" >
<button>登录</button>
</div>
</body>

获取登录事件和配置Ajax请求

接收的参数值前面要加一个 "." ,否则接收不到值

测试数据是否可以正常发送：

后端对上传数据处理

这里验证传输过来的数据如果时正确的就会在数组中些一个 infoCode : 1 进去，然后将数组改成json格式发送回去，前端页面接收到json格式数据时要加 dataType: 'json', ，这个是将json格式数据转成JavaScript 对象

<?php

$user=@$_POST['username'];
$pass=@$_POST['password'];
//真实情况需要在数据库获取
$success=array('msg'=>'ok');
if($user=='xiaodi' && $pass=='xiao'){
$success['infoCode']=1;
}else{
$success['infoCode']=0;
}
echo json_encode($success);