前后端交互（上）

最新推荐文章于 2022-03-21 12:48:23 发布

kht_47471015

最新推荐文章于 2022-03-21 12:48:23 发布

阅读量274

点赞数 1

文章标签： javascript ajax 前端后端

本文链接：https://blog.csdn.net/weixin_47471015/article/details/112707556

版权

基本概念

1.什么是服务器?

服务器也是电脑，只不过是一台 24 小时不断电，不关机的电脑
根据提供的服务功能不同: 文件服务器、邮件服务器、Web 服务器等等；
简而言之: 服务器其实就是一台"提供了某种服务功能"的超级电脑

2.如何让电脑能够提供某种服务?

如何让电脑可以聊天?听歌?浏览网页?
想让电脑提供聊天服务,可以安装相应的聊天软件, 例如:QQ/旺旺…
想让电脑可以提供听歌服务,可以安装相应音乐软件, 例如:酷我/酷狗…
想让电脑可以提供浏览网页服务,可以安装相应浏览网页软件, 例如:谷歌/欧朋…

3.如何让电脑提供管理网站的服务?

安装 Web 服务相关软件, 例如: Apache、IIS、Tomcat、Nginx、NodeJS 等；
安装了 Web 服务软件的电脑, 我们称之为"Web 服务器"
Web 服务器软件：Apache、IIS、Tomcat、Nginx、NodeJS 等；

Web 服务器搭建

1.什么是 WAMPServer 软件?
W: Windows 操作系统
A: Apache 世界排名第一的服务器软件,特点是简单,速度快,性能稳定
M: MySQL 开源免费的数据库软件，特点是体积小、速度快、使用成本低
P: PHP 超文本预处理器,直接将代码嵌入 HTML 文档中执行, 特点是简单易学,容易上手

2.如何搭建 Apache 服务器?

1.双击提供的安装包 2.点击 Next 3.选择安装路径(注意:路径中不要出现中文) 4.勾选两个方框,点击 next 继续安装 5.点击 install 开始安装 6.安装完毕以后点击 finish 即可启动 wamp

3.测试访问
打开浏览器输入 127.0.0.1 查看显示的内容

PHP 基础

<?php
1.JS(php)中有两种注释
 1.1单行注释//
 1.2多行注释/* */

2.php中如何定义变量?
  $num = 10;

3.php中如何打印内容?
echo $num;//打印num
// 注意点: 后端编写的代码不能直接运行, 只能放到服务器对应的文件夹下, 通过服务器运行
// 如何通过服务器运行: 通过ip地址找到服务器对应的文件夹, 然后再找到对应的文件运行

4.php中如何定义集合
  4.1php中数组
     $arr = array(1, 3, 5);
     print_r($arr);//打印数组
     echo $arr[1];//取出数组中元素

  4.2php字典(对象)
     $dict = array("name"=>"lnj", "age"=>"33");
     print_r($dict);
     echo $dict["name"];

5.php中的分支循环语句
if/switch/三目/for/while

$age = 16;
if($age >= 18){
   echo "成年人";
}else{
   echo "未成年人";
}

$res = ($age >= 18) ? "成年人" : "未成年人";
echo $res;

switch ($age){
    case -1:
        echo "非人类";
        break;
    case 18:
        echo "成年人";
        break;
    default:
        echo "未成年人";
        break;
}

$arr = array(1, 3, 5);
for($i = 0; $i < count($arr); $i++){
    echo $arr[$i];
    echo "<br>";
}

$index = 0;
while ($index < count($arr)){
    echo $arr[$index];
    echo "<br>";
    $index++;
}
?>

get 和 post 的请求处理

1.可以通过 form 标签的 method 属性指定发送请求的类型 2.如果是 get 请求会将提交的数据拼接到 URL 后面
?userName=lnj&userPwd=123456 3.如果是 post 请求会将提交的数据放到请求头中

4.GET 请求和 POST 请求的异同
4.1 相同点:
都是将数据提交到远程服务器
4.2 不同点:
4.2.1 提交数据存储的位置不同
GET 请求会将数据放到 URL 后面
POST 请求会将数据放到请求头中
4.2.2 提交数据大小限制不同
GET 请求对数据有大小限制
POST 请求对数据没有大小限制

5.GET/POST 请求应用场景
GET 请求用于提交非敏感数据和小数据
POST 请求用于提交敏感数据和大数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02-get</title>
  </head>
  <body>
    <!--

-->
    <form action="02-get-post.php" method="post">
      <input type="text" name="userName" /><br />
      <input type="password" name="userPwd" /><br />
      <input type="submit" value="提交" /><br />
    </form>
  </body>
</html>

在 php 中

<?php
print_r($_GET);
echo $_GET["userName"];
echo $_GET["userPwd"];

print_r($_POST);
echo $_POST["userName"];
echo $_POST["userPwd"];
?>

get 和 post 上传大文件

注意: 1.上传文件一般使用 POST 提交 2.上传文件必须设置 enctype=“multipart/form-data”

3.上传的文件在 PHP 中可以通过$_FILES 获取
4.PHP 中文件默认会上传到一个临时目录, 接收完毕之后会自动删除
默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改 php.ini 文件
file_uploads = On ; 是否允许上传文件 On/Off 默认是 On
upload_max_filesize = 2048M ; 上传文件的最大限制
post_max_size = 2048M ; 通过 Post 提交的最多数据

max_execution_time = 30000 ; 脚本最长的执行时间单位为秒
max_input_time = 30000 ; 接收提交的数据的时间限制单位为秒
memory_limit = 2048M ; 最大的内存消耗

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03-post-file</title>
  </head>
  <body>
    <form action="03-post-file.php" method="post" enctype="multipart/form-data">
      <input type="file" name="upFile" /><br />
      <input type="submit" value="上传" /><br />
    </form>
  </body>
</html>

<?php
//echo "post page";
//print_r($_POST);
//echo "<br>";
//print_r($_FILES);

// 1.获取上传文件对应的字典
$fileInfo = $_FILES["upFile"];
//print_r($fileInfo);
// 2.获取上传文件的名称
$fileName = $fileInfo["name"];
// 3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];

//echo $fileName;
//echo "<br>";
//echo $filePath;

// 4.移动文件
move_uploaded_file($filePath, "./source/".$fileName);
?>

Ajax 学习

1.什么是 Ajax?

Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写
Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
Ajax 其实就是浏览器与服务器之间的一种异步通信方式，使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新

2.搭建 Ajax 开发环境

Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax
vscode 下安装插件 Live Server，找到文件所在位置的上级目录下用 vscode 打开文件

2.发送 Ajax 请求的五个步骤
Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数

  1.创建一个异步对象
   var xmlhttp=new XMLHttpRequest();
  2.设置请求方式和请求地址
     xmlhttp.open("GET", "04-ajax-get.php", true);
     这个调用方法有三个参数：
      method：请求的类型；GET 或 POST或put或delete
      url：文件在服务器上的位置（远程本地都可以）
      async：true（异步）或 false（同步不用）

  3.发送请求xmlhttp.send();
    参数是通过请求体携带的数据
  4.监听异步对象状态的变化
  当获取到响应后，会触发 xmlhttp 对象的 readystatechange 事件，可以在该事件中对响应进行处理
     xmlhttp.onreadystatechange = function (ev2) {
         }
     xmlhttp.onreadystatechange = () => {
       //响应是否完成了
       if (xmlhttp.readyState !== 4) return;
      //请求或服务器端会出现问题吗
       if ((xmlhttp.status >= 200) & (xmlhttp.status < 300) || xmlhttp.status === 304) {
       console.log('正常使用响应数据');
       console.log(xmlhttp.responseText);//获取数据的字符串形式
        }
      };
     readystatechange 事件监听 readyState 这个状态的变化
      // 它的值从 0 ~ 4，一共 5 个状态
      // 0：未初始化。尚未调用 open()
      // 1：启动。已经调用 open()，但尚未调用 send()
      // 2：发送。已经调用 send()，但尚未接收到响应
      // 3：接收。已经接收到部分响应数据
      // 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了
注意：readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener
      为了兼容性，readystatechange 中不使用 this，而是直接使用xmlhttp
      由于兼容性的原因，最好放在 open 之前
  5.在函数中处理返回结果

代码块

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04-ajax-get</title>
    <script>
      window.onload = function (ev) {
        var oBtn = document.querySelector("button");
        oBtn.onclick = function (ev1) {
          // 1.创建一个异步对象
          var xmlhttp = new XMLHttpRequest();
          // 2.设置请求方式和请求地址
          xmlhttp.open("GET", "04-ajax-get.php", true);
          // 3.发送请求
          xmlhttp.send();
          // 4.监听状态的变化
          xmlhttp.onreadystatechange = function (ev2) {
            //判断请求是否完成
            if (xmlhttp.readyState === 4) {
              // 判断是否请求成功
              if (
                (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
                xmlhttp.status === 304
              ) {
                // 5.处理返回的结果
                console.log("接收到服务器返回的数据");
              } else {
                console.log("没有接收到服务器返回的数据");
              }
            }
          };
        };
      };
    </script>
  </head>
  <body>
    <button>发送请求</button>
  </body>
</html>

在 ie5 和 ie6 版本中要想兼容必须进行判断进行创建异步对象

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

发送 GET 请求

1.携带数据

GET 请求不能通过请求体携带数据，但可以通过请求头携带，以 url 问号后面的名值对为准。
const url =‘https://www.imooc.com/api/http/search/suggest?words=js&username=alex&age=18’;
2.数据编码

如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题
可以使用 encodeURIComponent() 编码
const url = https://www.imooc.com/api/http/search/suggest?words=${encodeURIComponent( '前端' )};

在 IE 浏览器中, 如果通过 Ajax 发送 GET 请求, 那么 IE 浏览器认为同一个 URL 只有一个结果,2.设置请求方式和请求地址应该加随机数

//获取随机数的方法
console.log(Math.random());
console.log(new Date().getTime());

xhr.open("GET", "05-ajax-get.txt?t=" + new Date().getTime(), true);

发送 POST 请求

1.携带数据

POST 请求主要通过请求体携带数据，同时也可以通过请求头携带
const url = ‘https://www.imooc.com/api/http/search/suggest?words=js’;
如果想发送数据，直接写在 send() 的参数位置，一般是字符串
xhr.send(‘username=alex&age=18’);
不能直接传递对象，需要先将对象转换成字符串的形式
2.数据编码
xhr.send(username=${encodeURIComponent('张三')}&age=18);

GET 与 POST 的区别

封装 Ajax-get 方法
需要传入的参数 1.设置请求方式和请求地址里面的 url 参数 2.请求结果成功了怎么处理 success 3.请求结果失败了怎么处理 error

JSON 学习

什么是 json？
JSON 的全称是”JavaScript Object Notation”，意思是 JavaScript 对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。JSON 没有附加的任何标记，在 JS 中可作为对象处理，所以我们更倾向于选择 JSON 来交换数据。
JSON 的三种形式

1.简单值形式
JSON 的简单值形式就对应着 JS 中的基础数据类型  数字、字符串、布尔值、null
注意事项
      ① JSON 中没有 undefined 值
      ② JSON 中的字符串必须使用双引号
      ③ JSON 中是不能注释的

2.对象形式
JSON 的对象形式就对应着 JS 中的对象
{
  "name": "张三",
  "age": 18,
  "hobby": ["足球", "乒乓球"],
  "family": {
    "father": "张老大",
    "mother": "李四"
  }
}
注意事项
  JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号
  JSON 中只要涉及到字符串，就必须使用双引号
  不支持 undefined

3.数组形式
  JSON 的数组形式就对应着 JS 中的数组
  [
  {
    "id": 1,
    "username": "张三",
    "comment": "666"
  },
  {
    "id": 2,
    "username": "李四",
    "comment": "999 6翻了"
  }
]
注意事项
      数组中的字符串必须用双引号
      JSON 中只要涉及到字符串，就必须使用双引号
      不支持 undefined

JSON 的常用方法

1.JSON.parse()
  JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值
  一定要是合法的 JSON 字符串，否则会报错
2.JSON.stringify()
  JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串

封装操作 localStorage 的方法

const storage = window.localStorage;

// 设置
const set = (key, value) => {
  // {
  //   username: 'alex'
  // }
  storage.setItem(key, JSON.stringify(value));
};

// 获取
const get = (key) => {
  // 'alex'
  // {
  //   "username": "alex"
  // }
  return JSON.parse(storage.getItem(key));
};

// 删除
const remove = (key) => {
  storage.removeItem(key);
};

// 清空
const clear = () => {
  storage.clear();
};

export { set, get, remove, clear };

跨域

1.跨域是什么？

向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域
不同域之间的请求，就是跨域请求,跨域请求会被浏览器阻止
2.什么是不同域，什么是同域？
协议、域名、端口号，任何一个不一样，就是不同域
与路径无关，路径一不一样无所谓
//https（协议）😕/www.imooc.com（域名）:443（端口号）/course/list（路径）

3.跨域请求为什么会被阻止？

阻止跨域请求，其实是浏览器本身的一种安全策略–同源策略
其他客户端或者服务器都不存在跨域被阻止的问题

4.跨域解决方案（后端处理）

① CORS 跨域资源共享
自己准备一个 json 的接口，并告诉后端要进行跨域
② JSONP
1.JSONP 的原理
script 标签跨域不会被浏览器阻止
JSONP 主要就是利用 script 标签，加载跨域文件

   使用 JSONP 实现跨域
第一步：服务器端准备好 JSONP 接口
      // https://www.imooc.com/api/http/jsonp?callback=handleResponse
第二步：手动加载 JSONP 接口或动态加载 JSONP 接口
手动加载：<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>
这相当于在js标签中写入
handleResponse({
        code: 200,
        data: [
          {
            word: 'jsp'
          },
        ]
      });
动态加载 JSONP 接口：
const script = document.createElement('script');
script.src =
        'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
      document.body.appendChild(script);

第三步：声明函数
const handleResponse = data => {
        console.log(data);
      };

优先使用 CORS 跨域资源共享，如果浏览器不支持 CORS 的话，再使用 JSONP

XHR 对象

XHR 的属性

1.responseType 和 response 属性

文本形式的响应内容 xhr.responseText，是字符串形式的响应内容；也可以通过 xhr.response 获取相同的内容，但前提是需要在准备好发送之前设置 xhr.responseType = ‘’;xhr.responseType = ‘text’;(默认情况就这样)。
设置 xhr.responseType = ‘json’;之后可以通过 xhr.response 直接获取对象，而不是字符串。

2.timeout 属性

设置请求的超时时间（单位 ms）
xhr.timeout = 100;
在请求准备好 xhr.open(‘GET’, url, true);与请求发送 xhr.send(null);之间的代码中间设置响应超时时间，意思是给请求响应的时间是 100 毫秒，如果没有在这个时间之内完成，就会触发一个 timeout 事件。

3.withCredentials 属性

指定使用 Ajax 发送请求时是否携带 Cookie
使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会
可以设置 xhr.withCredentials = true;
但是最终能否成功跨域携带 Cookie，还要看服务器同不同意

XHR 的方法

1. xxx.abort() 终止当前请求，放到 xxx.send（）之后
2.setRequestHeader()可以设置请求头信息,请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //当设置xhr.send('username=alex&age=18');
xhr.setRequestHeader("Content-Type", "application/json"); /*  xhr.send(
        JSON.stringify({
          username: 'alex'
        })
      )*/

XHR 的事件

load 事件

1.load 事件响应数据可用时触发,他可以替代监听事件时用到的 onreadystatechange 函数。 2.在这个事件中不需要判断请求是否完成
3.load 搭配 addEventListener 绝配

xmlhttp.onreadystatechange = function (ev2) {
  //判断请求是否完成
  if (xmlhttp.readyState === 4) {
    // 判断是否请求成功
    if (
      (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
      xmlhttp.status === 304
    ) {
      // 5.处理返回的结果
      console.log("接收到服务器返回的数据");
    } else {
      console.log("没有接收到服务器返回的数据");
    }
  }
};

xhr.onload = () => {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.response);
  }
};
ie9以上支持;

xhr.addEventListener(
  "load",
  () => {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response);
    }
  },
  false
);

2.error 事件(ie10 开始支持)

1.请求发生错误时触发

xhr.addEventListener(
  "error",
  () => {
    console.log("error");
  },
  false
);

3.abort 事件(ie10 开始支持)

1.调用 abort() 终止请求时触发

xhr.addEventListener(
  "abort",
  () => {
    console.log("abort");
  },
  false
);

4.timeout 事件请求超时后触发(IE8 开始支持)

xhr.addEventListener(
  "timeout",
  () => {
    console.log("timeout");
  },
  false
);

formData

直接提交表单会跳转，不想让他跳转就用 ajax 来提交表单
formData 是 ajax2.0(XMLHttpRequest Level2)新提出的接口,利用 FormData 对象可以将 form 表单元素的 name 与 value 进行组装,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

FormData 的基本用法
通过 HTML 表单元素创建 FormData 对象
const fd = new FormData(表单元素);
xhr.send(fd);

 通过 append() 方法添加数据
 const fd = new FormData(表单元素);
 fd.append('age', 18);
 fd.append('sex', 'male');
 xhr.send(fd);

 IE10 及以上可以支持

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>formData</title>
  </head>
  <body>
    <form
      id="login"
      action="https://www.imooc.com/api/http/search/suggest?words=js"
      method="POST"
      enctype="multipart/form-data"
    >
      <input type="text" name="username" placeholder="用户名" />
      <input type="password" name="password" placeholder="密码" />
      <input id="submit" type="submit" value="登录" />
    </form>

    <script>
      //1.获取表单字段
      const login = document.getElementById("login");
      const { username, password } = login;
      //2.获取按钮并绑定点击事件
      const btn = document.getElementById("submit");
      const url = "https://www.imooc.com/api/http/search/suggest?words=js";
      btn.addEventListener(
        "click",
        (e) => {
          //2.1阻止表单的默认行为
          e.preventDefault();
          //2.2 表单数据验证

          // 2.3发送 Ajax 请求,四部曲
          const xhr = new XMLHttpRequest();

          xhr.addEventListener(
            "load",
            () => {
              if (
                (xhr.status >= 200 && xhr.status < 300) ||
                xhr.status === 304
              ) {
                console.log(xhr.response);
              }
            },
            false
          );

          xhr.open("POST", url, true);
          // 组装数据
          //const data = `username=${username.value}&password=${password.value}`;
          //FormData隆重登场
          const data = new FormData(login); //看不到数据，需要进一步遍历
          data.append("age", 18);
          data.append("sex", "male");
          for (const item of data) {
            console.log(item);
          }
          xhr.send(data);
        },
        false
      );
    </script>
  </body>
</html>

kht_47471015

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端交互（上）

基本概念1.什么是服务器?服务器也是电脑，只不过是一台 24 小时不断电，不关机的电脑根据提供的服务功能不同: 文件服务器、邮件服务器、Web 服务器等等；简而言之: 服务器其实就是一台"提供了某种服务功能"的超级电脑2.如何让电脑能够提供某种服务?如何让电脑可以聊天?听歌?浏览网页?想让电脑提供聊天服务,可以安装相应的聊天软件, 例如:QQ/旺旺…想让电脑可以提供听歌服务,可以安装相应音乐软件, 例如:酷我/酷狗…想让电脑可以提供浏览网页服务,可以安装相应浏览网页软件, 例如:谷歌
复制链接

扫一扫