Ajax请求GET/POST方法的封装

时间：2021-08-08 02:57:42

  1. XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作


    1、建立XMLHttpRequest对象

    2、注册回调函数

    3、使用open方法设置和服务器交互的基本信息

    4、设置发送的数据，开始和服务器交互

    5、在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。



  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>GET请求封装</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript">
  11. // 方法
  12. // get(url, options, callback)    get是Ajax请求GET方法的封装
  13. // 参数
  14. // url    {String}    请求资源的url
  15. // options    {Object}    请求的查询参数
  16. // callback    {Function}    请求的回调函数，接收XMLHttpRequest对象的responseText属性作为参数
  17. // 返回
  18. // void
  19. function get(url,options,callback){//定义get函数
  20.     //查询参数序列化
  21.     function serialize(options){
  22.         if(!options){//如果没有查询参数
  23.             return "";//返回空字符
  24.         }else{//否则
  25.             var pairs=[];//定义一个数组
  26.             for(var name in options){//遍历对象属性
  27.                 if(!options.hasOwnProperty(name)) continue;//过滤掉继承的属性和方法
  28.                 if(typeof options[name]==="function") continue;//过滤掉方法
  29.                 var value=options[name].toString();//属性值转字符串
  30.                 name=encodeURIComponent(name);//URI编码
  31.                 value=encodeURIComponent(value);//URI编码
  32.                 pairs.push(name+"="+value);//属性名和属性值放入数组
  33.             }
  34.             return pairs.join("&");//返回字符串
  35.         }
  36.     }
  37.     var xhr=new XMLHttpRequest();//创建Ajax对象
  38.     xhr.open("get",url+'?'+serialize(options));//开启一个异步请求
  39.     xhr.send(null);//发送请求
  40.     xhr.onreadystatechange=function(){//注册事件 处理返回数据
  41.         if(xhr.readyState==4){//若请求完毕
  42.             if(xhr.status>=200&&xhr.status<300||xhr.status==304){//若请求成功
  43.                 callback(xhr.responseText);//调用回调函数处理响应结果
  44.             }else{//若请求失败
  45.                 alert('Requst was unsuccessful:'+xhr.status);//返回请求失败原因
  46.             }
  47.         }
  48.     }  
  49. }
  50. //举例
  51. // get("/information",{name: "netease", age: 18},function (data) {
  52. //     console.log(data);
  53. // });
  54. </script>
  55. </body>
  56. </html>


  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>POST请求封装</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript">
  11. // post函数是对Ajax的POST请求的封装，语法如下：
  12. //     post(url, options, callback)
  13. // 没有返回值，参数说明如下：
  14. //     url：请求资源的url，String类型
  15. //     options：请求的查询参数，Object类型
  16. //     callback：回调函数，接收XMLHttpRequest对象的responseText属性作为参数，Function类型
  17.  
  18. function post(url,options,callback){//定义post函数
  19.     //查询参数序列化
  20.     function serialize(options){
  21.         if(!options){//如果没有查询参数
  22.             return "";//返回空字符
  23.         }else{//否则
  24.             var pairs=[];//定义一个数组
  25.             for(var name in options){//遍历对象属性
  26.                 if(!options.hasOwnProperty(name)) continue;//过滤掉继承的属性和方法
  27.                 if(typeof options[name]==="function") continue;//过滤掉方法
  28.                 var value=options[name].toString();//属性值转字符串
  29.                 name=encodeURIComponent(name);//URI编码
  30.                 value=encodeURIComponent(value);//URI编码
  31.                 pairs.push(name+"="+value);//属性名和属性值放入数组
  32.             }
  33.             return pairs.join("&");//返回字符串
  34.         }
  35.     }
  36.     //创建Ajax对象
  37.     if(XMLHttpRequest){
  38.         var xhr=new XMLHttpRequest();
  39.     }else{
  40.         var xhr=new ActiveXObject("Microsoft.XMLHTTP");//兼容ie
  41.     }
  42.      
  43.     xhr.open("post",url);//开启一个异步请求
  44.     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头部
  45.     xhr.send(serialize(options));//发送请求
  46.     xhr.onreadystatechange=function(){//注册事件 处理返回数据
  47.         if(xhr.readyState==4){//若请求完毕
  48.             if(xhr.status>=200&&xhr.status<300||xhr.status==304){//若请求成功
  49.                 callback(xhr.responseText);//调用回调函数处理响应结果
  50.             }else{//若请求失败
  51.                 alert('Requst was unsuccessful:'+xhr.status);//返回请求失败原因
  52.             }
  53.         }
  54.     }  
  55. }
  56. // 使用示例如下：
  57.      //  post('/addUser', {name: 'jerry', age: 1}, function(data) {
  58.      //    //处理返回数据
  59.      // });
  60. </script>
  61. </body>
  62. </html>

标签：

相关文章