Ajax的使用，内部原理的介绍，get/Post提交数据

最新推荐文章于 2023-05-30 21:27:40 发布

coderxz

最新推荐文章于 2023-05-30 21:27:40 发布

阅读量425

点赞数 1

分类专栏： javaWeb前端文章标签： Ajax 异步更新

本文链接：https://blog.csdn.net/qq_36639232/article/details/90347446

版权

javaWeb前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Ajax是什么

全称：Asynchronous Javascript And XML（异步JavaScript和xml）

并非新的技术，而实把原有的技术整合到一起：

1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

2.Ajax有什么用

网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好(例如：当我们提交form表单的时候)。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

3.内部原理

诚如我们前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。

那么现在给大家举个例子，还是以咱们的判断用户名是否已被注册为例。

传统方式：

1. 输入用户名，

2. 点击一个按钮，校验。

3. 把数据提交给服务器

4. 服务器在后台帮助我们完成校验，并且反馈信息。

5. 我们在浏览器上提示用户，给出结果

Ajax方式：

ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被占用。那么它是如何工作的呢?

1. 通过JS 获取咱们的输入框文本内容 document.getElementById(“username”).value
1. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
1. 请求结束后，收到结果，再使用 js 去完成提示。
1. 可以在顺便配合 css 样式来增加提示效果。

4.使用

前面介绍的都是概念性的，只需要知道Ajax是干啥的就欧克了（后面直接用Jquery）
且提交数据有两种方式：

4.1 get方式

总结一下下面的代码内容（注释解释的已经很详细了）：
总共分为三步:

1.创建XmlHttpRequest对象
这部分创建的对象，由于需要针对不同的浏览器，需要做出判断，所以不用直接写，以后直接拷贝即可。
2.发送请求
注： request对象通过第一步的XmlHttpRequest得到。
request.open(“GET”,"/AjaxAndJQuery/demoServlet01?name=‘eric’&password=‘123’",true);
request.send();
3.响应服务器发送过来的数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//创建XmlHttpRequest对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
	 //在发送请求的同时，获取服务器响应的内容
	function get() {
		//1.创建xmlhttprequest 对象
		var request=ajaxFunction();
		//2.发送请求
		/*
		参数一： 请求类型  GET or  POST
		参数二： 请求的路径
		参数三： 是否异步， true  or false
		*/
		// request.open("GET","/AjaxAndJQuery/demoServlet01",true);
		//带数据的去请求服务器
		request.open("GET","/AjaxAndJQuery/demoServlet01?name='eric'&password='123'",true);
		request.send();
		//3.响应服务器发送过来的数据
		/*
		注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
		那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
		   //显示响应的信息
		   alert(request.responseText);
		    }
		  }
	}
</script>
</head>
<body>
	<a href="" onclick="get()">Ajax通过Get发送数据</a>
</body>
</html>

4.1 post方式

Post请求和 Get请求基本相似，区别就在于数据传输方式不同。 Get方式是直接在地址的后面拼接的。但是Post的方式是通过send 方法传输过去的。并且还要设置一个请求头。

同上总结一下以下代码：

1.创建XmlHttpRequest对象
2.发送请求
不携带数据：
request.open(“POST”,"/AjaxAndJQuery/demoServlet01",true);
request.send();
携带数据：
request.open(“POST”,"/AjaxAndJQuery/demoServlet01",true);
request.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
request.send(“name=eric&password=123456”);
3.接收数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//创建XmlHttpRequest对象
function  ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }
	return xmlHttp;
 }
	function Post() {
		//1.注册XmlHttpRequest对象
		var request=ajaxFunction();
		//2.发送数据
		request.open("POST","/AjaxAndJQuery/demoServlet01",true);
		//request.send();
	  //注意：如果我需要带参数请求呢？如果需要带参访问，则需要加上这两行
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  //解释：如果使用的是POST方式带数据，那么这里要添加请求头，并说明提交的数据类型是一个经过URL编码的form表单数据
		request.send("name=eric&password=123456");

		//3.接收数据
		/*
		注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
		那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
		   //显示响应的信息
		   alert(request.responseText);
		    }
		  }
	}
</script>
<title>Insert title here</title>
</head>
<body>
	<a href="" onclick="Post()">Ajax通过Post发送数据</a>
</body>
</html>

4.2获取服务器端的响应

数据提交到的两种请求Get 和 Post基本上都会使用后，就应该想想获取数据的问题了。前面我们都一直很无私的往服务器提交数据，那么服务器返回的那些数据，我们又该怎么通过Ajax去拿呢?
这里就要靠xmlhttprequest的事件 onreadystatechange ，这是用来监听我们请求的一些状态，比如：成功了还是失败了。如果成功，想获取数据，得靠xmlhttprequest的responseText 或 responseXML 属性

/*
	注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
	那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
		   //显示响应的信息
		   alert(request.responseText);
		    }
		  }

案例：校验用户名

需求：在登录页面，当我输入用户名的时候，能够去数据库判断该用户名是否存在。

直接上代码了…
Controller类

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //获取从页面传输过来的name，调用持久层的方法，将返回结果传输到表现层
  request.setCharacterEncoding("UTF-8");
  //作用是设置对客户端请求进行重新编码的编码。
  String username = request.getParameter("username");
  userDao dao = new userDaoImpl();
  System.out.println(username);
  try {
    Long result = dao.getUserName(username);
    response.getWriter().println(result);
  } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
}

前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//创建XmlHttpRequest对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
	function checkUserName() {
		//1.获取XMLHttpRequest对象
		var request=new ajaxFunction();
		//获取文本框的name值
		var name=document.getElementById("name").value;
		//2.发送消息
		/*想尝试一下已get方式，但是失败了
		String str="/AjaxAndJQuery/userServlet?username="+"'"+name+"'";
		alert(str);
		request.open("GET",str,true);
		request.send(); */
		request.open("POST","/AjaxAndJQuery/userServlet",true);
	  //注意：如果我需要带参数请求呢？如果需要带参访问，则需要加上这两行
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  //解释：如果使用的是POST方式带数据，那么这里要添加请求头，并说明提交的数据类型是一个经过URL编码的form表单数据
		request.send("username="+name);
		//3.接收数据
		/*
		注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
		那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
			   //显示响应的信息
			   //alert(request.responseText);
			   var result=request.responseText;
			   if(result==1){
				   document.getElementById("span01").innerHTML="<font color='red'>该用户名已存在</font>";
			   }else{
				   document.getElementById("span01").innerHTML="<font color='green'>合法!</font>";
			   }
		    }
		  }

	}
</script>
<title>Insert title here</title>
</head>
<body>
<table border="1" width="500">
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>简介</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</body>
</html>

coderxz

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Ajax的使用，内部原理的介绍，get/Post提交数据

1.Ajax是什么全称：Asynchronous Javascript And XML（异步JavaScript和xml）并非新的技术，而实把原有的技术整合到一起：1.使用CSS和XHTML来表示。2.使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。2.Ajax有什么用网页如果想要刷新局...
复制链接

扫一扫

专栏目录