Ajax之get、post实例(最原始的XMLHttpServlet)

来源：互联网发布：景行知返免费阅读编辑：程序博客网时间：2024/05/17 22:54

2014年12月23日15:36:10 天气阴心情极度低落

ajaxGet2014122301.jsp

<%@ 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">window.onload = function() {//1.获取a节点,并为其添加onclick响应函数document.getElementsByTagName("a")[0].onclick = function() {//3.创建一个XMLHttpRequest对象var request = new XMLHttpRequest();//4.准备发送请求的数据： urlvar url= this.href + "?time = " + new Date();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 为200if (request.status == 200 || request.status == 304) {//10.打印响应结果：responseText;alert(request.responseText);}}}//2.取消a节点的默认行为return false;}}</script></head><body><a href="HelloAjax.txt">helloAjax2014122301</a></body></html>

ajaxPost2014122301.jsp

<%@ 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">window.onload = function() {document.getElementsByTagName("a")[0].onclick = function() {var request = new XMLHttpRequest();var url= this.href + "?time = " + new Date();var method = "POST";request.open(method,url);request.setRequestHeader("ContentType", "application/x-www=form-urlencoded")request.send("name='atguigu'");request.onreadystatechange = function() {if (request.readyState == 4) {if (request.status == 200 || request.status == 304) {alert(request.responseText);}}}return false;}}</script></head><body><a href="HelloAjax.txt">helloAjax2014122301</a></body></html>

需要注意的地方是
对于post请求必须执行完request.setRequestHeader("ContentType", "application/x-www=form-urlencoded")而后再执行request.send("name='atguigu'");，否则异步提交不起作用。

0 0