Ajax的get/post两种请求方式及ajax封装函数

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("请求失败");}}}}}

服务器响应

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

alert(xhrhttp.responseText);   //打印出php文件中的内容

XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveObject)

用于在后台与服务器交换数据

//兼容IE
if (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);}
}