Ajax的get和post数据请求

最新推荐文章于 2022-10-13 23:19:32 发布

木木柠

最新推荐文章于 2022-10-13 23:19:32 发布

阅读量225

点赞数

分类专栏：学习笔记 Ajax 文章标签： Ajax的get和post数据请求 Ajax简单的异步请求

学习笔记同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

Ajax的get和post数据请求
今天看了传智播客的视频，学到新的知识点，记录一下。
get请求和post请求，如果要带着参数的话，会有一点点不同
get方式：

<%@ 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">

	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;
	 }

	//执行get请求
	function get() {
		
		//1. 创建xmlhttprequest 对象
		var request = ajaxFunction();
		
		//2. 发送请求。
		// http://localhost:8080/day16/demo01.jsp
		//http://localhost:8080/day16/DemoServlet01
		//http://localhost:8080/ajaxjquey/DemoServlet01
		
		/*	
			参数一： 请求类型  GET or  POST
			参数二： 请求的路径
			参数三： 是否异步， true  or false
			
		*/

		request.open("GET" ,"/ajaxjquey/DemoServlet01?name=aa&age=18" ,true );
		request.send();
	}
	
	//执行get请求
	function get() {
		
		//1. 创建xmlhttprequest 对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open("GET" ,"/ajaxjquey/DemoServlet01?name=aa&age=18" ,true );
		
		//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
		request.onreadystatechange = function(){
			
			//前半段表示 已经能够正常处理。  再判断状态码是否是200
			if(request.readyState == 4 && request.status == 200){
				//弹出响应的信息
				alert(request.responseText);
			}
		}
		request.send();
	}

</script>

</head>
<body>

	<h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3>

</body>
</html>

post方式：
在这里插入图片描述

<%@ 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">

	//1. 创建对象
	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. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open( "POST", "/day16/DemoServlet01", true );
		
		//想获取服务器传送过来的数据， 加一个状态的监听。 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){
				alert("post："+request.responseText);
			}
		}
		
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send("name=aobama&age=19");
	}
	
	
</script>

</head>
<body>
	<h3>
		<a href="" onclick="post()">使用Ajax方式发送Post请求</a>
	</h3>
</body>
</html>