ajax学习整理

什么是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值含义
0XMLHttpRequest已简历,但还未开始
1表示open方法已经调用,但未调用send方法(已创建,未发送)
2send方法已经调用,其他数据未知
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 对象名={
属性名:属性值,
属性名:属性值
}
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页