AJAX手写JQuery框架封装AJAX请求实现传参的方式发送请求------AJAX

雨点打透心脏的1/2处 2024-02-06 06:16 49阅读 0赞

> ##  ##
> 
>     // 封装一个函数,通过这个函数就可以获取页面中的元素了
>     function JQuery(selector)//可能时#id或者.class这样的类选择器
>     {
>         if(typeof selector === "string")
>         {
>             // 设计思路根据CSS语法
>             if (selector.charAt(0) === "#")
>             {
>                 // 根据ID获取元素
>                 //这个是全局对象,是根据我们的ID获取的dom对象
>                 IE = document.getElementById(selector.substring(1));
>                 //返回JQuery对象,这个有html方法
>                 return new JQuery();
>             }
>         }
>         if(typeof selector === "function")
>         {
>             window.onload = selector;
>         }
>         //定义一个HTML方法
>         this.html = function(htmlStr)
>         {
>             IE.innerHTML = htmlStr;
>         }
>         //定义一个click函数代替onclick方法
>         this.click = function(fun)
>         {
>             IE.onclick = fun;
>         }
>         //由此可知
>         this.val = function(value)
>         {
>             if(value === undefined)
>             {
>                 return IE.value;
>             }
>             else
>             {
>                 IE.value = value;
>             }
>         }
>         //定义一个静态方法用来发送AJAX请求
>         //JS中的静态方法也还是需要有这个对象的
>         //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
>         JQuery.ajax = function(JsonArgs)
>         {
>             var xhr = new XMLHttpRequest();
>             xhr.onreadystatechange = function()
>             {
>                 if (this.readyState === 4)
>                 {
>                     if (this.status === 200)
>                     {
>                         var JsonObj = JSON.parse(this.responseText);
>                         JsonArgs.success(JsonObj);
>                     }
>                     else
>                     {
>                         alert(this.status);
>                     }
>                 }
>             }
>             if(JsonArgs.type.toUpperCase() === "POST")
>             {
>                 xhr.open("POST",JsonArgs.url,JsonArgs.async);
>                 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
>                 xhr.send(JsonArgs.data);
>             }
>             if(JsonArgs.type.toUpperCase() === "GET")
>             {
>                 JsonArgs.type = "GET";
>                 xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
>                 xhr.send();
>             }
>         }
>     }
>     $ = JQuery;
>     //执行这个的目的是为了让静态方法能生效
>     new JQuery();
> 
>     // 封装一个函数,通过这个函数就可以获取页面中的元素了
>     function JQuery(selector)//可能时#id或者.class这样的类选择器
>     {
>         if(typeof selector === "string")
>         {
>             // 设计思路根据CSS语法
>             if (selector.charAt(0) === "#")
>             {
>                 // 根据ID获取元素
>                 //这个是全局对象,是根据我们的ID获取的dom对象
>                 IE = document.getElementById(selector.substring(1));
>                 //返回JQuery对象,这个有html方法
>                 return new JQuery();
>             }
>         }
>         if(typeof selector === "function")
>         {
>             window.onload = selector;
>         }
>         //定义一个HTML方法
>         this.html = function(htmlStr)
>         {
>             IE.innerHTML = htmlStr;
>         }
>         //定义一个click函数代替onclick方法
>         this.click = function(fun)
>         {
>             IE.onclick = fun;
>         }
>         //由此可知
>         this.val = function(value)
>         {
>             if(value === undefined)
>             {
>                 return IE.value;
>             }
>             else
>             {
>                 IE.value = value;
>             }
>         }
>         //定义一个静态方法用来发送AJAX请求
>         //JS中的静态方法也还是需要有这个对象的
>         //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
>         JQuery.ajax = function(JsonArgs)
>         {
>             var xhr = new XMLHttpRequest();
>             xhr.onreadystatechange = function()
>             {
>                 if (this.readyState === 4)
>                 {
>                     if (this.status === 200)
>                     {
>                         var JsonObj = JSON.parse(this.responseText);
>                         JsonArgs.success(JsonObj);
>                     }
>                     else
>                     {
>                         alert(this.status);
>                     }
>                 }
>             }
>             if(JsonArgs.type.toUpperCase() === "POST")
>             {
>                 xhr.open("POST",JsonArgs.url,JsonArgs.async);
>                 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
>                 xhr.send(JsonArgs.data);
>             }
>             if(JsonArgs.type.toUpperCase() === "GET")
>             {
>                 JsonArgs.type = "GET";
>                 xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
>                 xhr.send();
>             }
>         }
>     }
>     $ = JQuery;
>     //执行这个的目的是为了让静态方法能生效
>     new JQuery();

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>jq</title>
>     </head>
>     <body>
>     <script type="text/javascript" src="JS/jQuery-1.0.0.js"></script>
>     <script type="text/javascript">
>         $(function()
>         {
>             $("#btn").click(function()
>             {
>                 var username = $("#username").val();
>                 $.ajax({
>                     type : "POST",
>                     url : "/ajax/resp",
>                     data : username,
>                     async : true,
>                     //对于程序响应回来如何解析
>                     success : function(JsonObj)
>                     {
>                         //这里的JSON就是响应回来的数据了
>                         $("#myDiv").html(JsonObj.address);
>                     }
>                 });
>             });
>         });
>     </script>
>         <button id="btn">发送AJAX请求</button>
>         用户名:<input type="text" id="username">
>         <div id="myDiv"></div>
>     </body>
>     </html>
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>jq</title>
>     </head>
>     <body>
>     <script type="text/javascript" src="JS/jQuery-1.0.0.js"></script>
>     <script type="text/javascript">
>         $(function()
>         {
>             $("#btn").click(function()
>             {
>                 var username = $("#username").val();
>                 $.ajax({
>                     type : "POST",
>                     url : "/ajax/resp",
>                     data : username,
>                     async : true,
>                     //对于程序响应回来如何解析
>                     success : function(JsonObj)
>                     {
>                         //这里的JSON就是响应回来的数据了
>                         $("#myDiv").html(JsonObj.address);
>                     }
>                 });
>             });
>         });
>     </script>
>         <button id="btn">发送AJAX请求</button>
>         用户名:<input type="text" id="username">
>         <div id="myDiv"></div>
>     </body>
>     </html>