Ajax 入门

最新推荐文章于 2025-12-15 15:15:21 发布
原创 最新推荐文章于 2025-12-15 15:15:21 发布 · 571 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #xmlhttprequest #function #mozilla #javascript #浏览器

最近，想学学ajax，所以整个入门例子 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
    

  </head>
  <script language="javascript">
    var http_request = false;
    var currentPos = null;
    var number1=0;
    var number2=0;
    function send_request(url) {//初始化、指定处理函数、发送请求的函数
        http_request = false;
        //开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest) { //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {//设置MiME类别
                http_request.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) { // IE浏览器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) { // 异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
        }
        http_request.onreadystatechange = processRequest;
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("GET", url, false);
        http_request.send(null);
    }
    // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                //alert(http_request.responseText);
    document.getElementById("showData").innerHTML = http_request.responseText;
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
    
    function showResult() {
        document.getElementById("showData").innerHTML = "正在读取数据..."
        number1=document.getElementById("number_1").value;
        number2=document.getElementById("number_2").value;
        
        send_request("ajax.jsp?number_1="+number1+"&number_2="+number2);
    }
</script>
  <body>
  <input  type="text" id="number_1"/>*<input type="text" id="number_2" onblur="showResult()"/>=
    <label id="showData"></label><br>

  </body>
</html>
//ajax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%String number1,number2;
number1=request.getParameter("number_1");
number2=request.getParameter("number_2");


out.println(Integer.valueOf(number1).intValue()*Integer.valueOf(number2).intValue());
%>
skycliff
关注
Ajax入门
qq_44791442的博客
03-12 1213
AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。XML:可扩展标记语言XML作用:用来被传输和存储数据(html用来呈现数据)XML和HTML类似，不同的是html都是预定义标签，而XML都是自定义标签比如说我有一个学生数据:name = “孙悟空”;age = 18;
Ajax入门教程
qq_22075913的博客
03-31 5924
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
AJAX入门
weixin_46065399的博客
07-09 736
简单入门AJAX
Day01_Ajax入门 (黑马教程)
weixin_53720617的博客
11-16 1245
答案1. 先引入插件到自己的网页中，2. 准备form和表单元素的name属性，3.使用serialize函数，传入form表单和配置对象答案先明确要完成的需求，以及需要的参数，再来实现其中的细节，然后在需要的地方调用
ajax入门
dzz_bc的博客
05-24 640
AJAX    A  synchronous  J A vaScript and  X  ML 异步刷新传统方式如果校验用户名的话，需要提交验证，用户名存储在数据库中，只有提交才可与服务器交互。ajax是局部刷新的功能，下边的例子，就是可以直接和servlet交互，从而达到校验的目的。get方式jsp页面&lt;%@ page language="java" contentType="text/h...
前端知识——Ajax入门详解
2302_80480647的博客
05-15 934
异步请求：当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。这一特点可以很大程度上提升用户的体验，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。通俗来说Ajax就是一个用于交换前后端数据的工具，但是Ajax有着异步性的特点，这使得用户在使用浏览器时不会因为向后端发送请求而中断其他操作进程，同时在交换数据时只更新部分网页而不是刷新整个页面。：不需要安装插件，原生js即可使用。（不刷新获取新消息）
python教程之ajax入门
09-07
### Python教程之AJAX入门知识点详解 #### 一、AJAX基础学习 1. **概念理解**： - **AJAX（Asynchronous JavaScript and XML）**：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - 主要通过在...
《ajax入门经典》源代码
11-18
**Ajax入门经典源代码概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交互，结合XML或其他...
Vue3 Ajax（Axios）详解
csbysj2020
12-13 490
Axios是一个基于Promise的HTTP客户端，可以用于浏览器和node.js中。支持Promise API，易于使用支持请求和响应拦截器支持转换请求和响应数据支持取消请求支持自动转换JSON数据支持跨域请求本文详细介绍了Vue3中使用Axios进行Ajax请求的方法和技巧。通过使用Axios，我们可以方便地实现前后端交互，提高开发效率。希望本文对您有所帮助。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 978
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 227
Boolean。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 165
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 989
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1273
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
华为云 DevUI初体验：如何快速入门项目搭建
康宝的博客
12-10 552
本文详细介绍了基于Angular 18和华为云DevUI的企业级Web应用开发环境搭建流程。主要内容包括：Node.js 20+环境准备、Angular CLI 18安装、项目初始化配置（选择SCSS样式）、DevUI组件库及图标库的安装。文章重点说明了如何在项目中正确配置DevUI样式和模块，并演示了基础组件的使用。通过这套技术方案，开发者可以快速构建具备丰富UI组件支持的企业级应用，提高开发效率。
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 655
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值