AJAX手写JQuery框架封装AJAX请求和常用方法实现不使用DOM元素------AJAX-摩杜云开发者社区

手写的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();

测试页面A

<!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>

测试页面B

<!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));
    }
}