ajax学习笔记

Posted 2020-08-31

初识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(status)
          }  
      }
      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){con.innerHTML = eee},

  error:function(eve){console.log(eve)} 

});

到这里第一期小白教学就到这了，敬请期待jsonp跨域。我从哪里来：西兄弟连前端http://www.lampbrother.net/html5/index.html

本文出自 “12133660” 博客，请务必保留此出处http://12143660.blog.51cto.com/12133660/1897134