ajax的知识点剖析

前言

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

一、ajax简介与作用

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

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

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

window.onload=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);      })

生活寄语

爱代码，爱生活！