• Ajax学习与使用（HTML、XML、JSON格式数据的处理方法、区别）

    目录

    什么是Ajax：

    为什么使用Ajax：

    举例说明传统页面程序与Ajax程序的区别：

    传统程序处理流程：

    而Ajax的程序的工作过程：

    原理图： 

     Ajax文本格式数据

     Html格式：

     Html格式优点：

     Html格式缺点：

    XML格式

    JSON格式

    实现无刷新验证用户名——步骤：

     参考代码：

    什么是Ajax：

    Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。

    为什么使用Ajax：

    Ajax技术解决了很多其它技术解决不了的问题，

    比如: 页面无刷新的动态数据交换-----对比传统页面的数据交换

    局部刷新页面【验证用户名唯一】

    界面的美观     【增强用户体验】

    可以返回简单的文本格式，也可以返回 xml文件格式, json数据格式

    举例说明传统页面程序与Ajax程序的区别：

    如图是一个查询服务器的日期与时间的网页，在选择日期或者时间后单击“查询”按钮，可以看到服务器的日期或者时间。

    传统程序处理流程：

    1、用户在选择是日期还是时间后单击查询，浏览器把用户选择发送给服务器；

    2、服务器接收到用户选择后确定输出日期或者时间，再次把列表框<select>、按钮<input type="submit" />、<span>及结果数据一起发送给客户端；
    3、浏览器再次收到整个页面的HTML代码，浏览器把结果数据放入<span>中进行显示。

     我们发现：

    1、有些HTML代码例如列表、按钮等在第一次浏览服务器网页时已经得到，在提交服务器后服务器第二次返回时没有必要再次又把它们传递给客户端浏览器，这样会增大网络流量。

    2、提交后服务器返回整个页面，客户端会感觉到整个网页在晃动，影响了客户的体验。

    而Ajax的程序的工作过程：

    1、用户在选择是日期还是时间后单击查询，浏览器把用户选择发送给服务器；

    2、服务器接收到用户选择后确定输出日期或者时间，只把结果发送给客户端，已经发送过的列表框<select>、按钮<input type="submit" />、<span>等不再发送给客户端；

    3、浏览器收到结果后把数据放入<span>中进行显示。

     优点：

    减少网络流量，只返回结果数据、让用户感受不到页面的晃动。

    原理图： 

    传统web应用：

    Ajax原理示意图：

     Ajax文本格式数据

    从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言一般以 3 种格式返回数据。

    分别是Text（又称Html格式）、XML、JSON

     Html格式：

    HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。

    不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。

    插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。

     Html格式优点：

    从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。

    HTML 的可读性好。

    HTML 代码块与 innerHTML 属性搭配，效率高。

     Html格式缺点：

    需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适

    innerHTML 并非 DOM 标准。

    XML格式

    JSON格式

    实现无刷新验证用户名——步骤：

    1、创建一个XMLHttpRequest对象

    此部分为创建XMLHttpRequest

    1. function getXmlHttpRequest(){
    2. 		var xmlHttpRequest = "";
    3. 		if(window.ActiveXObject){
    4. 			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    5. 		}else{
    6. 			xmlHttpRequest = new XMLHttpRequest();
    7. 		}
    8. 		return xmlHttpRequest
    9. 	}

    2、通过xmlHttpRequest对象的方法发送请求到服务器的某个页面，使用xmlHttpRequest.open(), xmlHttpRequest.send()

    1. function checkName(){
    2. 		myXmlHttpRequest = getXmlHttpRequest();
    3. 		//alert(myXmlHttpRequest);
    4. 		//判断对象是否创建成功
    5. 		if(myXmlHttpRequest){
    6. 			var url = "registerProcess.jsp?un="+$("username").value;
    7. 			//alert(url);
    8. 			//使用myXmlHttpRequest对象发送请求到服务器的某个页面，使用myXmlHttpRequest.open()
    9. 			myXmlHttpRequest.open("get",url,true);
    10. 			/*
    11. 				第一个参数表示请求的方式，get/post   post表示长度无限制
    12. 				第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
    13. 				第三个参数表示 true表示使用异步机制,如果false表示不使用异步
    14. 			*/
    15. 			//绑定一个函数	指定回调函数.callback是函数名
    16. 			myXmlHttpRequest.onreadystatechange = callback;
    17. 			
    18. 			//发送	get请求  参数为null即可
    19. 			//如果是post请求，则填入实际的数据
    20. 			myXmlHttpRequest.send(null);
    21. 		}
    22. 	}

    3、服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果

    1. function callback(){
    2. 	//alert(111);
    3. 	//alert(myXmlHttpRequest.readyState);
    4. 		
    5. 	//readyState为myXmlHttpRequest对象的状态：0：未初始化；1=读取中；2=已读取；3=交互中；4=完成
    6. 	if(myXmlHttpRequest.readyState==4){
    7. 		//alert(myXmlHttpRequest.responseText);
    8. 		//responseText为服务气进程返回数据的文本版本
    9. 		$("myres").value =  myXmlHttpRequest.responseText;	
    10. 	}
    11. }

    因为我们这里没有设置数据库，在registerProcess.jsp中设置了相应的处理：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <%
    4. 	String username = request.getParameter("un");
    5. 	if(username.equals("zhangsan")){
    6. 		out.print("用户名不可用");
    7. 	}else{
    8. 		out.print("用户名可用");
    9. 	}
    10. %>

    这里解释一下：String username = request.getParameter("un");这句代表表示通过request.getParameter方法在服务器获取了名字为un 的数据：

    也就是上方第二步中请求某个页面的地址与请求参数：

     后面的$("username")是使用js中的获取表格对象的方法：

     4、客户端通过xmlHttpRequest的属性 接收数据，然后就完成局部刷新当前页面任务-- reponseText , responseXML

      最后通过判断获取到相应的提示，输出在相应的文本框中：

     注：以下为html代码

    1. <body>
    2. 	<form action="???" method="post">
    3. 	<!-- onkeyup="checkName()" 效果为自己进行调用checkName（）方法     -->
    4.     用户名字:
    5.     <input type="text" onkeyup="checkName()" name="username1" id="username"><br>
    6.    <!--<input type="button" onclick="checkName()"  value="验证用户名">
    7.     style="border-width:  表示表格宽度  -->
    8.     <input style="border-width: 0;  color: red" type="text" id="myres">
    9.     <br/>
    10.     用户密码:<input type="password" name="password"><br><br>
    11.     电子邮件:<input type="text" name="email"><br/><br>
    12.     <input type="submit" value="用户注册">
    13.     </form>
    14. </body>

    结果展示（达到随时输入，随时刷新）：

     参考代码：

    register.jsp文件：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4. <html>
    5. <head>
    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. <title>Insert title here</title>
    8.  
    9. <script type="text/javascript">
    10. 	function getXmlHttpRequest(){
    11. 		var xmlHttpRequest = "";
    12. 		if(window.ActiveXObject){
    13. 			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    14. 		}else{
    15. 			xmlHttpRequest = new XMLHttpRequest();
    16. 		}
    17. 		return xmlHttpRequest
    18. 	}
    19. 	
    20. 	function checkName(){
    21. 		myXmlHttpRequest = getXmlHttpRequest();
    22. 		//alert(myXmlHttpRequest);
    23. 		//判断对象是否创建成功
    24. 		if(myXmlHttpRequest){
    25. 			var url = "registerProcess.jsp?un="+$("username").value;
    26. 			//alert(url);
    27. 			//使用myXmlHttpRequest对象发送请求到服务器的某个页面，使用myXmlHttpRequest.open()
    28. 			myXmlHttpRequest.open("get",url,true);
    29. 			/*
    30. 				第一个参数表示请求的方式，get/post   post表示长度无限制
    31. 				第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
    32. 				第三个参数表示 true表示使用异步机制,如果false表示不使用异步
    33. 			*/
    34. 			//绑定一个函数	指定回调函数.callback是函数名
    35. 			myXmlHttpRequest.onreadystatechange = callback;
    36. 			
    37. 			//发送	get请求  参数为null即可
    38. 			//如果是post请求，则填入实际的数据
    39. 			myXmlHttpRequest.send(null);
    40. 			
    41. 		}
    42. 		
    43. 	}
    44. 	function callback(){
    45. 		//alert(111);
    46. 		//alert(myXmlHttpRequest.readyState);
    47. 		
    48. 		//readyState为myXmlHttpRequest对象的状态：0：未初始化；1=读取中；2=已读取；3=交互中；4=完成
    49. 		if(myXmlHttpRequest.readyState==4){
    50. 			//alert(myXmlHttpRequest.responseText);
    51. 			//responseText为服务器进程返回数据的文本版本
    52. 			$("myres").value =  myXmlHttpRequest.responseText;
    53. 			
    54. 		}
    55. 	}
    56. 	function $(id){
    57. 		return document.getElementById(id);
    58. 	}
    59. </script>
    60.  
    61. </head>
    62. <body>
    63. 	<form action="???" method="post">
    64. 	<!-- onkeyup="checkName()" 效果为自己进行调用checkName（）方法     -->
    65.     用户名字:
    66.     <input type="text" onkeyup="checkName()" name="username1" id="username"><br>
    67.    <!--<input type="button" onclick="checkName()"  value="验证用户名">
    68.     style="border-width:  表示表格宽度  -->
    69.     <input style="border-width: 0;  color: red" type="text" id="myres">
    70.     <br/>
    71.     用户密码:<input type="password" name="password"><br><br>
    72.     电子邮件:<input type="text" name="email"><br/><br>
    73.     <input type="submit" value="用户注册">
    74.     </form>
    75. </body>
    76. </html>

    registerProcess.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <%
    4. 	String username = request.getParameter("un");
    5. 	if(username.equals("zhangsan")){
    6. 		out.print("用户名不可用");
    7. 	}else{
    8. 		out.print("用户名可用");
    9. 	}
    10. %>

  • 相关阅读:
    数据湖：数据同步工具NiFi
    HACKTHEBOX——Bank
    Windows——关于service
    深度神经网络训练
    内网渗透神器CobaltStrike之钓鱼攻击(六)
    ke9案例三:页面提交文件,我服务器端接收
    防火墙的内容安全
    PostgreSQL 连接是否要通过SSL，为什么使用SSL 连接后，业务部门会投诉我？
    搭建JMeter+Grafana+influxdb性能测试监控平台
    NC236758 占领城市 (最小路径点覆盖)
  • 原文地址：https://blog.csdn.net/qq_59801860/article/details/124684205