【JavaWeb】AJAX
目录
一、AJAX概述
1、AJAX介绍
2、AJAX优点
3、AJAX工作原理
二、AJAX应用
1、AJAX快速入门
1.1、第一步:获取一个XMLHttpRequest对象
1.2、第二步:设置一个回调函数
1.3、第三步设置请求方式GET/POST及请求的URL等
1.4、第四步真正向服务器发送请求
1.5、第五步在回调函数中获取服务器响应的数据
2、XMLHttpRequest对象详解
2.1、获取XMLHttpRequest 对象
2.2、XMLHttpRequest常用属性
2.3、XMLHttpRequest常用方法
三、AJAX案例
1、案例1-验证用户名是否可以使用
1.1、第一步:创建一个页面demo2.html
1.2、第二步:完成浏览器向服务器发送ajax请求操作
1.3、 第三步:完成服务器端操作
1.4、第四步:在浏览器端展示数据
2、案例2-省市二级联动
2.1、第一步:创建demo3.html页面
2.2、第二步:在服务器端创建一个工具类CityUtil它可以获取省份与城市信息
2.3、第三步:向服务器发送请求获取省份信息填充到省份下拉框
2.4、第四步:选择省份信息,向服务器发送请求获取城市信息填充到城市下拉框
一、AJAX概述
1、AJAX介绍
AJAX 是一种用于创建快速动态网页的技术。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
2、AJAX优点
使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
AJAX 可使因特网应用程序更小、更快,更友好
3、AJAX工作原理
二、AJAX应用
1、AJAX快速入门
创建一个demo1.html
如何发送一个ajax请求?
1.1、第一步:获取一个XMLHttpRequest对象
1.2、第二步:设置一个回调函数
回调函数它的作用就是用于处理服务器响应的数据
通过XMLHttpRequest对象的onreadystatechange设置回调函数
1.3、第三步设置请求方式GET/POST及请求的URL等
通过XMLHttpRequest对象的open方法
1.4、第四步真正向服务器发送请求
通过XMLHttpRequest对象的send方法
1.5、第五步在回调函数中获取服务器响应的数据
通过XMLHttpRequest对象的responseText
2、XMLHttpRequest对象详解
2.1、获取XMLHttpRequest 对象
对于大部分浏览器可以直接通过 new XMLHttpRequest();
对于IE5 IE6 new ActiveXObject("Microsoft.XMLHTTP")
2.2、XMLHttpRequest常用属性
- onreadystatechange 它是用于绑定回调函数,当服务器响应数据回来后,我们可以在指定的回调函数中进行数据处理。
- readyState 它描述的http请求的状态
3.status 它描述的http状态码 200 404 405 500…
4.获取服务器响应数据 responesText或responseXML来获取
2.3、XMLHttpRequest常用方法
1. open它是用于设置请求方式,url及是否异步,
参数1:HTTP 请求方式 POST/GET。
参数2: url路径
参数3: true/false 代表是否异步
2. send,它是真正向服务器发送请求,如果请求方式是get,那么我们使用send(null) 原因:get请求方式是没有http请求体只有post请求方式时,才有请求体,所以send的参数只是在post请求时使用例如:Xmlhttp.send(“username=xxx&password=xxx”);
3.setRequestHeader,注意:如果请求方式是POST,那么我们在使用时,必须设置一个请求头,就需要使用setRequestHeader方法来完成
三、AJAX案例
1、案例1-验证用户名是否可以使用
1.1、第一步:创建一个页面demo2.html
1.2、第二步:完成浏览器向服务器发送ajax请求操作
1. 得到文本框中录入信息:
2. 使用ajax来完成向服务器发送请求操作
1.3、 第三步:完成服务器端操作
1.4、第四步:在浏览器端展示数据
1. 在浏览器展示
2. 修改服务器端响应数据
2、案例2-省市二级联动
2.1、第一步:创建demo3.html页面
2.2、第二步:在服务器端创建一个工具类CityUtil它可以获取省份与城市信息
创建ProvinceServlet
创建CityServlet
2.3、第三步:向服务器发送请求获取省份信息填充到省份下拉框
1. 在demo3.html页面上向服务器发送ajax请求
2. 服务器响应省份信息
3. 在浏览器端处理服务器响应的数据,显示在省份下拉框
2.4、第四步:选择省份信息,向服务器发送请求获取城市信息填充到城市下拉框
1. 获取省份名称
2. 向服务器发送请求,将省份名称做为参数传递到服务器,服务器根据省份名称查询对应的城市信息
3. 在浏览器端处理数据填充到城市下拉框中
注意:在向城市下拉框中添加信息前要先进行一次清空操作
【JavaWeb】AJAX相关推荐
- 【JavaWeb】之MVC三层架构
[JavaWeb]MVC三层架构 前言 一.JavaBean 1.JavaBean的概念 2.JavaBean的特征 3.JSP访问JavaBean的语法 二.MVC三层架构 1.MVC简介 2.Mo ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
[PHP]Ajax跨域解决方案 .jsonp.cors 参考文章: (1)[PHP]Ajax跨域解决方案 .jsonp.cors (2)https://www.cnblogs.com/xuzhengz ...
- 【JS】AJAX跨域-JSONP解决方案(一)
[JS]AJAX跨域-JSONP解决方案(一) 参考文章: (1)[JS]AJAX跨域-JSONP解决方案(一) (2)https://www.cnblogs.com/h--d/p/11470534. ...
- 【JavaWeb】之Tomcat介绍、安装与使用
[JavaWeb]Tomcat 前言 一.Tomcat简介 1.什么是Tomcat 2.其他常用Web服务器 二.Tomcat安装 1.下载Tomcat 2.配置环境变量 三.Tomcat使用 1.启 ...
- 【JavaWeb】之富文本编辑器
[JavaWeb]富文本编辑器 前言 一.富文本编辑器介绍 二.富文本编辑器使用 1.引入编辑器(多种引入方式) 2.使用编辑器 三.主流富文本编辑器推荐 1.TinyMCE 2.CKEditor 3 ...
- 【JavaWeb】Cookie的基本使用、原理分析、使用细节
[JavaWeb]Cookie的基本使用.原理分析.使用细节 一.Cookie的基本使用 对于Cookie的使用,我们更关注的应该是后台代码如何操作Cookie,对于Cookie的操作主要分两大类,本 ...
- 【JavaWeb】之Servlet监听器
[JavaWeb]Servlet监听器 前言 一.监听器介绍 二.监听application 三.监听session 四.监听request 后记 前言 本文为JavaWeb基础Servlet监听器相 ...
- java接口支持ajax,【JavaWeb】jQuery对Ajax的支持
jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...
- 【JavaWeb】HTML+CSS
1 Web概念概述 JavaWeb是使用Java语言开发基于互联网的项目 软件架构 cs架构:优点[资源加载快.用户体验好].缺点[安装.部署.维护麻烦] bs架构:优点[开发.安装.部署.维护简单] ...
最新文章
- Android广播监听usb插拔状态
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- pythonexcelweb交互插件_来一次Python与Excel的完美交互
- 基于 Spring Boot 的车牌识别系统(附项目地址)ba
- 盘点大厂的那些开源项目 - 小米科技
- BZOJ4504. K个串(主席树+优先队列)
- java替换花括号,用正则表达式替换Java中的大括号{}之间的所有文本
- hdu 1625(floyd判环)
- sklear中IsolationForest的使用场景
- keil MDK uVision 5最新版本下载(含有注册机)
- 51单片机WIFI模块ESP8266-01s一定要看这个!普中科技给的模块 避免采坑!+CWJAP:3 FAIL 配置不了wifi名称和密码?
- ubuntu安装公式编辑器mathtype, wine中文乱码,ubuntu中文字体
- 如何根据pom文件创建自己的本地仓库
- NLifeBill第四章添加页面
- hdu 4598 Difference(奇圈判定+差分约束)
- 2021年中国游戏行业发展现状及行业发展趋势分析[图]
- 《王者圣域》2.23上线链游玩家|放置塔防、趣味竞技
- 蕾辈使匚冉吃勘刚莱涨坟怪
- linux 相机软件,镜像相机app
- window各版本回顾