AJAX手写JQuery框架封装AJAX请求和常见方法实现无DOM对象操作------AJAX

素颜马尾好姑娘i 2024-02-17 08:43 35阅读 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>
>       <script src="JS/jQuery-1.0.0.js"></script>
>     </head>
>     <body>
>     <script type="text/javascript">
>       function User(userCode,username)
>       {
>         this.userCode = userCode;
>         this.username = username;
>         this.doSome = function()
>         {
>           console.log(this.userCode,this.username);
>         }
>       }
>       $(function()
>       {
>         $("#btn").click(function()
>         {
>           $("#myDiv").html("<font color='red'>哈哈哈</font>");
>           var user = new User(111,"Tom");//创建对象,堆中分配空间
>           // User();//当作函数,不创建对象,堆中没有这个对象
>           user.doSome();
>           User.prototype.getUser = function()
>           {
>             alert(this.username);
>           }
>           // user.getUser();
>         });
>         $("#MyBtn").click
>         (function()
>         {
>           $.ajax({
>             type : "gEt",
>             url : "resp",
>             data : "username=" + $("#username").val(),
>             async : true,
>             success : function(value){
>               console.log(value);
>               $("#myClass").html(value.name);
>             }
>           })
>           $("#username").val("获取了");
>         });
>         $("#Hello").click(function(){
>           alert($("#uio").val());
>         })
>       });
>     </script>
>       <button id="btn">显示信息</button>
>       <div id="myDiv"></div>
>       <input name="aiHao" type="checkbox">
>       <input name="username" id="username" type="text">
>       <button id="MyBtn">按下</button>
>       <span id="myClass"></span>
>       <button id="Hello">Hello</button>
>       <input id="uio" type="text">
>       <span class="myClass"></span>
>     </body>
>     </html>
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>JQ</title>
>       <script src="JS/jQuery-1.0.0.js"></script>
>     </head>
>     <body>
>     <script type="text/javascript">
>       function User(userCode,username)
>       {
>         this.userCode = userCode;
>         this.username = username;
>         this.doSome = function()
>         {
>           console.log(this.userCode,this.username);
>         }
>       }
>       $(function()
>       {
>         $("#btn").click(function()
>         {
>           $("#myDiv").html("<font color='red'>哈哈哈</font>");
>           var user = new User(111,"Tom");//创建对象,堆中分配空间
>           // User();//当作函数,不创建对象,堆中没有这个对象
>           user.doSome();
>           User.prototype.getUser = function()
>           {
>             alert(this.username);
>           }
>           // user.getUser();
>         });
>         $("#MyBtn").click
>         (function()
>         {
>           $.ajax({
>             type : "gEt",
>             url : "resp",
>             data : "username=" + $("#username").val(),
>             async : true,
>             success : function(value){
>               console.log(value);
>               $("#myClass").html(value.name);
>             }
>           })
>           $("#username").val("获取了");
>         });
>         $("#Hello").click(function(){
>           alert($("#uio").val());
>         })
>       });
>     </script>
>       <button id="btn">显示信息</button>
>       <div id="myDiv"></div>
>       <input name="aiHao" type="checkbox">
>       <input name="username" id="username" type="text">
>       <button id="MyBtn">按下</button>
>       <span id="myClass"></span>
>       <button id="Hello">Hello</button>
>       <input id="uio" type="text">
>       <span class="myClass"></span>
>     </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()
>             {
>                 $.ajax({
>                     type : "POST",
>                     url : "/ajax/resp",
>                     data : "username=" + $("#username").val(),
>                     async : true,
>                     //对于程序响应回来如何解析
>                     success : function(JsonObj)
>                     {
>                         //这里的JSON就是响应回来的数据了
>                         console.log(JsonObj);
>                         $("#myDiv").html(JsonObj.name);
>                     }
>                 });
>             });
>         });
>     </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()
>             {
>                 $.ajax({
>                     type : "POST",
>                     url : "/ajax/resp",
>                     data : "username=" + $("#username").val(),
>                     async : true,
>                     //对于程序响应回来如何解析
>                     success : function(JsonObj)
>                     {
>                         //这里的JSON就是响应回来的数据了
>                         console.log(JsonObj);
>                         $("#myDiv").html(JsonObj.name);
>                     }
>                 });
>             });
>         });
>     </script>
>         <button id="btn">发送AJAX请求</button>
>         用户名:<input type="text" id="username">
>         <div id="myDiv"></div>
>     </body>
>     </html>

>     package com.bjpowernode.AJAX.servlet;
>     
>     import com.alibaba.fastjson.JSON;
>     import jakarta.servlet.ServletException;
>     import jakarta.servlet.annotation.WebServlet;
>     import jakarta.servlet.http.HttpServlet;
>     import jakarta.servlet.http.HttpServletRequest;
>     import jakarta.servlet.http.HttpServletResponse;
>     
>     import java.io.IOException;
>     
>     @WebServlet("/resp")
>     public class resp extends HttpServlet
>     {
>         @Override
>         protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             String username = request.getParameter("username");
>             Student student = new Student(1L,username,20,"BeiJing");
>             System.out.println(student);
>             response.getWriter().println(JSON.toJSONString(student));
>         }
>     
>         @Override
>         protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             String username = request.getParameter("username");
>             Student student = new Student(1L,username,20,"BeiJing");
>             System.out.println(student);
>             response.getWriter().println(JSON.toJSONString(student));
>         }
>     }
> 
>     package com.bjpowernode.AJAX.servlet;
>     
>     import com.alibaba.fastjson.JSON;
>     import jakarta.servlet.ServletException;
>     import jakarta.servlet.annotation.WebServlet;
>     import jakarta.servlet.http.HttpServlet;
>     import jakarta.servlet.http.HttpServletRequest;
>     import jakarta.servlet.http.HttpServletResponse;
>     
>     import java.io.IOException;
>     
>     @WebServlet("/resp")
>     public class resp extends HttpServlet
>     {
>         @Override
>         protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             String username = request.getParameter("username");
>             Student student = new Student(1L,username,20,"BeiJing");
>             System.out.println(student);
>             response.getWriter().println(JSON.toJSONString(student));
>         }
>     
>         @Override
>         protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             String username = request.getParameter("username");
>             Student student = new Student(1L,username,20,"BeiJing");
>             System.out.println(student);
>             response.getWriter().println(JSON.toJSONString(student));
>         }
>     }