在我们很多网页中为了更好的用户体验都会采用局部刷新和提交数据, 今天我们就来讲讲这个 "功法" 是怎么修炼的,"功法" 的名称叫做 "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);
- // 如果请求方式是 get
- if(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);
- }
- }
- }
来源: http://www.bubuko.com/infodetail-2618280.html