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?username=niu&password=123',
                success:function(eee){console.log(eee)},
                error:function(eve){}
            });

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

转载于:https://my.oschina.net/u/3256948/blog/836835

你可能感兴趣的:(ajax学习笔记)