ajax的知识点剖析

前言

ajax无疑是改变互联网前端的一个突破点，为了更深刻的记忆和掌握ajax相关知识点，故总结了这篇ajax学习的心得，纯属为了以后自己查询，虽然ajax网上资料多多的。以下，我将就js实现ajax和jQuery实现ajax分别类比学习总结，并且就js实现ajax进行函数式封装及对象封装

一、ajax简介与作用

俗话说的好，只有了解的用法与情景，才会深入的领悟它的魅力，那就简单总结它的作用：

1.ajax就是前后端通信，即服务器、客户端数据交换
    2.ajax=异步JavaScript和xml(json)
    3.通过在后台与服务器进行少量数据交换，AJAX可以使网页异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新的

二、ajax的普通使用，代码如下：

window.οnlοad=function(){
  //创建ajax对象的三步走战略

  //创建xhr对象
  var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

  //配置xhr对象,第一个参数是请求类型(下例以get请求为例)，第二个参数是请求路径，第三个参数是：是否是异步，默认值是true（异步）
  xhr.open('GET','http://127.0.0.1:3000/test.php?user=123&pass=321',true);

  //发送请求数据
  xhr.send(null);

  //通过监听xhr对象下的readystate来反应服务器处理请求的状态
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
      //从xhr下的responseText属性中拿到服务器返回的值,然后再解析
      console.log(xhr.responseText);
    }
  }


}

三、ajax的封装

第一种形式是：普通函数参数的封装；代码如下

//以函数式的形式封装一个实现ajax的函数

/**
*函数参数如下：
*1.ajax的请求类型  type
*2.请求路径        url
*3.请求数据        data
*4.成功的回调函数  successFn
*5.失败的回调函数  errorFn
*/
function ajaxFn(type,url,data,successFn,errorFn){
    //创建xhr对象
    var xhr=window.XMLHttpRequest()?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

    //将传进来的请求类型转为统一大写或者小写，再进行判断什么类型的请求
    type=type.toUpperCase();

    if(type==' GET'){
      //配置xhr对象
      xhr.open('GET',url+'?'+data,true);
      xhr.send(null);
    }else if(type=='POST'){
      xhr.open('POST',url,true);
      xhr.send(data);
    }else{
      console.log('请求数据类型不匹配');
    }

    //监听xhr对象的readyState的属性从而反应服务器的请求状态
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4 && xhr.status ==200){
        //当服务器出来数据完成并发送到了前端，则调用回调函数，就服务器获取的数据作为回调函数的参数
        successFn(xhr.responseText);
      }else if(xhr.status==404){
        errorFn('页面找不到！');
      }else if(xhr.status == 500){
        errorFn('服务器报错');
      }
    }
}

第二种形式是：将对象作为参数，封装一个实现ajax的函数，代码如下：

//给函数传一个对象类型的参数，来实现ajax的封装
/**
*传进的对象有属性和方法:
*1.type:请求方式
*2.url:请求的url
*3.data:请求的数据
*4.successFn,请求成功的回调函数
*5.errorFn,请求失败的回调函数
*
*/

function ajax(obj){
  //创建xhr对象
  var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

  //先将对象里面的type转为小写或大写，再进行判断是否是什么类型的请求，然后做出相应的判断
  type=obj.type.toLowerCase();
  if(type=='get'){
    //配置xhr对象
    xhr.open('get',obj.url+'?'+obj.data,true);
    xhr.send(null);
  }else if(type == 'post'){
    xhr.open('post',obj.url,true);
    xhr.send(obj.data);
  }else{
    console.log('请求参数有误，请重新配置！');
  }

  //监听xhr对象的readyState的属性从而反应服务器的请求状态
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status ==200){
      obj.successFn(xhr.responseText);
    }else if(xhr.status == 404){
      obj.errorFn('页面找不到！请重新查询')
    }else if(xhr.status == 500){
      obj.errorFn('服务器找不到！请检查后在进行请求')
    }
  }

}

四、使用jQuery进行ajax各种各样的方法：

1>.jquery的load()方法：从服务器上获取静态数据文件

. 1、载入HTML文档：element.load(url,[data],[callback])
        参数：url：字符串类型的url地址
        参数：data：对象类型，发送给服务器的key/value数据
        参数：callback:请求完成时的回调函数，无论成功与否
  1.2、参数传递方式：根据data参数自动切换传递方式，如故没有data参数，则使用get传递，有参数则转换为post方式传递
        1.3、回调函数中的参数：

第一个参数：请求返回的内容；

第二个参：请求状态（success，error，notmodified,timeout4种;

第三个参：xhr对象

代码如下：

$('#content').load('./data.html',function(data,status){
         if(status == 'error'){
           $('#content').text('你找到页面无法找到');
         }else if(status =='success'){
           console.log(data);
         }
       })

2>.jquery的get和post方法

2.1、$.get(url,[data],[callback],[type])方法

          参数情况：
            参数1.url参数，字符串类型的url地址
            参数2.data参数，发至服务器的key\value值对，对象类型
            参数3.callback参数：载入成功时的回调函数
            参数4.type参数，返回数据的格式如：（xml\html\script\json\text等）
            注意：返回的数据格式：HTML片段：通过html（）方法直接拼接进文档节点中；json文件：获取到json中key所对应的value，拼接进html文档中

代码如下：

$.get('./data.xml',{
              user:'张三',
              pass:'1233'
            },function(data,status,xhr){
              console.log(data);
              console.log('回调函数触发');
            })

2.2、$.post()方法的用法参数与get一致

3>.jquery的ajax方法，即$.ajax(options)

3.1、$.ajax(options),参数option是一个对象类型的数据包含：

    参数：url：请求的地址；
    参数：type：请求类型(get/post);
    参数：data：提交到服务器中的数据，字符串类型
    参数：success:请求成功的回调函数，该函数有一个参数即保存服务器返回的值
    参数：error：请求失败时的回调函数，该函数有三个参数，分别是xhr对象，错误信息和错误对象

代码如下：

$.ajax({
       url:"./data.json",
       data:"user=zhangsan&pass=123",
       type:"get",
       success:function(data){
         console.log(data);
       },
       error:function(err){
         console.log(err);
       }
     });

3.2、使用$.ajax进行JSONP跨域

      代码如下示：

$.ajax({
            url:'http://127.0.0.1/news.php',
            type:'GET',
            data:'callback=?', //指定回调函数的属性
            dataType:'jsonp',  //指定数据格式，为jsonp跨域请求
            jsonp:'callback',  //指定回调函数的属性名
            success:function(data){
              console.log(data)
            }
          })

4>.getJSON()方法：专用于加载json文件，语法格式：$.getJSON(url,[callback])

参数url：文件url外加请求参数
      参数callback：载入成功后的回调函数，data参数存放了请求到的数据
      代码如下示：

$.getJSON('http://10.0.156.213/data.php?cb=?',function(data){
        console.log(data);
      })

生活寄语

爱代码，爱生活！