ajax学习笔记

初识ajax

前言

作为一个前端，工作中除了前端工作还要和后端大量交互，于是ajax就占据了前端的一席之地，废话不多说直奔主题，由浅搞定ajax，主要针对小白，初学，望大神勿喷

正文

一、 ajax是什么？局部异步刷新数据，简单说就是不用刷新整个页面，想让哪加载后台数据就让哪加载，减少不必要数据传输，降低数据流量，用户不用等待等一大堆好处，就是谁用谁知道那种。

二、ajax怎么工作的？ 相当于在用户和服务器之间添加了一个中间层，使用户操作与服务器响应异步化，这个中间层干啥，它能做一些验证和数据处理然后再请求服务器，让用户操作感觉更加流畅。在这里要注意，相当于是客户端（浏览器）帮助服务器（后台）做了一部分工作，实现了界面与应用分离的效果

三、ajax使用时候要注意什么？1.浏览器是否支持ajax，2.它把浏览器的后退功能给破坏了，同时加入收藏书签也不能用了3.安全问题-ajax暴露了更多的数据和逻辑

四、 最重要的一点，我知道上边的你不会都看完，但是以后你还要看

实现

ajax的实现过程包括四个步骤

1.实例化XMLHttpRequest对象
从客户端（浏览器）发送http请求，需要一个提供此功能的类的实例，没错XMLHttpRequest对象就是应需求实现的一个类
第一步实例化一个XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2.连接服务器

xhr.open()

3.发送请求

xhr.send()

4.接收响应数据

监听：onreadystatechange,当readyState属性发生改变时调用

readyState有五个状态码，从0开始直到接收整个完整的HTTP响应，这个值增加到4表示已经完全接收

responseText
对请求的响应，

---

讲到这理论部分就结束了，接下来举个栗子，使用get方式请求ajax

js部分

var xhr = new XMLHttpRequest();xhr.open('get', 'getData.php', true);xhr.send();xhr.onreadystatechange = function() {    if (xhr.readyState == 4 && xhr.status == 200) {        var data = xhr.responseText;        con.innerHTML = data;    }}      

后台部分

echo '如果你能抓到我我就让你嘿嘿嘿。。。';

简单的栗子用ajax实现页面无刷新获取后台数据

更上一层楼

上边简单的栗子实现页面无刷新调用后台数据，这一次我们把这个方法封装起来重复调用

function getData(json){     json = json || {};     json.data = json.data || {};     json.type = (json.type || 'GET').toUpperCase();//          实例化一个XMLHttpRequest对象      if(window.XMLHttpRequest){          xhr = new XMLHttpRequest;      }else{          //ie6及其以下版本          xhr = new ActiveXObject('Microsoft.XMLHTTP');      }//          设置请求      //监听事件   只要readyState的值发生改变即触发readystatechange时事件      xhr.onreadystatechange = function(){          if(xhr.readyState==4 && xhr.status==200){              //判断返回得数据类型              var res='';              var dataType = xhr.getResponseHeader('Content-type');              if(dataType.indexOf('xml') !== -1){                  res = xhr.responseXML              }else if(dataType == 'application/json'){                  res = JSON.parse(xhr.responseText)              }else{                  res = xhr.responseText;              }              //成功以后的回调函数              json.success && json.success(res)          }else{              json.error && json.error()          }        }      if(json.type=='GET'){          xhr.open(json.type,json.url+'?'+json.data,true)          xhr.send()      }else{          xhr.open(json.type,json.url,true);          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');          xhr.send(json.data)      }      }

调用

        getData({                type:'GET',                url:'getData.php',                success:function(eee){console.log(eee)},                error:function(eve){}            });

到这里第一期小白教学就到这了，我从哪里来：兄弟连前端