ajax总结(四):原生js封装a和jQurey版ajax介绍

最新推荐文章于 2022-01-11 22:34:46 发布

转载最新推荐文章于 2022-01-11 22:34:46 发布 · 129 阅读

本文介绍如何在JavaScript中封装AJAX请求以简化代码复用，并对比jQuery的AJAX方法。通过实例展示了请求的封装过程及jQuery的AJAX、表单序列化的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.为什么要封装?

发现很多地方都要用ajax请求，但是大部分代码都是一样的，所以根据封装的思想，相同的代码封装成函数，在需要用的地方来调用,这样会很方便.

二.js封装ajax过程:

1.先了解结构代码和后台代码:
结构:

<body>
    <input type="button" value="获取一个JSON数据" id="btn"/>
</body>

<?php
echo'{"name":"jack","age":16}';//这是一条JSON数据
?>

后台：

开始封装函数

    //开始封装函数
  function ajax(params){
/*  *  params.type:请求方式
    *  params.url：请求路径
    *  params.data:提交给服务器的数据
    *  params.success: 响应完成时调用的回调函数
    *  params.dataType: 用来告诉我响应体是什么类型的，我就帮你转成对应的对象 */

    //1.创建请求对象
    var xhr=new XMLHttpRequest();
    //不管你传过来的是大写还是小写.统一先转换成小写
    params.type=params.type.toLowerCase();
    //判断请求体是不是get并且有写值,如果是的话拼接url
    if(params.type=="get"&& params.data!=undefined){
        params.url+="?"+params.data;
    }

    //2.设置请求行
    xhr.open(params.type,params.url)

    //判断是不是get请求,是的话不需要第3步的设置请求头,直接发送请求
    if(params.type=="get"){
        //4.发送请求
        xhr.send();
    }else{//说明是post请求
        //3.需要设置请求头,这句话很长,直接复制就好
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //4.发送请求,在方法里面加上要提交给服务器的数据
        xhr.send(params.data);

    }
    //5.监听响应完成事件
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            //这里写响应完成事件
			/*考虑到之前的封装有一个问题:我希望如果我告诉你响应体是JSON，
			你就自动帮我做转换，我告诉你是XML，你也帮我转成XML
			解决办法:在回调函数后面又多加一个参数叫res
			具体做法:
			1.在响应完成那里，先声明一个变量res = xhr.resonseText;
			2.判断dataType是否等于JSON,如果是把res重新赋值为转换为JSON对象的值;
			3.继续判断(else if)dataType是否等于XML，如果是，
			把res重新赋值为转换为XML对象的值;
			4.调用回调函数，传入res
			*/
            //先默认赋值为字符串的响应体
            var res =xhr.responseText;
            if(params.dataType=="json"){
                //按JSON方法来转换成js对象
                res=JSON.parse(xhr.responseText);
            }else if(params.dataType=="xml"){
                var parser=new DOMParser();
                res=parser.parseFromString(xhr.responseText,'text/xml');
            /*上面两句话的补充说明:后台传入的是xml数据,如果直接用xhr.responseXML拿不到
            响应体,这时就我们需要转换
                天气预报案例演示:
                console.log(xhr.responseXML);//得到null,因为XML的数据我们无法直接获取
                响应体,这时我们需要手动转换
                //这时候我们就需要自己手动把它转成XML对象
                //第一步:创建一个文档转换对象
                var parser = new DOMParser();
                //第二步:把响应体转成xml对象
                var xml = parser.parseFromString(xhr.responseText,'text/xml');
                console.log(xml);//打印<resp>...<resp>,即成功得到xml对象                                  
              */
            }
            params.success(res);//函数调用
        }

    }

  }

4.函数调用:

        //按钮点击事件
        document.getElementById('btn').onclick = function () {
            //调用函数
            ajax({
                type: "get",
                url: "getJSON.php",
                dataType: "json",
                success: function (obj) {//回调函数,需要执行的响应体事件代码写在这里就好
                    console.log(obj);//成功拿到后台的传过来的数据,{name: "jack", age: 16}
                }
            })
        }

三.jQuery中的ajax

jQuery中用来发ajax请求的方法，跟我们封装的方法类似，但是功能更强大.
使用语法:

//里面传入一个对象
$.ajax({ 
  //请求网址
  url: './data.php',
  //请求类型
  type: 'post',
  //服务器响应数据类型，如果是跨域，可以改成jsonp
  dataType: 'json',
  //发送给服务器的数据（请求体）,如果是get请求数据写在url,如果是post才写data属性
  data: { id: 1 },
  //回调函数：响应回来调用的函数
  success: function (data) {
    console.log(data)
  },
  //请求失败触发
  error: function (err) {
    console.log(err)
  }
    
})

另外, $.get()：跟上面一样的，只是不用写type属性，因为它就是发get请求的;
$.post()：跟上面一样的，只是不用写type属性，因为它就是发post请求的.

四.jQuery里面的表单序列化

特点：能找到这个表单下面所有带name属性的表单元素（file除外），能把它们自动拼接成key=value形式的字符串，key就是它们的name，value就是它们自己输入的内容或者选择的内容.
使用案例:

<script>

    $('#btn').click(function(){

         /*表单的序列化，它能找到这个表单下面所有带name属性的表单元素(文件是拿不到的)，
          并取到它们的值，做成key=value形式的字符串，key是它们的name，
         值就是它们输入或者选中的内容*/
         var res = $('form').serialize();

         console.log(res);
         
    });

</script>

---------------------
作者：庚中
来源：优快云
原文：https://blog.youkuaiyun.com/xiaodi520520/article/details/84074929
版权声明：本文为博主原创文章，转载请附上博文链接！