如何封装JS原生ajax函数

首先我们要明白ajax的原理和使用步骤

ajax是我们与后台连接使用的一个文档，主要分为四步，有三步是我们前端工作人员去完成的，

第一步是建立ajax的对象，第二部是发送请求到后台，第三步是后台所编写的数据，第四步是我们收到后台返回数据的处理，第四步返回的格式经常的有xml和json还有字符串；

封装ajax的函数是为了我们以后工作方便使用，以后直接调用就可以的了；

主要有四个参数，(‘get或post’，‘后台做连接的文件路径’，send()数据，第四步接受后台返回的值函数)

首先是第一步建立对象，

1. if(window.XMLHttpRequest){
2. xhr=new XMLHttpRequest(); 这步是做ie7及以上的兼容
3. }
4. else{
5. xhr=new ActiveXObject('Microsoft.XMLHTTP'); 这步是做ie6的兼容
7. }

然后是第二步，发送请求到后台； 

1. if(method=='GET' && data){
2. //如果是get方式，并且有data：传数据到服务器
3. url=url+'?'+data;
4. 发送方式有两种，‘get'和'post'
5. } 如果用get方式发送就不用send（）数据，如果用psot方式发送就需要send()数据
6. xhr.open(method,url,true);
8. if(method=='GET'){
9. xhr.send(null);
10. }
11. else{
12. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
13. xhr.send(data);
14. }
15. 最后是第四步；接受后台返回的值；
16. 1. xhr.onreadystatechange=function(){
    2. if(xhr.readyState==4){
    3. if(xhr.status==200){
    4. if(fnsuccess){
    5. fnsuccess(xhr.responseText);//注意这里只能接收字符串，json和html数据。如果传过来的是xml数据格式，要换用responseXML属性
    6. }
    8. }
    9. else{
    10. alert('出差了，出错状态是：'+xhr.status);
    11. }
    12. }
    封成函数为；
17. 1. function ajax(method,url,data,fnsuccess){
    2. //1号线：创建ajax对象
    4. var xhr;
    5. if(window.XMLHttpRequest){
    6. xhr=new XMLHttpRequest();
    7. }
    8. else{
    9. xhr=new ActiveXObject('Microsoft.XMLHTTP');
    11. }
    13. //2号线：发送http请求（准备数据，真正的发送）
    15. if(method=='GET' && data){
    16. //如果是get方式，并且有data：传数据到服务器
    17. url=url+'?'+data;
    19. }
    20. xhr.open(method,url,true);
    22. if(method=='GET'){
    23. xhr.send(null);
    24. }
    25. else{
    26. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    27. xhr.send(data);
    28. }
    31. //4号线：拿到的数据返回给调用ajax函数的地方
    33. xhr.onreadystatechange=function(){
    34. if(xhr.readyState==4){
    35. if(xhr.status==200){
    36. if(fnsuccess){
    37. fnsuccess(xhr.responseText);//注意这里只能接收字符串，json和html数据。如果传过来的是xml数据格式，要换用responseXML属性
    38. }
    40. }
    41. else{
    42. alert('出差了，出错状态是：'+xhr.status);
    43. }
    44. }
    45. }
    46. }
    
    
18.