ajax请求404_AJAX相关使用案例

最新推荐文章于 2024-07-01 16:22:16 发布

weixin_39955825

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量393

点赞数

文章标签： ajax请求404 ajax请求的五个步骤 ajax调用controller层方法 404 java模拟网页发生ajax

v2-b03f5f04bc47c7a4591633295afb2054_1440w.jpg?source=172ae18b

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），

是指一种是一种用于创建快速动态网页的技术。

使用步骤 :

【1】创建AJAX引擎

var xhr = new XMLHttpRequest();

【2】创建HTTP请求

xhr.open(method, url, async, username, password)

//第一个参数method：http请求方式
//第二个参数url：http请求地址
//第三个参数async：表示是否异步请求
//第四个和第五个参数username和password：用于提供http验证机制

【3】发送请求

//如果不发送额外的请求数据，send()方法可以不传参数
xhr.send()

【4】处理后台返回的数据（监听readyState值的变化）

xhr.onreadystatechange = function() { }

<%@ 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%>">
<title>My JSP 'xhr_obj.jsp' starting page</title>
<script type="text/javascript">

	function doAjax(){
		//1.创建ajax引擎
		var xhr = new XMLHttpRequest();
		
		//4.监听readyState的值，
		//只要当readyState的值发生了变化，就调用绑定在onreadystatechange（请求状态改变的事件）上面的函数
		xhr.onreadystatechange = function(){
			console.log("-----------"+xhr.readyState+"-----------")
			
			//readyState等于4就表示服务器已经和ajax引擎交互完成，数据已经在ajax引擎中了！
			if(xhr.readyState == 4){
				//status 表示http状态码
				if(xhr.status == 200){
					//服务器响应的文本：responseText
					//对返回的数据使用DOM进行操作
					if(xhr.responseText == "true"){
						document.getElementById("myDiv").innerHTML = "用户名已存在"
					}else{
						document.getElementById("myDiv").innerHTML = "用户名可用"
					}
				}else if(xhr.status == 404){
					window.loaction.href="404.html";
				}else if(xhr.status == 500){
					document.getElementById("myDiv").innerHTML="服务器正在开了一个小差，请过会再试！"
				}
			}else{
				document.getElementById("myDiv").innerHTML = "数据加载中..."
			}
		}
		
		//2.创建一个http请求
		//第一个参数method：http请求方式
		//第二个参数url：http请求地址
		//第三个参数async：表示是否异步请求
		//第四个和第五个参数username和password：用于提供http验证机制
		xhr.open("get", "hiservlet", true);
		
		//3.发送http请求
		//如果不发送额外的请求数据，send()方法可以不传参数
		xhr.send()
	}

</script>
</head>
<body>
	<button onclick="doAjax();">发送ajax请求</button>
	
	<div id="myDiv">请求的数据为：</div>
</body>
</html>

weixin_39955825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax请求404_AJAX相关使用案例

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种是一种用于创建快速动态网页的技术。使用步骤 : 【1】创建AJAX引擎var xhr = new XMLHttpRequest();【2】创建HTTP请求 xhr.open(method, url, async, username, password) //第一个参...
复制链接

扫一扫