ajax请求

最新推荐文章于 2023-11-23 14:06:49 发布

mChenys

最新推荐文章于 2023-11-23 14:06:49 发布

阅读量653

点赞数

本文链接：https://blog.csdn.net/mChenys/article/details/81096964

版权

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

原生js编写ajax请求的步骤:

1.创建一个核心对象 XMLHttpRequest

2.编写一个回调函数

3.编写请求方式和请求的路径(open操作)

4.发送请求(send操作)

例如: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>js-ajax-get请求</title>
<script type="text/javascript">

	function sendRequest(){
		//1.创建一个核心对象 XMLHttpRequest
		var request = null;
		if(window.XMLHttpRequest){
			// code for IE7+, Firefox, Chrome, Opera, Safari 
			request = new XMLHttpRequest();
		}else{
			// code for IE6, IE5 
			request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		//2.编写一个回调函数
		request.onreadystatechange = function(){
			//readyState为4表示接收到了响应
			if(request.readyState==4 && request.status==200){
				alert(request.responseText);
			}
		}
		//3.编写请求方式和请求的路径(open操作)
		request.open("get","${pageContext.request.contextPath}/ajax1?username=张三");
		
		//4.发送请求(send操作)
		request.send();
		
	}
</script>
</head>
<body>
	<button onclick="sendRequest()">get请求</button>
</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>js-ajax-post请求</title>
<script type="text/javascript">

	function sendRequest(){
		//1.创建一个核心对象 XMLHttpRequest
		var request = null;
		if(window.XMLHttpRequest){
			// code for IE7+, Firefox, Chrome, Opera, Safari 
			request = new XMLHttpRequest();
		}else{
			// code for IE6, IE5 
			request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2.编写一个回调函数
		request.onreadystatechange = function(){
			//readyState为4表示接收到了响应
			if(request.readyState==4 && request.status==200){
				alert(request.responseText);
			}
		}
		//3.编写请求方式和请求的路径(open操作)
		request.open("post","${pageContext.request.contextPath}/ajax1");
		//需要设置请求头
		request.setRequestHeader("content-type","application/x-www-form-urlencoded");
		
		//4.发送请求(send操作),post请求的参数是在send方法书写
		request.send("username=张三&age=20");
		
	}
</script>
</head>
<body>
	<button onclick="sendRequest()">post请求</button>
</body>
</html>

常用属性介绍:

onreadystatechange:检测readyState状态改变的时候

readyState:ajax核心对象的状态:

0:核心对象创建
1:调用了open方法
2:调用了send方法
3:部分响应已经生成(没有意思)
4:响应已经完成(使用的是这个状态)

status:状态码,200为正常响应.

if(xmlhttp.readyState==4 && xmlhttp.status==200){

}

responseText:响应回来的文本

常用方法介绍:

open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径

send(["参数"]):发送请求参数是请求方式为post的时候的参数

setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型必须放在send方法之前.

响应请求的servlet:

package blog.csdn.net.demo1;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 原生js  ajax请求的响应的servlet
 */
public class AjaxServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = new String(request.getParameter("username").getBytes("iso8859-1"),"utf-8");
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(username+":get请求成功");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String username = request.getParameter("username");
		String age = request.getParameter("age");
		response.getWriter().println(username+","+age+":post请求成功");
	}

}

jquery的ajax请求方式

1.$.get(url,params,function(数据){},type);

2.$.post(url,params,function(数据){},type);

3.jquery对象.load(url,params,function(数据){});

4.$.ajax({选项});

选项的可选值:

url:请求路径
type:请求方法
data:发送到服务器的数据
success:fn 成功以后的回调
error:fn 异常之后的回调
dataType:返回内容格式经常使用json
async:设置是否是异步请求

其中前2种方式是最常用的.

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>jquery-ajax-get请求</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
 
	$(function(){
		$("#btn1").click(function(){
			var url ="${pageContext.request.contextPath}/ajax2";
			//var params = "username=张三";也可以用对象的相似传参
			var params = {"username":"张三"}
			var type = "json";//返回内容格式，xml, html, script, json, text, _default
			$.get(url,params,function(data){
				alert(data.msg);
			},type);
		})
	})
	
</script>
</head>
<body>
	<button id="btn1">get请求</button>
</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>jquery-ajax-post请求</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

	$(function(){
		$("#btn1").click(function(){
			var url ="${pageContext.request.contextPath}/ajax2";
			//var params = "username=张三";也可以用对象的相似传参
			var params = {"username":"张三"}
			var type = "json";//返回内容格式，xml, html, script, json, text, _default
			$.post(url,params,function(data){
				alert(data.msg);
			},type);
		})
	})
	
</script>
</head>
<body>
	<button id="btn1">post请求</button>
</body>
</html>

响应请求的servlet:

package blog.csdn.net.demo1;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * jquery  ajax请求的响应的servlet
 */
public class AjaxServlet2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = new String(request.getParameter("username").getBytes("iso8859-1"),"utf-8");
		response.setContentType("text/html;charset=utf-8");
		String result = "{\"state\":0,\"msg\":\""+username+":get请求成功\"}";
		response.getWriter().println(result);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String username = request.getParameter("username");
		String result = "{\"state\":0,\"msg\":\""+username+":post请求成功\"}";
		response.getWriter().println(result);
	}

}

mChenys

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax请求

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。原生js编写ajax请求的步骤:1.创建一个核心对象 XMLHttpRequest2.编写一个回调函数3.编写请求方式和请求的路径(o...
复制链接

扫一扫

ajax请求

“相关推荐”对你有帮助么？