AJAX手写JQuery框架封装AJAX请求和常见方法实现项目功能省市联动查询效果------AJAX

已于 2024-01-18 15:02:12 修改
阅读量188 收藏
点赞数 6
分类专栏： AJAX 计算机网络 JAVA 文章标签： sql mysql javascript ajax js java java-ee
于 2023-11-17 15:10:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134459632
版权
JAVA 同时被 3 个专栏收录
551 篇文章 3 订阅
订阅专栏
计算机网络
134 篇文章 0 订阅
订阅专栏
AJAX
45 篇文章 0 订阅
订阅专栏 
CREATE TABLE t_stu(id BIGINT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255),age INT,address VARCHAR(255));
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"zhangsan",15,"广州")
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Jack",15,"广州")
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Rose",15,"广州")
SELECT  * FROM t_stu
CREATE TABLE t_area(id BIGINT PRIMARY KEY AUTO_INCREMENT,`code` VARCHAR(255),`name` VARCHAR(255),pcode VARCHAR(255))
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'001','河北省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'002','河南省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'003','邯郸市','001');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'004','石家庄','001');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'005','郑州市','002');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'006','洛阳市','002');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'007','江苏省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'008','南京市','007');
SELECT  * FROM t_area

CREATE TABLE t_stu(id BIGINT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255),age INT,address VARCHAR(255));
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"zhangsan",15,"广州")
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Jack",15,"广州")
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Rose",15,"广州")
SELECT  * FROM t_stu
CREATE TABLE t_area(id BIGINT PRIMARY KEY AUTO_INCREMENT,`code` VARCHAR(255),`name` VARCHAR(255),pcode VARCHAR(255))
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'001','河北省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'002','河南省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'003','邯郸市','001');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'004','石家庄','001');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'005','郑州市','002');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'006','洛阳市','002');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'007','江苏省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'008','南京市','007');
SELECT  * FROM t_area

// 封装一个函数,通过这个函数就可以获取页面中的元素了
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.change = function(fun)
    {
        IE.onchange = 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.change = function(fun)
    {
        IE.onchange = 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();
package com.bjpowernode.AJAX.servlet;

import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import com.bjpowernode.oa.utils.DBUtil;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/getAll")
public class GetAllPro extends HttpServlet
{
    @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");
//        链接数据库
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        String sql = null;
        String pcode = request.getParameter("code");
        if(pcode == null)
        {
            sql = "select * from t_area where pcode is null";
        }
        if(pcode != null)
        {
            sql = "select * from t_area where pcode = ?";
        }
        try
        {
            connection = DBUtil.getConnection();
            statement = connection.prepareStatement(sql);
            if(pcode != null)
            {
                statement.setString(1,request.getParameter("code"));
            }
            resultSet = statement.executeQuery();
            List<Area> list = new ArrayList<>();
            while(resultSet.next())
            {
                Area area = new Area();
                area.setId(resultSet.getLong("id"));
                area.setCode(resultSet.getString("code"));
                area.setName(resultSet.getString("name"));
                area.setPcode(resultSet.getString("pcode"));
                list.add(area);
            }
            PrintWriter out = response.getWriter();
            out.println(JSON.toJSONString(list));
        }
        catch (SQLException e)
        {
            throw new RuntimeException(e);
        }
    }
}

package com.bjpowernode.AJAX.servlet;

import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import com.bjpowernode.oa.utils.DBUtil;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/getAll")
public class GetAllPro extends HttpServlet
{
    @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");
//        链接数据库
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        String sql = null;
        String pcode = request.getParameter("code");
        if(pcode == null)
        {
            sql = "select * from t_area where pcode is null";
        }
        if(pcode != null)
        {
            sql = "select * from t_area where pcode = ?";
        }
        try
        {
            connection = DBUtil.getConnection();
            statement = connection.prepareStatement(sql);
            if(pcode != null)
            {
                statement.setString(1,request.getParameter("code"));
            }
            resultSet = statement.executeQuery();
            List<Area> list = new ArrayList<>();
            while(resultSet.next())
            {
                Area area = new Area();
                area.setId(resultSet.getLong("id"));
                area.setCode(resultSet.getString("code"));
                area.setName(resultSet.getString("name"));
                area.setPcode(resultSet.getString("pcode"));
                list.add(area);
            }
            PrintWriter out = response.getWriter();
            out.println(JSON.toJSONString(list));
        }
        catch (SQLException e)
        {
            throw new RuntimeException(e);
        }
    }
}
旧约Alatus
关注
专栏目录
手写实现 AJAX
qq_45324956的博客
05-25 184
/1. 简单流程 // 实例化 let xhr = new XMLHttpRequest() // 初始化 xhr.open(method, url, async) // 发送请求 xhr.send(data) // 设置状态变化回调处理请求结果 xhr.onreadystatechange = () => { if (xhr.readyStatus === 4 &&xhr.status === 200) { console.log(xhr.resp...
手写AJAX
uaena的博客
10-16 900
【代码】手写AJAX。
手写ajax
ShiningDays的博客
09-19 1614
ajax 的 readyState：运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；（由数字0~4单位数字组成）4 - (完成)响应内容解析完成，可以在客户端调用了，对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。0 - (未初始化)还没有调用send()方法，在定义后自动具有的状态值。1 - (载入)已调用send()方法，正在发送请求。2 - (载入完成)send()方法执行完成，
Ajax的工作原理及优缺点！读完这篇你就懂了！！！
youjinli122的博客
08-19 7778
1.概念：什么是AJAX AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。 2.为什么要使用他？ 最大的优点：不刷新整个页面的情况下与服务器通信保持原有页面状态，通俗点，浏览网页的时候回有两种情况，点击，1，白屏，等待跳转到另一个页。2.页面不刷新，局部出现新内容获得更好的用户体验。
手写原生Ajax
最新发布
kjl536566的博客
06-25 586
之前检查响应内容是否为空或不是有效的JSON格式，以避免运行时错误。此外，如果是跨域请求，还需确保服务器支持CORS（跨源资源共享）。以上代码是一个典型的AJAX GET请求的实现，用于向服务器请求数据并在客户端处理这些数据。属性表示请求的不同阶段（0到4），其中4表示请求已完成且响应已就绪。：在实际应用中，你可能还需要考虑错误处理，以及确保在调用。当请求的状态改变时，这个函数会被调用。属性是HTTP状态码，200表示请求成功。方法初始化一个请求。
jQuery的ajax下载blob文件
10-21
这样做虽然兼容性更好，但失去了jQuery带来的便利性和封装好的功能，同时如果之前已经使用了jQuery封装好的ajax方法，需要做很大的改动。 2. 通过查阅jQuery文档，尝试使用jQuery.ajaxSetup()来扩展数据类型处理。...
原生JS写Ajax的请求函数功能
10-18
描述部分强调了在某些情况下，使用像JQuery这样的封装好的库来处理Ajax请求可能引入许多不必要的功能，导致文件体积庞大。因此，在只需要实现基础Ajax功能的简单页面中，通过原生JavaScript实现Ajax请求功能可以减少...
原生JS封装的ajax方法，使用类似Jquery
09-11
原生js封装的ajax，使用上类似jquery一样便捷，里边有示例，可以参考
Jquery Ajax分页（有实例）
05-24
jQuery封装了AJAX操作，提供了一套简洁的API，如`$.ajax()`, `$.get()`, `$.post()`等，使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型：服务器端分页和客户端分页。服务器端分页意味着每次用户翻页时，...
JS实现Ajax的方法分析
10-20
### Ajax概念 Ajax（Asynchronous JavaScript and XML）是一种在...在实际开发中，除了手写Ajax实现外，还可以利用现代前端开发框架中的Ajax库，如jQuery的$.ajax()，或者使用Promise风格的fetch API来实现类似功能。
AJAX实例-手写js
11-03
用js写的Ajax <script language="javascript" type="text/javascript"> var xmlHttp; //创建xmlHttpRequest function createXMLRequest() { if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器 }else if(window.XMLHttpRequest){ //其他浏览器 xmlHttp=new XMLHttpRequest(); }else{ alert("不支持XMLHttpRequest"); } }
手写Ajax
王二狗
05-08 965
//创建xhr function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器 var ver
手写一个AJAX
周周池的博客
04-21 1061
总结，写个博客记录一下 const ajax = (method, url, data, success, fail) => { var request = new XMLHttpRequest() request.open(method, url); request.send(data); // 如果是POST请求有请求体，GET没有请求体 request.onreadystatechange = function () { if (reques
手写一个ajax
wangyoushuai的博客
02-27 1109
在我看来，写一个ajax就需要5步，也就是5个单词，这就是一个ajax的流程。 这五个单词分别为：new open setRequestHeader onreadystatechange send。记住这五个单词你就有了ajax的整体的框架了。 首先：new字 let ajax = fucntion (){ let httpRequest; // IE7以上，以及其他主流浏览器 if(win...
手写一个简单的AJAX?
wang_qiu_shuang的博客
10-13 2191
手写AJAX 我们常用的 ajax 就是通过 XMLHttpRequest 对象实现的，这个对象有很多的属性和事件，在使用之前，我们需要先将它实例化 var xhr = new XMLHttpRequest() xhr.readyState用来获取ajax状态码，共有5个 xhr.readyState为0 请求未初始化,未调用 open() xhr.readyState为1 请求已建立，但还未发送请求（未调用 send） xhr.readyState为2 已发送请求（已调用 send） xhr.rea
11.手写封装Ajax请求
qq_74217055的博客
02-08 474
AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
ASP.NET使用AJAX和jQuery-UI实现进度条示例
"ASP.NET编程知识，使用AJAX和jQuery-UI创建进度条功能的文档" 在ASP.NET开发中，有时候我们需要向用户提供一个可视化的进度条来表示后台任务的执行状态。这个例子展示了如何利用AJAX技术和jQuery-UI库在前端展示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值