ajax学习整理

最新推荐文章于 2024-11-03 23:16:52 发布

迷失的小鹿

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量261

点赞数

分类专栏：工作中用到的技术学习文章标签： ajax servlet js java

本文链接：https://blog.csdn.net/Java_Fly1/article/details/105885954

版权

工作中用到的技术学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

ajax学习整理

什么是Ajax
Ajax的使用场景
Ajax请求状态码
响应状态码
同步请求与异步请求的区别
基本流程
- 案例
- - Get请求
  - post请求
Ajax响应内容的格式
json(常用）

什么是Ajax

AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术
不是一种新技术，是如下几种技术的组合应用：
是基于Web标准（standards-basd presentation)XHTML+css的表示
使用DOM(Document Object Model)进行动态显示
使用XML和XSLT进行数据交换及相关操作
使用XMLHttpRequest（Ajax引擎对象）进行异步数据查询、检索
使用JavaScript将所有的东西绑定在一起
Ajax本质上是一个浏览器端的技术
异步刷新技术，用来在当前页面内响应不同的请求内容

Ajax的使用场景

有时候我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户
解决：
1.在后台服务器端将多次响应内容重新拼接成一个jsp页面，响应。
但是这样会造成很多响应内容被重复的响应，资源浪费
2.使用AJAX技术在当前页面显示下一次的响应结果

Ajax请求状态码

readyState值	含义
0	XMLHttpRequest已简历，但还未开始
1	表示open方法已经调用，但未调用send方法（已创建，未发送）
2	send方法已经调用，其他数据未知
3	请求已经成功发送，正在接收数据
4	表示数据已经成功接收

响应状态码

Http状态码	含义
20	请求成功
404	请求资源未找到
500	内部服务器错误

同步请求与异步请求的区别

同步请求：

同步请求，顺序处理，程序向服务器发送一个请求，在结果返回之前，程序要一直等待结果返回才可以执行下一步
异步请求：
异步请求：并行处理，程序向服务器发送一个请求，在结果返回之前，程序还是可以执行其他操作
ajax默认是异步请求

基本流程

创建ajax引擎对象
注册事件处理函数onreadystatechange
判断ajax状态码
判断响应状态码
获取响应内容
处理响应内容
发送请求

//1.创建ajax引擎对象
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('MicroSoft.XMLHttp');
//2.注册onreadystatechange函数
//判断ajax状态码和响应状态码
xhr.onreadystatechange=function(){
	if(xhr.readyState==4&&xhr.status==200){
		//获取响应内容
		var txt=xhr.responseText;
		//处理响应内容
		alert(txt);
	}
};
//3.发送请求
//get方式：请求实体拼接在URL后面
xhr.open('GET','getAjax?name=张三&pwd=123',true);
xhr.send(null);
//post方式

案例

maven依赖的jar包

Get请求

<!--添加tomcat插件 -->
	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<version>2.2</version>
				<configuration>
					<port>8080</port>
					<hostName>localhost</hostName>
					<uriEncoding>UTF-8</uriEncoding>
				</configuration>
			</plugin>
		</plugins>
	</build>
	<dependencies>
		<!-- servlet的jar包依赖 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>4.0.1</version>
			<scope>provided</scope>
		</dependency>
		<!-- jsp的jar包依赖 -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.3</version>
			<scope>provided</scope>
		</dependency>
		<!-- jstl表达式 -->
		<!-- https://mvnrepository.com/artifact/jstl/jstl -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
	</dependencies>

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
	#showDiv{
		border:1px solid;
		width:200px;
		height:100px;
	}
</style>
<script>
	function getData() {
		//1.创建ajax引擎对象
		var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('MicroSoft.XMLHttp');
		//2.注册onreadystatechange函数
		xhr.onreadystatechange=function(){
		//3.ajax状态码和响应状态码
			if(xhr.readyState==4&&xhr.status==200){
			//4.返回响应数据
				var txt=xhr.responseText;
			//5.处理请求
				//responseText:获得服务器返回的文本数据
				document.getElementById('showDiv').innerHTML=txt;
			}
		};
		//发送请求
		/*
		get的请求实体拼接在UL后面，用?隔开,键值对
		*/
		xhr.open('GET','getAjax?name=张三&pwd=123',true);
		xhr.send(null);
	}
</script>
</head>
<body>
	<h3>欢迎登录403峡谷</h3>
	<hr>
	<input type="button" value="测试" onclick="getData();">
	<div id="showDiv"></div>
</body>
</html>

package web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * servlet3.0支持注解的方式，
 * servlet在配置请求路径时可以使用注解@WebServlet
 *@WebServlet 标注在请求所在的类上面
 */
@WebServlet("/getAjax")
public class AjaxServlet extends HttpServlet {
	public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("UTF-8");
		//设置响应编码格式
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;chaset=utf-8");
		//获取请求信息
		String name=req.getParameter("name");
		String pwd=req.getParameter("pwd");
		System.out.println(name+":"+pwd);
		try {
			Thread.sleep(1000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		//响应处理结果
		resp.getWriter().write("哈哈，今日的学习已完成！");
	}
}

测试
输入
http://localhost:8080/ajax/my.jsp
点击测试按钮，如下图
在这里插入图片描述
控制台输出

post请求

1.设置请求方式和地址

//xhr.open(请求方式，地址，是否是异步请求）；
/*ajax默认请求是异步请求
所以可以简写为
xhr.open(请求方式,地址);
*/
xhr.open('POST', uri, true);

2.需要设置请求头

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

3…请求实体需要单独发送

xhr.send('name=张三&pwd=123');

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
	#showDiv{
		border:1px solid;
		width:200px;
		height:100px;
	}
</style>
<script>
	function getData() {
		//1.创建ajax引擎对象
		var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('MicroSoft.XMLHttp');
		//2.注册onreadystatechange函数
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				var txt=xhr.responseText;
				//responseText:获得服务器返回的文本数据
				document.getElementById('showDiv').innerHTML=txt;
			}
		};
		
		//发送请求
		/*POST方式：请求实体需要单独的发送  */
		xhr.open('POST','getAjax');
		//设置请求头
		xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
		xhr.send('name=张三&pwd=123');
	}
</script>
</head>
<body>
	<h3>欢迎登录403峡谷</h3>
	<hr>
	<input type="button" value="测试" onclick="getData();">
	<div id="showDiv"></div>
</body>
</html>

测试
输入
http://localhost:8080/ajax/my.jsp
点击测试按钮，如下图
在这里插入图片描述
控制台输出

Ajax响应内容的格式

普通字符串
json（重点）
XML数据

json(常用）

数据按照json的格式拼接好的字符串，方便使用eval方法将接收的字符串数据直接转换为js的对象

//json格式
var 对象名={
属性名：属性值,
属性名：属性值
}

迷失的小鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录