在我们很多网页中为了更好的用户体验都会采用局部刷新和提交数据,今天我们就来讲讲这个"功法"是怎么修炼的,"功法"的名称叫做"ajax",其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
还是原来的配方我们先说一说ajax的请求流程(数据的请求方式有两种"get"和"post",流程大致相同但也有点不同)
1、get方式请求流程
//创建一个对象var xml = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");/*参数1：请求的方式参数2：请求的地址参数3：是否异步 默认true 异步 ??*/xml.open("get","http://localhost/ajax/login.php?",true);//第三个参数 ?true异步 ??false同步//发送xml.send();//监听ajax状态：xml.readyState：0 ?1 ?2 ?3 ?4//和服务器的状态:xml.status ?200成功xml.onreadystatechange = function(){if(xml.readyState == 4 && xml.status == 200){document.write(xml.responseText)}}2、post方式请求流程
var xml = new XMLHttpRequest();/*参数1：请求的方式参数2：请求的地址参数3：是否异步 默认true 异步 ??*/xml.open("post","http://datainfo.duapp.com/shopdata/userinfo.php?city=北京",true);//第三个参数 ?true异步 ??false同步//post请求的时候必须设置请求头xml.setRequestHeader("content-type","application/x-www-form-urlencoded");//发送 ?如果向服务传递数据的时候需要传递多个参数的时候用&符号分割xml.send("status=login&userID=zhao&password=123");//监听ajax状态：xml.readyState：0 ?1 ?2 ?3 ?4//和服务器的状态:xml.status ?200成功xml.onreadystatechange = function(){if(xml.readyState == 4 && xml.status == 200){console.log(JSON.parse(xml.responseText))}}3、了解get和post请求流程后我们开始对ajax封装
function ajax(method,url,json,success,error){//创建ajax实例var xml = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");//存储传递的参数var str = ‘‘;for(var key in json){str+="&"+key+"="+ json[key];}str = str.substr(1);//如果请求方式是getif(method == "get"){//因为get方式的请求方式是在url？后面传递参数url = url+"?"+str;//打开地址xml.open("get",url,true);//发送xml.send();}else{xml.open("post",url,true);//post的时候必须设置请求头xml.setRequestHeader("content-type","application/x-www-form-urlencoded");//必须把请求的参数放在send里面xml.send(str);}//监听ajax和服务器的状态xml.onreadystatechange = function(){//如果成功的话if(xml.readyState == 4 && xml.status == 200){//拿到服务端返回给客户端的数据var d = xml.responseText;//考虑1 d是空的 ??d不是一个对象if(typeof d !="object" && d !=""){d = JSON.parse(d);}success&&success(d);}else{error&&error(xml.status);}}}
ajax的封装
原文地址：https://www.cnblogs.com/tc-jieke/p/9093070.html