PHP\mySQL\Ajax整理
2019-08-15 11:18
1016 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mm0715/article/details/90709954
PHP\mySQL\Ajax整理
PHP相关
1.0 网络相关知识
服务器：远程计算机，用来存储项目，需要部署软件和关于前后端及数据库的一些服务
ip地址：每一个服务器都会有一个绝对的地址，由4个0-255的号段组成
端口：默认端口为80，https为443，数据库为3306
域名：需要购买，方便记忆，需要通过DNS服务商进行解析成对应IP地址
url：一段完整的包含协议、域名、端口、文件和键值对参数的网址
2.0 使用PHPstudy
先安装再使用，默认安装在C盘，不要有中文路径
phpstudy文件夹中PHPTutorial文件夹内的WWW文件夹就是web容器，项目文件需要放在这里
使用127.0.0.1访问文件
3.0 php基本语法
3.1 输出语句
| 输出语句 | 说明 |
|---|---|
| echo | 关键字，输出字符串 |
| print( ) | 方法，输出一个字符串 |
| print_r( ) | 输出复杂数据类型 |
| var_dump( ) | 输出复杂数据类型的具体信息 |
3.2 混编
<?php
if ($id > 5) {
?>
<li>就输出这里的值</li>
<?php
}
?>
3.3 变量和注释
| 方法 | 功能 |
|---|---|
| isset( ) | 判断当前变量是否存在，判断变量是否定义了，判断当前的值是否为null |
| empty( ) | 判断变量是否为空值 - “” 0 “0” null false array( ) |
| unset( ) | 删除变量，可以删除多个，用逗号隔开 |
// line common /* block common */
4.0 数据类型
| 数据类型 | 解释 |
|---|---|
| string | 字符串 |
| integer | 整型 - 只能是整数 |
| float | 浮点型 - 小数 |
| boolean | 布尔型 - true或者false |
| array | 数组 |
| object | 对象 |
| NULL | 空 |
| 基本数据类型 | 复合数据类型 | 特殊类型 |
|---|---|---|
| string 字符串 | array 数组 | NULL 空 |
| integer 整型 - 只能是整数 | object 对象 | 资源 |
| float 浮点型 - 小数 | ||
| boolean 布尔型 - true或者false |
| 方法名称 | 功能 |
|---|---|
| is_string( ) | 判断当前变量是否为字符串类型 |
| is_bool( ) | 判断当前变量是否是布尔类型 |
| is_int( ) | 判断是否是整型 |
| is_float( ) | 判断是否是浮点型 |
| is_array( ) | 判断是否为数组类型 |
| is_object( ) | 判断当前变量是否是对象类型 |
// ''不解析变量
// ""解析变量，最好加一组{}
4.0 数组的操作
4.1 索引数组
<?php
array(1, 2, 3, true, "abc");
// 循环数组
for($i = 0; $i < count($arr); $i++) {
echo $arr[$i]." "; // 使内容之间有些距离
}
?>
4.2 关联数组
<?php
array (
"name" => "yiyang",
"age" => 20,
"gender" => true
);
// 循环数组
foreach($arr as $value) {
echo $value . "</br>";
}
?>
4.3 二维数组
<?php array( array( "name" => "tylor", "age" => 20 ), array( "name" => "Bluce", "age" => 18 ) ); ?>
计算数组的长度用count()，删除数组的某一项用unset()
5.0 数据类型转换和运算符
| 数据类型 | 默认值 |
|---|---|
| int | 0 |
| object | null |
| bool | false |
| float |
| 算术运算符 | 赋值运算符 | 逻辑运算符 | 比较运算符 |
|---|---|---|---|
| + 加 - 减 * 乘 / 除 | = 一般赋值 | ！取反 | > 大于 < 小于 |
| % 求余，相除完剩余的结果 | += 在本身追加 | && 与，严格要求 | >= 大于等于 <=小于等于 |
| ++ 自加单独没区别 | -= 在本身扣除 | || 或，满足一项 | == 是否相等 === 是否全等 |
| – 同上 | *= /= 同上逻辑 | != 不相等 !== 不全等 |
三元运算符 表达式会返回true或者false ? 如果为true返回值1 : 如果为false返回值2
打印true为1，打印false为空白
6.0 php常用语法
6.1 if语句、循环、函数
<?php
$age = 40;
if($age > 18) {
echo '您已成年';
} else {
echo '您未成年';
}
for($i = 0; $i < 10; $i++) {
// 输出语句
}
// 函数声明
function getSum($num) {
$sum = 0;
for($i = 0; $i <= $num; $i++) {
$sum += $i
}
return $sum;
}
echo getSum(100);
?>
6.2 超全局变量
| 超全局变量名称 | 作用 |
|---|---|
| $GLOBALS | 引用全局作用域中可用的全部变量 |
| $_SERVER | 获取服务端相关信息 |
| $_REQUEST | 获取提交参数 |
| $_POST | 获取post提交参数 |
| $_GET | 获取get提交参数 |
| $_FILES | 获取上传文件 |
| $_ENV | 操作环境变量 |
| $_COOKIE | 操作cookie |
| $_SESSION | 操作session |
6.3 常量
定义
<?php
// ！！！定义说明 不可修改，区分大小写，一般用大写
// define(name, value, insensitive); insensitive -> 不敏感，迟钝的
define("PI", 3.14, false); // 设置为true则代表不区分大小写
echo PI; // 3.14
?>
| 常量名称 | 作用 |
|---|---|
| _LINE_ | 可以获取当前的代码行 |
| _FILE_ | 可以获取当前文件的路径 目录+文件名 |
| _DIR_ | 可以获取当前文件的目录 |
| _FUNCTION_ | 可以获取当前魔术常量所在的函数 |
6.4 文件载入关键字
<?php // include 相当于在这里复制粘贴了一份 include 'constant.php'; echo SCHOOL_NAME; // 传智播客 // include_once 只会载入一次 include_once 'constant.php'; // echo SCHOOL_NAME; // 传智播客 // require require 'constant.php'; echo SCHOOL_NAME; // 传智播客 // require_once require_once 'constant.php'; echo SCHOOL_NAME; // 传智播客 ?>
6.5 常用api
获取字符串长度
| 方法 | 作用 |
|---|---|
| strlen( ) | 获取字符串的长度（中文3个字节） |
| mb_strlen( ) | 没有设置编码，就使用php默认的编码（中文1个字节，5.6版本以上） |
| mb_internal_encoding( ) | 获取php内部默认的编码 |
获取时间
| 方法 | 名词 | 释义 |
|---|---|---|
| time( ) | 时间戳 | 从Unix纪元(格林威治 1970-01-01 00:00:00)到现在的秒数 |
| date( ) | 格式化日期 | date(“Y-m-d H:i:s”) 或者 date(“Y-m-d H-i-s”, $time) |
| strtotime( ) | 转换时间为秒数 | 把日期格式转换为秒数的时间戳 |
需要修改配置文件的时区
6.6 文件操作
| 方法 | 功能 | PHP |
|---|---|---|
| file_get_contents( ) | 将文件读入字符串 | 4 |
| file_put_contents( ) | 将文件写入字符串 | 5 |
<?php
// header("Content-Type:image/jpg"); 读取图片要加
$res1 = file_get_contents("./images/monkey.png");
echo $res1;
// 需要加入一个参数 FILE_APPEND
file_put_contents("data.txt", "这是我写入的内容", FILE_APPEND);
?>
7.0 GET请求和POST请求
在form的action中或者a链接的href属性中写入地址，form里面可以设置post方式，其他的不可以
<?php
// !!! 判断当前用户是否发送了请求， 是否是以post方式
// print_r($_SERVER); 很大一串关联数组， REQUEST_METHOD
if($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '我的名称是'.$_POST['userName123'].', 我的密码是'.$_POST['userPwd'];
}
?>
收集数据说明
<?php print_r($_GET); // 不管在怎么选择, 但是gender始终是on // Array([userName] => jack [userPwd] => 123 [gender] => on) /* ==> 单选框 系统会自动的收集当前表单元素的value值 解决办法: 给单选按钮添加value值，区分一下 */ /* ==> 复选框 如果复选框的名称一样，那么就会默认传递最后一个选项的值 如果需要传入所有选中的复选框的数据，可以在name属性值后面添加[] 添加了[]， 在收集数据的时候，就会把他们放进一个数组内 eg: 爱好：<input type="checkbox" name="hobby[]" value="code"> 写代码 <input type="checkbox" name="hobby[]" value="reading"> 看书 <br> */ ?>
_通过get提交的就用$GET获取数据，
通过post提交就用$POST获取
_通过post上传文件，就用$FILES获取
7.1 上传文件
提交请求
// !!! 在php中文件上传必须得是post请求 /* 1, 必须给表单设置enctype属性 application/x-www-form-unlencoded 将参数编码为键值对的格式，标准格式 (UTF-8 GBK GB2312) 用来处理字符串，默认的编码格式 multipart/form-data 专门用来处理特殊文件，比如文件 */ <form action="upload.php" method="post" enctype="multipart/form-data"> 文件选择： <input type="file" name="myFile"> <br> <input type="submit"> </form>
上传操作
<?php // 在php中，上传之后的相关信息都存储在 $_FILES 超全局变量中 // 文件夹是手动创建的 move_uploaded_file($_FILES["myFile"]["tmp_name"], "./upload/temp.png") ?>
| 方法 | 作用 | 示例 |
|---|---|---|
| move_uploaded_file( ) | 移动文件 | move_uploaded_file(文件存储位置, “路径”) |
| strpos(源字符, str) | 搜索字符在源字符第1次出现的索引，数值 | strpos($type, “image/”) |
| strrchr(aa, “.”) | 获取当前符号右侧所有的字符串 | strrchr($fileName, “.”) |
| rand(1000, 9999) | 获取随机数 |
注意文件不要取中文名，注意文件大小有限制，需要修改配置文件重启服务器
8.0 HTTP协议
HTTP协议：HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式
TCP/IP 协议建立与服务器连接有三次握手
8.1 请求报文
请求行 请求头 请求体
get请求没有请求体
post请求一定要有请求头
8.2 响应报文
状态行 响应行 响应体
最终返回给浏览器端的数据都在响应体内
8.3 使用header方法
<?php
// 设置响应头的类型
header("Content-Type:text/html;charset=utf-8;");
// 立马做出跳转
// header("Location:01-getsmt.php");
// 在指定的时间之后跳转
header("refresh:3;url=01-getsmt.php");
// 实现当前页面的自动下载
header("Content-Type:application/octet-stream");
// 指定文件名称, 自动下载，设置下载名称
header("Content-Disposition:attachment;filename=tmp.php");
?>
9.0 数据转存
9.1 http协议无状态
因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一
9.2 cookie 客户端，不安全
<?php
// 创建cookie
// setcookie("username", "tylor"); // 可以在请求头中查看
// 判断是否拥有某个指定名称的cookie值 -- $_COOKIE
if(isset($_COOKIE["username"])) {
echo "欢迎回来，朕的小仙女";
}else {
echo "大人头一回来，是打尖儿还是住店呀~";
setcookie("username", "tylor");
}
setcookie("username", "tylor", time() + 10);
// 通过path可以设置访问权限，参照网站根目录
setcookie("username", "tylor", PHP_INT_MAX, "/day05/down");
// 设置父级目录，子目录可以访问，设置子目录，上层不能访问 "/" 代表整站可以访问
?>
9.3 session 服务器端，安全
session 是通过 cookie来工作的
<?php // !!! php中默认不能使用session功能，如果需要使用则需要手动设置 session_start(); /* 1, 在服务器端动态生成一个sessionID 2, 在服务器端动态生成一个可以存放本次会话数据的文件，文件名以sess_sessionID构成 3, 通过相应头动态设置cookie， 在cookie中存放了本次会话所生成的sessionID */ // 创建session 使用超全局变量 $_SESSION["name"] = value; $_SESSION["user"] = Array( "name" => "dilireba", "age" => 25 ); ?>
mySQL 数据库
1.0 navicat的使用
打开服务器，打开数据库，新建连接，密码root，新建数据库
设置表头，设置主键和递增，设置默认值要加引号，设置非null
点击查询，新建查询，执行sql语句
2.0 增删改查(CURD)
-- 查找
select * from mytable where age < 20 and gender = 0
-- 增加
insert into mytable(name, age, gender) values('lili', 30, 0)
-- 修改
update mytable set age = age + 1,gender = 1 where id = 5
-- 删除
delete from mytable where id = 8
2.1 几个功能
-- 选择符合条件的记录数 select count(id) from mytable -- max 获取最大值 min 获取最小值 select max(age) from mytable -- 一般都是数值 select svg(age) from mytable -- 实现按照性别，再按照年龄 select * from mytable order by gender,age -- 中间范围的记录 n 偏移量从0开始, m 能够获取的记录数 select * from mytable limit 2,2 -- 1.0 采用from where的方式 select * from student,class where student.cid = class.classid -- where后面的这个 = 表示判断 -- 2.0 join 和 inner join都是一样的 on和where的意思也是差不多的 select * from student inner join class on student.cid = class.classid
2.2 php连接数据库
<?php
header("Content-Type:text/html;chartset=utf-8");
// 为了保证服务器编码，与当前php编码保持一致，可以设置服务器返回数据的编码
mysqli_set_chartset($conn, "utf8");
// 这个函数会自动打开连接
$conn = mysqli_connect("localhost", "root", "root", "mybase");
// 假如出错了，错误信息会给详细的提示
if(!$conn) {
die("连接失败");
} else {
echo "连接成功";
}
echo "这是连接之后的代码，如果有错误，将不会执行到这里";
?>
2.3 执行sql语句
<?php
// 新增数据 创建sql语句
$sql = "insert into mytable value(null, '张三', 30, 1)";
// 执行sql语句 mysqli_query(连接对象， sql语句)
$result = mysqli_query($conn, sql);
if($result) {
echo "新增成功";
} else {
// 输出具体的报错信息
echo mysqli_error($conn);
}
?>
2.4 展示查询的结果
<?php
// ... 上面的连接和判断的代码省略
$sql = "select * from mytable";
$result = mysqli_query($conn, $sql);
if(!$result) {
die("查询失败");
} else if(mysqli_num_rows($result) == 0) {
die("结果集为空");
} else {
var_dump($result);
}
// ！！！！循环并不知道何时停止，while循环就比较适合
while ($arr = mysqli_fetch_array($result, MYSQL_ASSOC);) {
$res[] = $arr;
}
print_r($res);
?>
| 方法 | 说明 |
|---|---|
| mysqli_connect(“主机名称”, “用户名”， “密码”， “数据库名”) | php连接MYSQL数据库 |
| mysqli_set_charset(连接对象，“utf8”); | 设置数据库和服务器编码相同 |
| mysqli_query($conn, “set name as utf-8”); | 设置数据库和服务器编码的另一种方式 |
| mysqli_query(连接对象，sql语句) | 执行sql语句 |
| mysqli_num_rows(结果集[执行完sql语句之后的值]) | 返回结果集的条数 |
| mysqli_fetch_array(结果集，MYSQL_ASSOC) | 提取查询语句之后的内容，需要循环 |
| mysqli_fetch_assoc(结果集) | 提取到查询语句之后的关联数组 |
| mysqli_fetch_row(结果集) | 提取到查询语句之后的索引数组 |
| mysqli_error(连接对象) | 返回具体的连接错误信息 |
| die(”提示错误信息“) | 终止操作，提示错误信息 |
3.0 php操作数据库的封装
<?php
header("Content-type:text/html;charset=utf-8");
// 1.0 封装增加、删除和修改的操作
function opt($sql) {
// 创建连接
$conn = mysqli_connect("localhost", "root", "root", "mytable");
// 如果连接成功返回连接对象，如果不成功，返回false
if(!$conn) {
die("数据库连接失败~");
}
// 设置编码
mysqli_set_chartset($conn, "utf8");
// 执行$sql语句，接收返回值
$res = mysqli_query($conn, $sql);
// 及时关闭连接
mysqli_close($conn);
// 返回结果
return $res;
}
// 2.0 封装查询操作
function select() {
// 创建连接
$conn = mysqli_connect("localhost", "root", "root", "mytable");
// 如果连接成功返回连接对象，如果不成功，返回false
if(!$conn) {
die("数据库连接失败~");
}
// 设置编码
mysqli_set_chartset($conn, "utf8");
// 查询语句的返回值，成功返回资源（结果集），不成功返回false
$res = mysqli_query($conn, $sql);
if(!$res) {
echo "查询失败";
} else if (mysqli_num_rows($res) == 0) {
echo "没有查找到数据~";
} else {
// 有结果集也有数据行
while($arr = mysqli_fetch_assoc($res)) {
$result = $arr;
}
// 及时关闭连接
mysqli_close($conn);
return $return;
}
// 操作完毕，关闭连接
mysqli_close($conn);
}
?>
使用
<?php
header("Content-type:text/html;charset=utf-8");
// 载入封装的文件
include_once "./common.php";
$res = opt("insert into mytable values(null, '张三', 28, '男', 1112334)");
// 如果有限制唯一的值，注意在写入的时候会报错
if($res) {
echo "新增成功";
} else {
echo "新增失败";
}
?>
Ajax
1.0 异步和请求
异步：在发起请求之后，不用理会这个过程，等请求结束了，自动返回回来数据，不用进行等待；
1.1 get请求
// 1.1 创建异步对象
var xhr = new XMLHttpRequest();
// 1.2 请求行发送 open(请求方式，请求url+键值对的参数):
xhr.open("get","validate.php?username="+name); // url地址 ? 键=值 & 键=值 & 键=值
// 1.3 get请求没有请求头
// 1.4 请求体:发送请求
xhr.send(null);
// 1.5 通过readystate发生改变的事件处理响应
xhr.onreadystatechange = function(){
// 1.6 判断请求是否结束后成功返回 判断服务器状态码是否为200
if(xhr.readyState == 4 && xhr.status == 200){
// 通过xhr对象的responseText接收返回的数据，写入盒子内
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
1.2 post请求
// 1.1 创建异步对象
var xhr = new XMLHttpRequest();
// 1.2 设置请求行 open(请求方式，请求url)
// post请求不需要拼接参数
xhr.open("post","validate.php");
// 1.3 设置请求头:setRequestHeader()
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 1.4 设置请求体 send()
// post的参数在这个函数中设置(如果有参数)
xhr.send("username="+name);
// 1.5 通过readystate发生改变的事件处理响应
xhr.onreadystatechange = function(){
// 1.6 判断请求是否结束后成功返回 判断服务器状态码是否为200
if(xhr.readyState == 4 && xhr.status == 200){
// 通过xhr对象的responseText接收返回的数据，写入盒子内
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
2.0 JSON文件
| 关于json的描述 |
|---|
| 1，一组花括号表示一个对象，一个对象通过键值对写入一堆相关数据 |
| 2，一组方括号表示一个数组，多组对象通过数组的方式装载 |
| 3，对象的所有属性都必须加上双引号，值没有undefined |
| 4，文件后缀名为.json，json格式的数据内不允许写注释 |
[
{
"src":"./images/nav_1.png" ,
"text":"京东超市"
},
{
"src":"./images/nav_2.png" ,
"text":"全球购物"
},
{
"src":"./images/nav_3.png" ,
"text":"京东市场"
}
]
| 前端操作json的方式 | |
|---|---|
| JSON.parse(json字符串) | 将json格式的字符串转换为数组或者对象 |
| JSON.stringify(对象或者数组) | 将字面量对象或者数组转换为json格式的字符串 |
| php操作json的方式 | |
|---|---|
| json_decode(json字符串) | 将json格式的字符串转换为php的数组或者对象 |
| json_encode(关联数组) | 将php的数组转换为json字符串 |
3.0 封装ajax请求
var dilireba = {
// 将{"name":"jack","age":20} 的参数要转换为 ?name=jack&age=20
getpa:function(data){
if(data && typeof data == "object"){
var str = "?";
for(var key in data){
str = str + key + "=" + data[key] + "&";
}
str = str.substr(0,str.length-1);
}
return str;
},
ajax:function(option){
// 接收用户参数进行相应处理
var type = option.type || 'get';
// location.href 可以获取当前文件的路径
var url = option.url || location.href;
// 接收参数:在js中最方便收集的数据类型为对象，所以我们就规定传递的参数必须是对象
var data = this.getpa(option.data) || "";
// 响应成功之后的回调函数 => 这个函数一般就是处理字符拼接，标签渲染的函数
var success = option.success;
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行 如果是get请求就需要拼接参数
if(type == "get"){
url += data;
data = null; // 拼接后设置data为null，在send()方法中就不会再次发送
}
xhr.open(type,url);
// 请求头 如果是post才需要请求头
if(type == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
// 请求体
xhr.send(data);
// 让异步对象接收响应
xhr.onreadystatechange = function(){
// 一个成功的响应有两个条件：1.服务器成功响应 2.数据解析完毕可以使用
if(xhr.status == 200 && xhr.readyState == 4){
// 接收响应的返回值 responseText responseXML
var rh = xhr.getResponseHeader("Content-Type");
if(rh.indexOf("xml") != -1){
var result = xhr.responseXML;
}
else if(rh.lastIndexOf("json") != -1){
var result = JSON.parse(xhr.responseText);
}else{
var result = xhr.responseText;
}
// 接收数据之后，调用回调函数
success && success(result)
}
}
},
}
4.0 jQuery中ajax的使用
$.ajax({
type: 'post',
url: './server/nav-json.php',
data: {},
success: function (result){
var data = JSON.parse(result);
var arr = [];
for(var i=0;i<data.length;i++){
var str = "<li>"
+ '<a href="#">'
+ '<img src="' + data[i].src + '" alt="">'
+ '<p>' + data[i].text + '</p>'
+ '</a>'
+ '</li>';
arr.push(str)
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = arr.join("");
}
});
5.0 模板引擎的使用
步骤1：
<script src="./js/template-native.js"></script>
步骤2：
<script type="text/template" id="navTemp"> <li> <a href="#"> <img src="<%= src %>" alt=""> <p><%= text %></p> </a> </li> </script>
步骤3：
<script>
var obj = {
"src": "./images/nav-1.png",
"text": "京东超市"
}
// 调用函数 templete(模板id, 数据(对象)) 返回替换后的DOM结构
var html = template(navTemp, obj);
document.querySelector("ul").innerHTML = html;
</script>
5.1 简洁语法
引入简洁文件，书写简洁语法，调用方法还是一样
<script type="text/template" id="musicTemp">
{{ each items as value index }}
<tr>
<td>{{ items[index].title }}</td>
<td>{{ value.singer }}</td>
<td>{{ value.album }}</td>
<td>
<audio src="{{ value.src }}" controls></audio>
</td>
<td>
<a href="./edit.php?id={{ value.id }}" class="btn btn-primary">编辑</a>
<a href="./edit.php?id={{ value.id }}" class="btn btn-danger">删除</a>
</td>
</tr>
{{ /each }}
</script>
总结调用（参数2必须为对象）:
1，如果接收的是对象，那么先打印对象看看对应的数组叫什么，在模板里面就循环什么
2，如果接收的是数组，那么先包装成对象，给数组取什么名字，在模板里面就循环什么
6.0 跨域
6.1 服务器端设置跨域
<?php
// 设置跨域请求
header("Access-Control-Allow-Origin:*"); // * 允许代表所有域来请求
header("Access-Control-Allow-Origin:http://day09.com");
echo file_get_contens("nav.json");
?>
6.2 前端使用jsonp跨域
$.ajax({
type: "get",
url: "http://day8.com/getnav.php",
dataType: "jsonp",
success: function(res) {
var html = template("navTemp", {"items": res})
document.querySelector("ul").innerHTML = html
}
})
6.3 跨域的原理
7.0 XMLHttpRequest2.0
7.1 timeout
document.querySelector("button").onclick = function(){
var xhr = new XMLHttpRequest();
// 设置请求行
xhr.open("get","01-timeout.php");
// 设置请求头:get不需要设置
// 设置请求体
xhr.send(null);
// 设置超时
xhr.timeout = 2000;
xhr.ontimeout = function(e){
console.log(e);
}
// 接收响应
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
7.2 FormData
<script>
document.querySelector("#sub").onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("post","02-formData.php");
// 1.手动拼接
// 2.如果是jq,那么就可以使用表单序列化方法
// 3.现在在XMLHttpRequest2.0 ,我们可以使用FormData来收集表单数据
// 1.获取表单
var myform = document.querySelector("#form1");
// 2.将表单做为参数传递，在创建formData对象的时候
var formdata = new FormData(myform);
// 特点之一：可以自由的追加参数
formdata.append("address","传智播客");
// 3.生成的formData对象就可以直接做为异步对象的参数传递
xhr.send(formdata);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
}
}
</script>
7.3 上传文件
<script>
document.querySelector("#sub").onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("post","03-uploadFile.php");
//如果设置了请求头，那么文件数据无法正确的传递
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var myform = document.querySelector("#form1");
var formData = new FormData(myform);
xhr.send(formData);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
}
}
</script>
7.4 onprogress事件
// 监听文件上传的进度:这个监听必须在send之前来设置
xhr.upload.onprogress = function(e){
var current = e.loaded;//上传了多少
var total = e.total;//总共
var percent = current / total * 100 +"%";
document.querySelector(".in").style.width = percent;
document.querySelector("span").innerHTML = Math.floor(current / total * 100)+"%";
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- PHP+MYSQL+AJAX实现每日签到
- php数据导入到mysql /AjaxFileUplo…
- PHP+mysql+ajax轻量级聊天室实现方法详解
- Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
- 利用ajax 在当前页面 和php mysql 传递数据 wamp 环境
- 【京东账户】——Mysql/PHP/Ajax爬坑之页头页尾加载
- PHP+MySQL安全方案整理
- PHP+MySQL安全方案整理
- 【整理】Linux下中文检索引擎coreseek4安装，以及PHP使用sphinx的三种方式(sphinxapi，sphinx的php扩展，SphinxSe作为mysql存储引擎)
- PHP+jQuery+Ajax+Mysql如何实现发表心情功能
- ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
- Centos7搭建php+mysql环境(整理篇）
- 会员注册验证代码(php+mysql+Ajax)
- jQuery(Ajax)/PHP/MySQL实现搜索自动提示功能
- php+mysql 使用ajax的注册页面（1）
- 使用ajax+dom+php+mysql实现多级联动（省市县）
- ajax+dom+php+mysql实现多级联动效果
- PHP+Ajax+Mysql邮箱找回密码
- 第35篇 一对多自由控制语音（十四）及PHP - AJAX 与 MySQL 周六
- ajax --- jquery + php 代码整理