ajax技术和php
1.get和post
1.1基本
-
含义:可以通过form标签的method属性指定发送请求的类型
-
如果是get请求会将提交的数据拼接到URL后面,?userName=lnj&userPwd=123456
-
如果是post请求会将提交的数据放到请求头中
<form action="post.php" method="post"> <input type="text" name="username"/><br /> <input type="password" name="userpass" /> <input type="submit" value="提交" /> </form>
1.2 GET请求和POST请求的异同
- 4.1相同点:都是将数据提交到远程服务器
- 不同点:提交数据存储的位置不同,GET请求会将数据放到URL后面,POST请求会将数据放到请求头中
- 提交数据大小限制不同:GET请求对数据有大小限制,POST请求对数据没有大小限制
1.3 GET/POST请求应用场景
- GET请求用于提交非敏感数据和小数据
- POST请求用于提交敏感数据和大数据
2.文件上传
-
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-post-file</title> </head> <body> <!-- 注意: 1.上传文件一般使用POST提交 2.上传文件必须设置enctype="multipart/form-data" 3.上传的文件在PHP中可以通过$_FILES获取 4.PHP中文件默认会上传到一个临时目录, 接收完毕之后会自动删除 --> <!-- 默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改xampp的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 ; 最大的内存消耗 --> <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代码
<?php //print_r($_FILES);//会输出一个关键字是表单中name的数组 // 1.获取上传文件对应的字典 $fileInfo = $_FILES["upFile"];//包含当前文件的名字,路径,大小等信息 //print_r($fileInfo); // 2.获取上传文件的名称 $fileName = $fileInfo["name"]; // 3.获取上传文件保存的临时路径 $filePath = $fileInfo["tmp_name"]; // 4.移动文件 move_uploaded_file($filePath, "./source/".$fileName); ?>
3.ajax
3.1 什么是ajax
- AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
3.2 ajax用法:共五步
<script> window.onload = function (ev) { var oBtn = document.querySelector("button"); oBtn.onclick = function (ev1) { // 1.创建一个异步对象 var xmlhttp=new XMLHttpRequest(); // 2.设置请求方式和请求地址 /* method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） */ xmlhttp.open("GET", "04-ajax-get.php", true); // 3.发送请求 xmlhttp.send(); // 4.监听状态的变化 xmlhttp.onreadystatechange = function (ev2) { /* 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 */ //我们只需监听最后一个 if(xmlhttp.readyState === 4){ // 判断是否请求成功 xmlhttp.status是状态码200~300或304 if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){ // 5.处理返回的结果 console.log("接收到服务器返回的数据"); }else{ console.log("没有接收到服务器返回的数据"); } } } } } </script>
3.3 在IE浏览器注意的问题
3.4 封装get和post
-
JavaScript代码
window.onload = function (ev) { var oBtn = document.querySelector("button"); var res = encodeURIComponent("wd=张三"); console.log(res); oBtn.onclick = function (ev1) { // 汉字不能识别需要转换成这种格式 %E5%BC%A0%E4%B8%89 // https://www.baidu.com/s?wd=%E5%BC%A0%E4%B8%89 // url?key=value&key=value; //以下写法的优点,参数的位置没有影响,因为是对象 ajax({ url:"04-ajax-get.php", data:{ "userName":"lnj", "userPwd":"123456" }, timeout: 3000, type:"post", success: function (xhr) { alert(xhr.responseText); }, error: function (xhr) { alert("请求失败"); } }); } }-
自己封装的方法
function obj2str(data) { /* { "userName":"lnj", "userPwd":"123456", "t":"3712i9471329876498132" } */ data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 data.t = new Date().getTime(); var res = []; for(var key in data){ // 在URL中是不可以出现中文的, 如果出现了中文需要转码 // 可以调用encodeURIComponent方法 // URL中只可以出现字母/数字/下划线/ASCII码 res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456]; } return res.join("&"); // userName=lnj&userPwd=123456 } function ajax(option) { // 0.将对象转换为所要格式字符串 var str = obj2str(option.data); // key=value&key=value; // 1.创建一个异步对象,处理兼容性问题 var xmlhttp, timer; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.设置请求方式和请求地址 /* method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） */ if(option.type.toLowerCase() === "get"){ xmlhttp.open(option.type, option.url+"?"+str, true); // 3.发送请求 xmlhttp.send(); }else{ xmlhttp.open(option.type, option.url,true); // 注意点: 以下代码必须放到open和send之间 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(str); } // 4.监听状态的变化 xmlhttp.onreadystatechange = function (ev2) { /* 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 */ if(xmlhttp.readyState === 4){ clearInterval(timer); // 判断是否请求成功 if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){ // 5.处理返回的结果 // console.log("接收到服务器返回的数据"); option.success(xmlhttp); }else{ // console.log("没有接收到服务器返回的数据"); option.error(xmlhttp); } } } // 判断外界是否传入了超时时间 if(option.timeout){ timer = setInterval(function () { console.log("中断请求"); xmlhttp.abort(); clearInterval(timer); }, option.timeout); } }
3.5 在jQuery中的ajax封装
//jQuery已经帮我们封装好了ajax,直接用就行 ajax({ url:"04-ajax-get.php", data:{ "userName":"lnj", "userPwd":"123456" }, timeout: 3000, type:"post", success: function (xhr) { alert(xhr.responseText); }, error: function (xhr) { alert("请求失败"); } });
4. cookie的使用
-
4.1cookie基础
window.onload = function (ev) { /* cookie: 会话跟踪技术 客户端 session: 会话跟踪技术 服务端 cookie作用: 将网页中的数据保存到浏览器中 cookie生命周期: 默认情况下生命周期是一次会话(浏览器被关闭) 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据 cookie注意点: cookie默认不会保存任何的数据 cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置 cookie有大小和个数的限制 个数限制: 20~50 大小限制: 4KB左右 cookie作用范围: 同一个浏览器的同一个路径下访问 如果在同一个浏览器中, 默认情况下下一级路径就可以访问 如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以; document.cookie = "name=zs;path=/;"; 例如: 保存到了www.it666.com/jQuery/Ajax/路径下, 我们想在 www.it666.com/jQuery/Ajax/13-weibo/, 和 www.it666.com/jQuery/ 路径下也能访问 例如: 我们在www.it666.com下面保存了一个cookie, 那么我们在edu.it666.com中是无法访问的 如果想在edu.it666.com中也能访问, 那么我们需要再添加一个domain属性才可以; document.cookie = "name=zs;path=/;domain=it666.com;"; */ alert(document.cookie); var date = new Date(); date.setDate(date.getDate() - 1); document.cookie = "age=33;expires="+date.toGMTString()+";"; alert(document.cookie); document.cookie = "name=lnj;"; document.cookie = "age=33;"; alert(document.cookie); document.cookie = "name=lnj;age=33;gender=male;"; document.cookie = "name=zs;path=/;domain=127.0.0.1;"; }
-
4.2 cookie的封装
;(function ($, window) { $.extend({ addCookie: function (key, value, day, path, domain) { // 1.处理默认保存的路径 var index = window.location.pathname.lastIndexOf("/") var currentPath = window.location.pathname.slice(0, index); path = path || currentPath; // 2.处理默认保存的domain domain = domain || document.domain; // 3.处理默认的过期时间 if(!day){ document.cookie = key+"="+value+";path="+path+";domain="+domain+";"; }else{ var date = new Date(); date.setDate(date.getDate() + day); document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";"; } }, getCookie:function (key) { // console.log(document.cookie); var res = document.cookie.split(";"); // console.log(res); for(var i = 0; i < res.length; i++){ // console.log(res[i]); var temp = res[i].split("="); // console.log(temp); if(temp[0].trim() === key){ return temp[1]; } } }, delCookie:function (key, path) { addCookie(key, getCookie(key), -1, path); } }); })(jQuery, window);
-
5.hash
//hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。 //假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。 //该属性的作用与cookie类似 //设置hash window.location.hash = 3; //获取hash console.log(window.location.hash.substring(1));
网友评论