Ajax学习小结

最新推荐文章于 2024-06-11 14:35:39 发布

鲸落寰宇

最新推荐文章于 2024-06-11 14:35:39 发布

阅读量113

点赞数

分类专栏： Java-webapp 文章标签： Ajax

本文链接：https://blog.csdn.net/weixin_42819452/article/details/98599748

版权

Java-webapp 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、Ajax简述

Ajax全称为“Asynchronous JavaScript and XML”,异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术。异步刷新技术，用来在当前页面内响应不同的请求内容。

不是一种新技术，是如下几种技术的组合应用：

基于web标准XHTML+CSS的表示
使用DOM（Document Object Model）进行动态显示和交互
使用XML和XSTL进行数据交换及相关操作
使用XMLHttpRequest 进行异步数据查询、检索- 使用JavaScipt将所有的东西绑定一起

Ajax本质上是一个浏览器端的技术。
Ajax的作用：实现在当前结果页面中显示其他请求的响应内容。

二、Ajax的基本流程

//创建ajax引擎对象
//覆写onreadystatement函数
	//判断ajax状态码
	//判断响应状态码
	//获取响应内容(响应内容的格式)
		//1普通字符串
		//2json 
		//3xml数据
	//处理响应内容（js操作文档结构）
//发送请求
	//get请求:请求实体拼接再UR后面
		ajax.open("get", "ajax?" + name + "&"+pwd); //一般是写成拼接形式
		ajax.send(null);
	//post请求：请求实体需要单独的发送
		ajax.open("post","ajax");
		ajax.setRequestHeader("Content-Type","application/x-www-form-urlencode");	
		ajax.send(name+"&"+pwd);

三、示例

完整项目地址：https://github.com/hlc0216/heroInfo

Servlet代码

package com.hlc.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;//json的jar包
import com.hlc.ov.User;
import com.hlc.service.UserService;
import com.hlc.service.impl.UserServiceImpl;

public class UserServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置编码格式
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		// 获取请求信息
		String name = req.getParameter("name");
		System.out.println("用户请求信息为：" + name);
		// 处理请求信息
		// 获取业务层对象
		UserService us = new UserServiceImpl();
		// 处理业务
		User u = us.getUserInfoService(name);
		// 响应处理信息
		System.out.println("查询结果：" + u.getUname()+":"+u.getPostion());
		resp.getWriter().write(new Gson().toJson(u));//以json格式传送数据
	}
}

Js代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<!-- 
需求分析
	1 在当前页面内显示查询结果，考虑ajax
	2 创建ajax函数
	3 调用ajax函数发送请求到UserServlet
	4 调用业务层获取对应数据
 -->
 <!-- 获取响应内容（响应内容的格式） 
 	其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法将接收的字符串数据
 	直接转换为js对象
 	
 	json格式：
 	var 对象名={
 		属性名：属性值
 		属性名：属性值
 		.......
 	
 	}
 -->
<!-- 声明js代码 -->
<script type="text/javascript">
	function getHeroInfo() {
		//获取用户请求数据
		var name = document.getElementById("uname").value;
		//创建ajax引擎对象
		var ajax;
		ajax = new XMLHttpRequest();
		//覆写onreadystatechange
		ajax.onreadystatechange = function() {
			//判断ajax状态码
			if (ajax.readyState == 4) {
				//判断响应状态码
				if (ajax.status == 200) {
					//获取响应数据
					var result = ajax.responseText;
					eval("var u =" + result);//将java对象转化成js对象（媒介使用json格式）
					//处理响应数据
					var ta = document.getElementById("ta");
					var tr = ta.insertRow(1);
					var cell0 = tr.insertCell(0);
					cell0.innerHTML = u.uid;
					var cell1 = tr.insertCell(1);
					cell1.innerHTML = u.uname;
					var cell2 = tr.insertCell(2);
					cell2.innerHTML = u.price;
					var cell3 = tr.insertCell(3);
					cell3.innerHTML = u.postion;
					var cell4 = tr.insertCell(4);
					cell4.innerHTML = u.skill;
				}
			}
		}
		//发送请求
		ajax.open("post", "user");
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("name=" + name);
	} 
</script>
<!-- css代码 -->
<style type="text/css">
.tftable {
	font-size: 12px;
	color: #333333;
	width: 100%;
	border-width: 1px;
	border-color: #a9a9a9;
	border-collapse: collapse;
}

.tftable th {
	font-size: 12px;
	background-color: #b8b8b8;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9a9a9;
	text-align: left;
}

.tftable tr {
	background-color: #ffffff;
}

.tftable td {
	font-size: 12px;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9a9a9;
}
</style>
</head>

<body>
	<h3>welcome to hero store !!</h3>
	<hr>
	The name of Hero:
	<input type="text" name="uname" value="" id="uname" />
	<input type="button" value="FindHero" onclick="getHeroInfo()" />
	<hr>

	<table id="ta" class="tftable" border="1px">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Price</th>
			<th>Position</th>
			<th>Skill</th>
		</tr>
	</table>
</body>
</html>

Ajax的状态码
ReadyState :0 1 2 3 4（4表示响应内容被成功接收）
响应状态码：
Status

202；表示一切ok
404：资源没有找到
500：内部服务器错误

Ajax的异步和同步

Ajax.open(method,url,async);
//Async:设置同步、异步,true代表异步，默认异步，false代表同步

鲸落寰宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax学习小结

一、Ajax简述Ajax全称为“Asynchronous JavaScript and XML”,异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术。异步刷新技术，用来在当前页面内响应不同的请求内容。不是一种新技术，是如下几种技术的组合应用：基于web标准XHTML+CSS的表示使用DOM（Document Object Model）进行动态显示和交互使用XM...
复制链接

扫一扫