AJAX基本用法
引言
Ajax是浏览器提供的一套方法，可以用来实现页面无刷新更新数据，提高用户体验。主要有GET和POST两种请求方式。
1. GET请求处理
GET请求会将数据放到URL后面
GET请求对数据大小限制(2000个字符以下)
用于提交非敏感数据和小数据
2.POST请求处理
POST请求会将数据放到请求头中
POST请求对数据没有大小限制
用于提交敏感数据和大数据
3.上传文件
注意：
上传文件一般使用POST提交上传文件必须设置enctype="multipart/form-data“上传的文件再PHP可以通过$_FILES获取PHP中文件默认会上传到一个临时目录，接收完毕之后会自动删除
语法：
move_upload_file(file,newloc);//file 规定要移动的文件位置//newloc 规定文件的新位置//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);
默认情况下服务器对上传文件的大小是有限制的，如果想修改上传文件的限制可以修改php.ini文件。(ctrl+f搜索)
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：最大的内存消耗
AJAX GET基本使用
创建一个异步对象设置请求方式和请求地址 open();method: 请求的类型(GET或POST)
url：文件在服务器的位置
async： true(异步)或false(同步)发送请求 send();监听异步对象状态的变化 onreadystatechange处理返回的结果
window.onload = function (ev) {var oBtn = document.querySelector('button');oBtn.onclick = function (ev1) {// 1.创建一个异步对象var xhrhttp = new XMLHttpRequest();// 兼容IEif (window.XMLHttpRequest) {xhrhttp = new XMLHttpRequest();} else {xhrhttp = new ActiveXObject("Microsoft.HMLHTTP");}// 2.设置请求方式和请求地址/* method: 请求的类型(GET或POST)url：文件在服务器的位置async： true(异步)或false(同步)*/xhrhttp.open("GET", "ajax04_get.php", true);// 3.发送请求xhrhttp.send();// 4.监听异步对象状态的变化xhrhttp.onreadystatechange = function (ev2) {// 5.处理返回的结果if (xhrhttp.readyState === 4) {if (xhrhttp.status >= 200 && xhrhttp.status < 300 || xhrhttp.status === 304) {console.log("请求成功");} else {console.log("请求失败");}}}}}
服务器响应
alert(xhrhttp.responseText); //打印出php文件中的内容
XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveObject)
用于在后台与服务器交换数据
//兼容IEif (window.XMLHttpRequest) {xhrhttp = new XMLHttpRequest();} else {xhrhttp = new ActiveXObject("Microsoft.HMLHTTP");}
POST基本使用
用 setRequestHeader() 像表单那样POST数据，添加HTTP头。
且应放到open和send中间
JSON 和 JS 的对象互转
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串
var json = JSON.stringify(a:'hello',b:'world'); //结果是 "a":'hello',"b":'world'var obj = JSON.parse("a":"hello",";b":"world");//结果是 a:'hello',b:'world'
AJAX的封装代码
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, Safarixmlhttp = new XMLHttpRequest();}else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}// 2.设置请求方式和请求地址/*method：请求的类型；GET 或 POSTurl：文件在服务器上的位置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);}}
如果觉得《Ajax的get/post两种请求方式及ajax封装函数》对你有帮助，请点赞、收藏，并留下你的观点哦！
