ajax概述

目录

1.什么是ajax

2.ja原生ajax

3.jQuery框架的ajax

4.综合案例


1.什么是ajax

Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

同步方式发送请求

发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会处于一直等待过程中。(卡死)

异步方式发送请求

发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。

2.ja原生ajax

1)创建Ajax引擎对象

2)为Ajax引擎对象绑定监听服务器变化的事件

设置回调函数(自定义函数,服务器响应成功后,AJAX自动调用函数)

3)绑定提交地址

4)发送请求

5)接受响应数据

 function butOnclick() {//1.获取AJAX对象var xmlhttp = new XMLHttpRequest();//2.给AJAX对象添加监听AJAX引擎状态变化的事件,并设置事件的回调函数xmlhttp.onreadystatechange=function(){         if (xmlhttp.readyState==4 && xmlhttp.status==200){// 5.获取服务器响应的数据document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}//3.绑定要发送到服务器的地址xmlhttp.open("GET","${pageContext.request.contextPath}/js_ajax",true);//4.把AJAX请求发送到服务器xmlhttp.send();}<input type="button" value="AJAX异步提交" onclick="butOnclick()"/><div id="myDiv"></div>

3.jQuery框架的ajax

语法:jQuery.get(url, [data], [callback], [type])

GET请求方式

  $("#btn").click(function (){$.get('http://localhost:8080/MyFilter_war_exploded/ajax',{name:'list'},function (data){$('#div').html(data);}) ;

POST请求方式

$.post('/MyFilter_war_exploded/ajax',{name:'list'},function (data){$('#div').html(data);})

AJAX请求方式

 $.ajax({//1:URL地址url:"/MyFilter_war_exploded/ajax",// 2:异步请求async:true,//3:给服务器传递参数data:"name=haohao&age=33",//4:请求方式type:"POST",//5 :响应数据的类型dataType:"text",// 6: 回调函数 data 接受到的服务器响应过来的数据success:function(data){alert(data);},//7: 回调函数:服务器出错的时候执行error:function(){alert("数据没有成功返回!")}});

4.综合案例

检测用户名是否已经被注册

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/14295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多线程(JavaEE初阶系列5)

目录 前言&#xff1a; 1.什么是定时器 2.标准库中的定时器及使用 3.实现定时器 结束语&#xff1a; 前言&#xff1a; 在上一节中小编给大家介绍了多线程中的两个设计模式&#xff0c;单例模式和阻塞式队列模式&#xff0c;在单例模式中又有两种实现方式一种是懒汉模式&a…

初识TDMQ

目录 一&#xff1a;需求背景二&#xff1a;相关文档三&#xff1a;验证TDMQ广播消息 一&#xff1a;需求背景 目前公司需要将决策引擎处理的结果&#xff0c; 一部分数据交给下游分析/入黑/通知等功能。因此就需要决策引擎生产结果让多方下游去消费。 而我需要实现下游的一部…

微信小程序转抖音小程序的坑:The component <xxx> used in pages/xxx/xxx is undefined

微信小程序组件定义在根目录的 app.json 中了&#xff0c;在抖音小程序中出现找不到的情况。 在需要用到组件的 pages 目录中页面文件夹的 json "usingComponents": {} 大括号中添加页面使用的组件&#xff0c;即可使用...

STM32使用HAL库BH1750光照度传感器

开发环境 单片机&#xff1a;STM32F103C8T6 光照度传感器&#xff1a;BH1750 IDE&#xff1a;KEILSTM32CUBEMX 单片机配置 1、STM32CUBEMX BH1750代码 1、头文件 /* ************************************************* BH1750光照数据计算&#xff08;LUX&#xff09; …

Shell脚本实现分库分表操作

目录 一&#xff0c;分库备份 二&#xff0c;分库操作 三&#xff0c;分库分表备份 四&#xff0c;备份还原 一&#xff0c;分库备份 #!/bin/bash mysql_cmd-uroot -pzly666666 bak_path/backup/db [ -d ${bak_path} ] || mkdir -p ${bak_path}mysql ${mysql_cmd} -e show…

操作系统期末总复习结构

目录 前言 操作系统引论 操作系统的目标 操作系统的基本特征 操作系统的主要功能 系统调用的基本概念 进程的描述与控制 进程和程序的区别 程序为什么不能并发执行&#xff08;引入进程的原因&#xff09; 进程的基本状态与转换 进程通信的类型 线程的概念以及与进程…

解决Django报错 : No module named ‘MySQLdb‘

Django的版本是2.0&#xff0c;Python的版本号是3.6.4 在models.py创建好了模型类之后使用命令&#xff1a;python manage.py makemigrations 进行迁移&#xff0c;但是突然报错&#xff1a;ImportError:No module named MySQLdb 查询了相关资料发现python2.x版本是支持mysql…

Linux - PostgreSQL 适用于9.x 以上的 tar.gz 源码安装与理解 - 报错集锦

这里写目录标题 序言主要内容bash 配置文件个人理解关于初始化 PostgreSQL 数据库的理解 启动方法检查服务器是否在PostgreSQL中运行关闭 postgresql 数据库方法参考链接 序言 PostgreSQL 9.x 以下版本笔者没用过&#xff0c;具体操作看参考链接&#xff0c;笔者就不记录重复操…

类与对象(上-2)

类与对象&#xff08;上-2&#xff09; 6、类的实例化7、计算类空间的大小8、this指针 6、类的实例化 Test.cpp //用类类型创建对象的过程&#xff0c;称为类的实例化。 //类是对对象进行描述的&#xff0c;是一个 模型 一样的东西&#xff0c;来限定了类有哪些成员&#xff…

回答网友 修改一个exe

网友说&#xff1a;他有个很多年前的没有源码的exe&#xff0c;在win10上没法用&#xff0c;让俺看一下。 俺看了一下&#xff0c;发现是窗体设计的背景色的问题。这个程序的背景色用的是clInactiveCaptionText。clInactiveCaptionText 在win10之前的系统上是灰色&#xff0c;但…

幅度调制与角度调制

文章目录 前言一、调制简介1、调制定义2、调制目的3、调制的分类 二、幅度调制&#xff08;线性调制&#xff09;1、幅度调制的一般模型2、常规双边带调幅 AM①、AM 信号的产生②、AM 调制器的模型③、AM 波形和频谱④、AM 信号的特点⑤、AM 包络检波⑥、调幅系数 3、抑制载波双…

Java中对Redis的常用操作

目录 数据类型五种常用数据类型介绍各种数据类型特点 常用命令字符串操作命令哈希操作命令列表操作命令集合操作命令有序集合操作命令通用命令 在Java中操作RedisRedis的Java客户端Spring Data Redis使用方式介绍环境搭建配置Redis数据源编写配置类&#xff0c;创建RedisTempla…

推荐带500创作模型的付费创作V2.1.0独立版系统源码

ChatGPT 付费创作系统 V2.1.0 提供最新的对应版本小程序端&#xff0c;上一版本增加了 PC 端绘画功能&#xff0c; 绘画功能采用其他绘画接口 – 意间 AI&#xff0c;本版新增了百度文心一言接口。 后台一些小细节的优化及一些小 BUG 的处理&#xff0c;前端进行了些小细节优…

Spring依赖注入和ioc在spring中的实现方式

目录 一、依赖注入 1.IOC思想 2.什么是依赖注入&#xff1f; 3.实例化对象中有pojo类型属性 二、IOC在Spring中的实现方式 1.获取bean的三种方式 1.1根据bean的id获取 1.2根据bean的类型获取&#xff08;最常用&#xff0c;因为在IOC容器中&#xff0c;一个类型的bean只…

<MySQL> Centos 7环境安装MySQL

Centos 7环境安装MySQL 1.卸载不要的环境 停止MySQL服务 systemctl stop mariadb.service systemctl stop mysqld禁止MySQL服务开机自启 systemctl disable mysqld卸载MySQL软件包 yum remove mysql-server mysql-client删除MySQL数据目录 rm -rf /var/lib/mysql清理MySQ…

[golang gin框架] 42.Gin商城项目-微服务实战之后台Rbac微服务角色增删改查微服务

一.重构后台Rbac用户登录微服务功能 上一节讲解了后台Rbac微服务用户登录功能以及Gorm数据库配置单独抽离&#xff0c;Consul配置单独抽离&#xff0c;这一节讲解后台Rbac微服务角色增删改查微服务功能&#xff0c;Rbac微服务角色增删改查微服务和后台Rbac用户登录微服务是属于…

SpringBoot入门

目录 一、创建项目 二、项目结构 三、起步依赖 四、简单请求接口 控制类 1、无参数 2、简单参数 3、实体参数 4、数组集合参数 5、json参数 五、统一响应结果 result.java HelloResponse.java 测试结果 一、创建项目 Spring官方骨架&#xff0c;可以理解为Sprin…

解决 “Module build failed (from ./node_modules/babel-loader/lib/index.js)“ 错误的方法

系列文章目录 文章目录 系列文章目录前言一、错误原因&#xff1a;二、解决方法&#xff1a;三、注意事项&#xff1a;总结 前言 在前端项目开发中&#xff0c;如果使用了 Babel 来转译 ES6 语法&#xff0c;有时会遇到错误信息 “Module build failed (from ./node_modules/b…

提升开发效率,Lombok的链式编程和构建模式

目录 链式编程 定义 代码示例 ​编辑 Accessors(chaintrue) 开启链式编程 ​编辑 Accessors(chain true,fluent true) 去除set和get 构建模式 定义 代码示例 ​编辑 踩坑 Singular 定义 代码示例 踩坑默认值情况 ​编辑 With 定义 代码示例 链式编程 定义 链…

ChatGPT的应用与发展趋势:解析人工智能的新风口

目录 优势 应用领域 发展趋势 总结 在人工智能技术迅猛发展的时代&#xff0c;自然语言处理系统的提升一直是研究者们追求的目标。作为人工智能领域的重要突破之一&#xff0c;ChatGPT以其出色的语言模型和交互能力&#xff0c;在智能对话领域取得了重要的进展。 ChatGPT是…