Ajax的简介与实现

最新推荐文章于 2021-04-02 12:42:14 发布

童懵

最新推荐文章于 2021-04-02 12:42:14 发布

阅读量456

点赞数 5

分类专栏： java异步机制文章标签： Ajax简单使用小白学ajax java+ajax jquery中的ajax

本文链接：https://blog.csdn.net/weixin_44929998/article/details/89363843

版权

java异步机制专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax异步技术使用简述

Ajax简介
开发环境的介绍
技术代码实现
最后说明一下：

Ajax简介

   说明：当你知道啥是ajax请看下面的“技术代码实现”，当你不知道啥是ajax 请忽略此条信息
   Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面（百度百科）。
   简单来说：就是在加载网页的同时，通过ajax访问服务器来同时加载别的内容而实现了异步。
   何为同步？两个人打电话就是同步，因为再有电话进来就是对方正在通话中;传统网页进行客户端和服务端进行数据交互的时候，要么得提交表单超链接什么的，或者进行页面刷新重新获取（这里会忽略多次刷新用之前界面的情况）
   何为异步？两个人发短信，别人还能给你发短信。本文中就是在服务器与客户端进行通信的时候，客户端继续和服务器端交流加载数据，这样可以获取到实时信息，进行qq邮箱获取新邮箱，在不刷新系统情况下可以知道有新邮箱的到来或许是用到了Ajax（没具体了解过），但是绝对可以通过ajax实现。
   案例：事件驱动架构进行业务场景比如秒杀系统场景搭建，会发现事件驱动架构可以支持一致性，但是无法保证有效性。这时候Ajax异步加载机制可以实现有效性。

开发环境的介绍

##本文档开发环境介绍
1.jdk：1.8.0
2.编译器：Eclipse
3.服务器：Tomcat8.0
4.所需的jar包（https://download.csdn.net/download/weixin_44929998/11123500 ）
lib目录下需要导入的jar包

技术代码实现

 5.使用的技术栈：servlet+html+js

我的Eclipse项目结构（请忽略掉login.jsp 那个我懒得删了的）

项目目录
7.User.java
//此处为javabean 本博客使用的json进行ajax数据传输的载体

package cn.hnist.javabean;

public class User {
	private String username;
	private String password;
	private String age;
	
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
}

8.servlet
//此处用前端传递来的数据模拟获取数据库的数据，因为只是简单实现便懒得写一个数据库弄这个，当然最重要是为了你们多了解一下后面ajax给服务器传递数据怎么传（当时确实想偷懒，如果写一个常量数据又显得太low）

 response.setContentType("application/text; charset=utf-8");
		//初始化User对象
		User user=new User();
		
		//获取前端的用户名和密码
		user.setUsername(request.getParameter("username"));//获取ajax传递的用户名
		user.setPassword(request.getParameter("password"));//获取ajax传递来的密码
		
		JSONObject jsonObject=JSONObject.fromObject(user);//将实例化且已赋值的user打包称为json数据
		
		//将数据传递给ajax此处代码跟传递给Android很相似有木有，我写Android时用的是gson数据传递
		PrintWriter out=response.getWriter();
		out.println(jsonObject);

9.此时便是ajax的重点操作代码了show.html（showTime）

#9.1 数据显示设置一个可以显示代码的位置 ↓

    <p id="message"></p>
	<p id="username"></p>.
	<p id="password"></p>

#9.2 ajax关键代码详解↓

/*
  此处用的是jquery的框架搭建的代码，所以需要在前面引入jquery，具体引用可以见jqury官网，百度一下
  懒得去找官网的话 可以见我下面全部的show.html代码查阅一下
  如果这里有格式问题，别怪我，但是知道意思就好了
  js允许出现双引号和单引号 但是这里统一用单引号 而且如果没引入jquery也是有问题的
*/
$.ajax({
			  url:'LoginServlet',   //这里是servlet的位置，当然也可以是别的框架 ssh xxx.action ssm.do  当然我没试过
			  type:'POST',  		//传输方式 和form表单的method一样
			  data:{				//给servlet传递的数据  还有一个dataType  具体查看一下别人的啦 我没写一般也可以进行json数据传递
				  'username':'username',
				  'password':'password'
			  },
			  success:function(jsonObject){    //当数据传输成功的时候，这里的jsonObject名要注意到位
				  console.log('zz')
				  
				  var zz=strToJson(jsonObject);  //这里有点看不懂对不对，因为这个strToJson是我百度copy的代码 用于转换成js识别的eval就可以直接读取服务器端传来的json数据了 代码我贴下面
				  document.getElementById('username').innerHTML=zz.username;
			  },
			  error:function(){
				  console.log('zz')
			  }
			  
		  	
			  
		  });

#9.3 strToJson代码↓

function strToJson(str){ 
		var json = eval('(' + str + ')'); 
		return json; 
}

#9.4触发条件↓

本文用的是js函数 setTimeout(copy/function(),time);

#9.5完整show.html代码↓

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入jqury-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 
<!-- 引入jqury-->
</head>
<body>
	<p id="message"></p>
	<p id="username"></p>.
	<p id="password"></p>
</body>
	<script type="text/javascript" >
	
	function strToJson(str){ 
		var json = eval('(' + str + ')'); 
		return json; 
		} 
		
	
	setTimeout(function(){
		console.log("zz");
		$.ajax({
			  url:'LoginServlet',
			  type:'POST',
			  data:{
				  'username':'username',
				  'password':'password'
			  },
			  success:function(jsonObject){
				  console.log('zz')
				  
				  var zz=strToJson(jsonObject);
				  document.getElementById('username').innerHTML=zz.username;
			  },
			  error:function(){
				  console.log('zz')
			  }
			  
		  	
			  
		  });
    },1);
	
	  
	
	</script>
</html>

10.实现结果：当然这个界面不是那么好看

最后说明一下：

本项目系统是我通过百度翻看各位大佬学习后的心得，我只能算小编，原著是各位互联网上面大佬；
如果觉得可以的话 希望大家多多关注支持我，我将会和你们一同成长。
然后如果上述文章有任何不妥的地方，麻烦斧正一下，我在评论区恭候各路大佬，希望多多斧正
这是我在CSDN写的第一篇文章。2019.04.17

童懵

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Ajax的简介与实现

Ajax异步技术使用简述Ajax简介开发环境的介绍技术代码实现最后说明一下：Ajax简介 Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面（百度百科）。简单来说：就是在加载网页的同时，通过ajax访问服务器来同时加载别的内容而实现了异步。何为同步？两个人打电话就是同步，因为再有电话进来就是对方正...
复制链接

扫一扫

专栏目录