Ajax-Ajax概述&使用 XMLHttpRequest 实现 Ajax

最新推荐文章于 2022-09-02 17:18:58 发布

轻小說控

最新推荐文章于 2022-09-02 17:18:58 发布

阅读量159

点赞数

分类专栏： Ajax 文章标签： Ajax-Ajax概述&使用 XMLHttpRequest 实现 Aj

本文链接：https://blog.csdn.net/Aqours/article/details/100832957

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax

ajax简介

使用 XMLHttpRequest 实现 Ajax

XMLHttpRequest的方法
XMLHttpRequest的属性
发送请求：利用XMLHttpRequest实例与服务器进行通信包含以下三个关键部分
- onreadystatechange事件处理函数
- open方法
- send方法
接受相应
- readyState
- status
- responseText
- responseXML

利用get请求实现Ajax的helloworld

在WebContent下新建helloAjax.txt

hello Ajax!

在WebContent下新建index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.οnlοad=function(){
		//1.获取a节点，并为其添加conclick相应函数
		document.getElementByTagName("a")[0].οnclick=function(){
			//3.创建一个XMLHttpRequest对象
			var request=new XMLHttpRequest();
			//4.准备发送请求的数据:url
			var url=this.href;
			var method="GET";
			//5.调用XMLHttpRequest对象的open方法
			request.open(method,url);
			//6.调用XMLHttpRequest对象的send方法
			request.send(null);
			//7.为XMLHttpRequest对象添加onreadystatechange函数
			request.onreadystatechange=function(){
				//8.判断响应是否完成： XMLHttpRequest对象的readyState属性值为4的时候
				if(request.readyState == 4){
					//9.再判断响应是否可用： XMLHttpRequest对象的status属性值为200
					if(request.status == 200 || request.status== 304){
						//10.打印响应结果responseText
						alert(request.responseText);
					}
				}
			}
			//2.取消a节点的默认行为
			return false; 
		}
	};
</script>
</head>
<body>
	<a href="helloAjax.txt">HelloTxt</a>
</body>
</html>

效果

利用post请求实现Ajax的helloworld（了解）

<script type="text/javascript">
	window.οnlοad=function(){
		//1.获取a节点，并为其添加conclick相应函数
		document.getElementsByTagName("a")[0].οnclick=function(){
			//3.创建一个XMLHttpRequest对象
			var request=new XMLHttpRequest();
			//4.准备发送请求的数据:url
			var url=this.href;
			var method="POST";
			//5.调用XMLHttpRequest对象的open方法
			request.open(method,url);
			request.setRequestHeader("ContextType","application/x-www-form-urlencoded");
			//6.调用XMLHttpRequest对象的send方法
			request.send("name=xuefeng");
			//7.为XMLHttpRequest对象添加onreadystatechange函数
			request.onreadystatechange=function(){
				//8.判断响应是否完成： XMLHttpRequest对象的readyState属性值为4的时候
				if(request.readyState == 4){
					//9.再判断响应是否可用： XMLHttpRequest对象的status属性值为200
					if(request.status == 200 || request.status== 304){
						//10.打印响应结果responseText
						alert(request.responseText);
					}
				}
			}
			//2.取消a节点的默认行为
			return false; 
		}
	};
</script>

效果

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax-Ajax概述&使用 XMLHttpRequest 实现 Ajax

Ajaxajax简介使用 XMLHttpRequest 实现 AjaxXMLHttpRequest的方法XMLHttpRequest的属性发送请求：利用XMLHttpRequest实例与服务器进行通信包含以下三个关键部分onreadystatechange事件处理函数open方法send方法接受相应...
复制链接

扫一扫