将AJAX请求手动封装到JQuery中

最新推荐文章于 2023-11-24 19:53:18 发布

写bug的小菜鸟

最新推荐文章于 2023-11-24 19:53:18 发布

阅读量123

点赞数

文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/weixin_53975122/article/details/124838525

版权

注意事项1.参数为字符串时是封装了getElementById()；2.只封装了数据交换格式为JSON格式

jQuery中封装了如何获取元素，元素的onclick,onchange,value属性，页面加载完毕执行函数，

将AJAX编程（1.获取XMLHttpRequest对象2.注册函数3.开启连接4.发送请求），参数在前端封装为JSON

function jQuery(args){
        //通过id获取元素
         //如果参数是个字符串，返回一个元素
        if (typeof args == "string") {
            //只封装一个id拿元素
            if (args.charAt(0) == "#"){
                var eleid = args.substring(1)
                //声明为全局变量
                //每调用一次jQuery 函数，这个ele是唯一的
                element = document.getElementById(eleid);
                //返回jQuery对象，才能使用后面的方法
                return new jQuery
            }
        }
         //如果参数是个函数默认浏览器页面加载完毕执行
        if (typeof args == "function"){
            window.onload = args
        }
        //封装jQuery对象的属性为方法,参数为一个函数
         //这个元素的onclick属性
         this.click= function (fun){
            element.onclick = fun
         }

         //这个元素的onchange属性
        this.change= function (fun){
             element.onchange = fun
         }

         //这个元素的value属性
         this.val= function (){
             return (element.value)
         }

         //这个元素的innerhtml属性
         this.html= function (htmlyext){
             element.innerHTML = htmlyext
         }
        /*封装AJAX
        * 1.请求方式
        * 2.url
        * 3.ansyc
        * 4.date
        * 5.success（拿到JSON后如何显示通过HTML代码）
        * */
        //静态方法ajax
         jQuery.ajax = function (jsonargs){
            //1
             var xhr = new XMLHttpRequest();
             //2
           xhr.onreadystatechange = function (){
               if (xhr.readyState == 4) {
                   if (xhr.status == 200) {
                       //拿到json对象
                       var jsonobj = JSON.parse(this.responseText)
                       jsonargs.success(jsonobj)
                   }
               }
           }
           //3
             if (jsonargs.type == "GET"){
                 xhr.open("GET",jsonargs.url + "?" + jsonargs.date,jsonargs.async)
                 //4
                 xhr.send()
             }

             if (jsonargs.type == "POST"){
                 xhr.open("POST",jsonargs.url ,jsonargs.async)
                 //4
                 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
                 xhr.send(jsonargs.date)
             }

         }
    }
     //js中没有new实例，静态方法也失效
     new jQuery()
     $ = jQuery

HTML代码：

type:请求方式，url：请求路径，async:是否支持异步，date：name=value&name=value...,succes:后端发送的JSON如何显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试封装的jQuery</title>
</head>
<body>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
    $(function (){
        $("#btntest").click(function (){
            <--!发送AJAX请求，参数封装为一个JSON对象-->
            $.ajax({
                /*type:"GET",*/
                type:"POST",
                url:"/ajax/test/servlet05",
                async:true,
                date:"username="+$("#username").val(),
                success:function (jsonobj){
                    $("#mydiv").html(jsonobj.username)
                }
                }
            )
            }
        )
    })

</script>
<input type="text" id = "username"/><br>
<input type="button" id = "btntest" value = "发送请求"/><br>
<div id = "mydiv"></div>
</body>
</html>