Ajax学习笔记二（世上最全Ajax应用实例，让你一秒学会Ajax!!)

其他 2020-05-02 12:08:55 阅读次数: 0

目录

一：应用实例

1.ajax第一例：helloworld

让你可以实现异步访问服务器，并且可以局部刷新服务器返回的数据

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">

function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return new ActiveObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				return new ActiveObject("Microsoft.XMLHTTP");

			} catch (e) {
				alert("哥们儿，你用的是什么浏览器啊？");
				throw e;

			}
		}
	}
}
window.onload =function(){
	var btu=document.getElementById("btu");
	btu.onclick=function(){
		/*  ajax四部操作，得到服务器的响应
		 把响应结果显示到h1元素中
		*/
		/*  1.得到异步对象
		*/
		var xmlHttp=createXMLHttpRequest();
		//2.打开与服务器的连接
		xmlHttp.open("GET","AServlet",true);
		//3.发送请求
		xmlHttp.send(null);
		//4.注册事件监听器
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status==200){//双重判断
				var text=xmlHttp.responseText;
			    var h1=document.getElementById("h1");
			    h1.innerHTML=text;
				
			}
		}
		
		
	}
}
</script>
</head>
<body>
   <button id="btu">点击这里</button>
   <h1 id="h1"></h1>

</body>
</html>

2.ajax第二例：发送POST请求

  • 如果发送请求时需要带有参数，一般都用POST请求
  • 添加一步：设置Content-Type请求头
    xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
  • send: xmlHttp.send(“username=张三&password=123”);//发送请求时指定请求体
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return new ActiveObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				return new ActiveObject("Microsoft.XMLHTTP");

			} catch (e) {
				alert("哥们儿，你用的是什么浏览器啊？");
				throw e;

			}
		}
	}
}
window.onload =function(){
	var btu=document.getElementById("btu");
	btu.onclick=function(){
		/*  ajax四部操作，得到服务器的响应
		 把响应结果显示到h1元素中
		*/
		/*  1.得到异步对象
		*/
		var xmlHttp=createXMLHttpRequest();
		//2.打开与服务器的连接
		xmlHttp.open("POST","AServlet",true);
		/********设置请求头********/
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//3.发送指定请求体
		xmlHttp.send("username=张三&password=123");
		//4.注册事件监听器
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status==200){//双重判断
				var text=xmlHttp.responseText;
			    var h1=document.getElementById("h1");
			    h1.innerHTML=text;
				
			}
		}
		
		
	}
}
</script>
</head>
<body>
   <button id="btu">点击这里</button>
   <h1 id="h1"></h1>
</body>
</html>

3.ajax 第三例：注册表单之校验用户是否注册

  1. 编写界面 ：ajax3.jsp
    给出注册表单页面
    给用户名文本框添加onblur事件的监听
    获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
    如果为1：在文本框后显示“用户名已被注册”
    如果为0：什么都不做！
  2. 编写Servlet ：ValidateUsernameServlet
    获取客户端传递的用户名参数
    判断是否为许男神
    是：返回1
    否：返回0

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码方式
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获取客户端参数值
		String username=request.getParameter("username");
		if(username.equals("许男神")) {
			response.getWriter().write("1");
		}else {
			response.getWriter().write("0");
		}
	}

客户端：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
    //通过向服务器发送参数并获取返回参数，如果为1，在span后面显示提示信息，如果为0则不显示
    function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return new ActiveObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				return new ActiveObject("Microsoft.XMLHTTP");

			} catch (e) {
				alert("哥们儿，你用的是什么浏览器啊？");
				throw e;

			}
		}
	}
}
    window.onload=function(){
    	var username=document.getElementById("usernameEle");
    	//当用户名失去焦点时向服务器发送请求
    	username.onblur=function(){
    		//得到异步对象
        	var xmlHttp=createXMLHttpRequest();
        	//打开与服务器的连接
        	xmlHttp.open("POST","ValidateUsernameServlet",true);
        	//设置请求头
        	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        	//发送请求体
        	xmlHttp.send("username="+username.value);
        	//注册事件监听器
        	xmlHttp.onreadystatechange=function(){
        		if(xmlHttp.readyState == 4 && xmlHttp.status==200){
        			var text=xmlHttp.responseText;        			
        			var span=document.getElementById("errorSpan");
        			if(text=="1"){
        				span.innerHTML="该用户名已被注册!";
        			}else{
        				span.innerHTML=" ";
        			}
        			
        		}
        	}
    		
    	}
    	
    }
</script>
</head>
<body>

	<h1>检验用户名是否已经被注册</h1>
	<form action="" method="post">
		用户名： <input type="text" name="username" id="usernameEle"> <span
			id="errorSpan"> </span> </br> 密码： <input type="text" name="passowrd"
			id="password"> </br> <input type="submit" value="注册">
	</form>

</body>
</html>

4.ajax第四例：响应内容为xml数据

  • 服务器端：设置响应头：其值为：text/xml;charset=utf-8
  • var doc=xmlHttp.responseXML;//得到的是Document对象
    由于没有请求参数我们这里使用GET请求

服务器：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	   //设置编码方式
		String xml="<students>"+
		         "<student id='1' >"+
				"<name>张三</name>"+
		         "<age>15</age>"+
				 "</student>"+
		         "</students>";
		response.setContentType("text/xml;charset=utf-8");
		response.getWriter().write(xml);
	}

客户端：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">

function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return new ActiveObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				return new ActiveObject("Microsoft.XMLHTTP");

			} catch (e) {
				alert("哥们儿，你用的是什么浏览器啊？");
				throw e;

			}
		}
	}
}
window.onload =function(){
	var btu=document.getElementById("btu");
	btu.onclick=function(){
		/*  ajax四部操作，得到服务器的响应
		 把响应结果显示到h1元素中
		*/
		/*  1.得到异步对象
		*/
		var xmlHttp=createXMLHttpRequest();
		//2.打开与服务器的连接
		xmlHttp.open("GET","BServlet",true);
		//3.发送请求
		xmlHttp.send(null);
		//4.注册事件监听器
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status==200){//双重判断
				var doc=xmlHttp.responseXML;
			    var h1=document.getElementById("h1");
			    //查询文档下名为student的所有元素,再取下标0
			    var ele=doc.getElementsByTagName("student")[0];
			    var id=ele.getAttribute("id");
			    var name;
			    var age;
			    //处理浏览器差异问题
			    if(window.addEventListener){
			    	name= ele.getElementsByTagName("name")[0].textContent;//其他浏览器
				    age= ele.getElementsByTagName("age")[0].textContent;
			    }else{
			    	name= ele.getElementsByTagName("name")[0].text;//IE浏览器
				    age= ele.getElementsByTagName("age")[0].text;
			    }
			    var text="id="+id+"name="+name+"age="+age;
			    h1.innerHTML=text;
				
			}
		}
		
		
	}
}
</script>
</head>
<body>
   <button id="btu">点击这里</button>
   <h1 id="h1"> </h1>

</body>
</html>

5.ajax第五例：省市联动

1.页面
<select name="province">
<option>===请选择省市===</option>
</select>
<select name="city">
<option>===请选择城市===</option>
</select>
2.ProvinceServlet
ProvinceServlet:当页面加载完毕后马上请求这个Servlet!
它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端！
3.页面的工作
获取这个字符串，使用逗号分隔，得到数组。
循环遍历每个字符串（省份的名称），使用每个字符串(省份的名称),使用每个字符串创建一个<option>元素添加到<select name="province">这个元素中
4.CityServlet
CitySetvlet:当页面选择某个省时，发送请求！
得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象！把这个元素转换成xml字符串
5.页面的工作
把<select name="city">中的所有子元素删除，但不要删除<option>===请选择城市===</option>
得到服务器的响应结果:doc!!!
获取所有的<city>子元素，循环遍历，得到<city>的内容
使用每个<city>的内容创建一个<option>元素，添加到<select name="city>

思维图：

在这里插入图片描述
ProvinceServlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		// 解析xml文件
		SAXReader saxReader = new SAXReader();
		try {
			
			InputStream input=this.getClass().getResourceAsStream("/china.xml");
			Document document = saxReader.read(input);
			System.out.println(document);
			List<Attribute> list = document.selectNodes("//province/@name");
			StringBuilder sb = new StringBuilder();// 把所有省份的值存到这个字符串中，以逗号隔开
			for (int i = 0; i < list.size(); i++) {
				sb.append(list.get(i).getValue());
				if (i < list.size() - 1) {
					sb.append(",");
				}
			}
			response.getWriter().print(sb);
		} catch (DocumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

CityServlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//根据请求省份名称，将对应省份城市转换成字符串发送给客户端
		//解析xml文件
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/xml;charset=utf-8");
		String pname=request.getParameter("pname");
		SAXReader saxReader=new SAXReader();
		
		try {
			InputStream input=this.getClass().getResourceAsStream("/china.xml");
			Document document =saxReader.read(input);
			Element proEle=(Element) document.selectSingleNode("//province[@name='"+pname+"']");
		    String xmlStr=proEle.asXML();
		    response.getWriter().print(xmlStr);
		} catch (DocumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

ajax.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return new ActiveObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				return new ActiveObject("Microsoft.XMLHTTP");

			} catch (e) {
				alert("哥们儿，你用的是什么浏览器啊？");
				throw e;

			}
		}
	}
}
/*
 * 1.在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="provice"/>中
   2.在选择了新的省份时，发送请求（参数为省份名称）,得到xml文档，即<province>元素
   解析xml文档，得到其中所有的<city>，再得到每个<city>中的市名，使用市名生成<option>插入到<select name="city">中
   
 */
window.onload=function(){
	   //1.ajax四步，请求ProvinceServlet，得到所有省份名称
	   var xmlHttp=createXMLHttpRequest();
	   xmlHttp.open("GET","ProvinceServlet",true);
	   xmlHttp.send(null);
	   xmlHttp.onreadystatechange=function(){
		   if(xmlHttp.readyState==4 && xmlHttp.status==200){
			   //获取服务器的响应
			   var text =xmlHttp.responseText;
			   //使用逗号分隔它，得到数组
			   var arr=text.split(",");
			   //循环遍历每个省份名称，每个名称生成一个option对象，添加到<select>中
			   for(var i=0;i<arr.length;i++){
				   var op=document.createElement("option");
				   op.value=arr[i];//设置op的实际值为当前的省份名称
				   var textNode=document.createTextNode(arr[i]);//创建文本节点
				   op.appendChild(textNode);
				   document.getElementById("p").appendChild(op);
			   }
		   }
	   }
	   //2.给<select name="province">添加改变监听
	   //使用选择的省份名称请求CityServlet,得到<province>与元素（xml元素）
    
	  var proSelect=document.getElementById("p");
	proSelect.onchange = function() {
		    
		       //删除city下的所有子元素，防止每次选择后城市列表都会叠加
		       
		       
		     var citySelect =document.getElementById("c");
		     var cityList=  citySelect.getElementsByTagName("option");
		     while(cityList.length>1){//列表要留下一列请选择
		    	 citySelect.removeChild(cityList[1]);//每次都溢出第一个元素
		     }
			var xmlHttp = createXMLHttpRequest();
			xmlHttp.open("POST", "CityServlet", true);
			xmlHttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");

			xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					//得到服务器xml文档
					var doc = xmlHttp.responseXML;
					//得到所有名为city的元素
					var cityEleList = doc.getElementsByTagName("city");
					//遍历每个city节点获取里面的值
					for (var i = 0; i < cityEleList.length; i++) {
						var cityEle = cityEleList[i];
						var cityName;//获取市名称
						if (window.addEventListener) {//处理浏览器差异问题
							cityName = cityEle.textContent;
						} else {
							cityName = cityEle.text;
						}
						//根据城市名称创建option节点，插入到select中
						var op = document.createElement("option");
						op.value = cityName;//设置op的实际值为当前的省份名称
						var textNode = document.createTextNode(cityName);//创建文本节点
						op.appendChild(textNode);
						citySelect.appendChild(op);

					}

				}
			}

		}

	};
</script>
<body>

<h1>省市联动</h1>
<select name="province" id="p">
  <option>===请选择省份===</option>
</select>
     
<select name="city" id="c">
  <option>===请选择城市===</option>
</select>
</body>
</html>
池鱼之殃
原创文章 114 获赞 84 访问量 1万+
关注 私信

猜你喜欢

转载自blog.csdn.net/qq_44867340/article/details/105755133
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022