ajax笔记1_传统页面无刷新技术-CSDN博客

本文链接：https://blog.csdn.net/sinat_23490433/article/details/78877831

1、什么是ajax?

ajax即异步JavaScript和xml，它是一种页面无刷新的技术。

浏览器端与服务器端进行通信无需刷新当前页面的技术都可以称之为ajax技术。

2、传统的和ajax的区别?

传统的页面交互：用户触发一个http请求到服务器，服务器端接收请求后对其进行处理。

处理后再返回一个新的html页面到客户端。

每当服务器处理客户端提交的请求时，客户端都只能空闲等待。

哪怕只是一次很小的交互，只需从服务器端得到很小的数据，都需要返回一个完整的HTML页。

而用户每次都需要浪费时间和带宽去重新读取整个页面。这样很浪费时间和带宽，对用户体验度极其低下。

ajax：数据在客户端和服务器端之间建立连接，服务器端不再返回整个页面。

3、ajax的优点和缺点？

优点：

1）、无刷新更新数据：不刷新整个页面的前提下与服务器通信，减少用户等待时间，提高用户体验度。

2）、异步与服务器进行通信

异步：发送一个请求，不需要等待返回，随时可以再发送下一个请求。即不需要等待

同步：发送一个请求，需要等待返回，然后才能发送下一个请求，有一个等待的过程。

同步和异步的区别？

一个需要等待，一个不需要等待。在部分情况下优先选择不需要等待的异步交互方式。

如：银行的转账系统，对数据库的保存操作等，都会使用同步交互操作。其它情况优先使用异步交互。

3）、前端和后端负载均衡

将一些服务器负担的工作转嫁给客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担。

缺点：

1）、干掉了back和history功能，即对浏览器机制的破坏

2）、对搜索引擎支持较弱：如果使用不当，ajax会增加网络数据的流量，从而降低整个系统的性能。

3）、ajax不能很好的支持移动设备

4）、ajax的安全问题：ajax给用户带来很好用户体验度，同时也对IT企业带来了新的安全威胁。

ajax技术如同对企业数据建立了一个直接通道，使得开发者在不经意之间会暴露比以前更多的数据和服务器逻辑。

4、ajax工作原理

相当于在服务器端和客户端之间加了一个中间层(ajax引擎)

使得用户操作和服务器响应异步化。

并不是所有的用户请求都提交给服务器，向一些数据验证和数据处理都会交给ajax引擎自己来做。

只有确定需要从服务器读取新数据时再由ajax引擎代为向服务器提交请求。

ajax的核心有JavaScript、XMLHttpRequest、DOM对象组成，通过XMLHttpRequest对象来向服务器发

异步请求，从服务器获得数据，然后在用JavaScript来操作Dom而更新页面。

5、基于JavaScript的ajax

使用ajax的步骤：

1）、创建XMLHttpRequest对象

2）、调用XMLHttpRequest对象的open("请求方式"，“请求路径”，“是否异步”)；

调用XMLHttpRequest对象的send()方法发送请求到服务器

3）、使用XMLHttpRequest对象的响应回调函数onreadystatechange=function(){...}

4）、通过XMLHttpRequest对象的readyState判断响应是否完成（readyState==4则请求完成）

5）、通过XMLHttpRequest对象的status判断请求的响应是否可用

6）、打印响应结果。通过responseText和responseXML

7）、return false;取消行为

如：一个传统的ajax

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'index.jsp' starting page</title>
	
	<script type="text/javascript">
		function helloWorld(){
			//1.获得a节点
			var aNode=document.getElementsByTagName("a")[0];
			//3.创建一个XMLHttpRequest对象(注意大小写)
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();  //IE7、chrome、firefox
			}else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6
			}
			//4.准备发送请求的url
			//链接后面加上时间戳,可以起到禁用缓存的效果
			var url=this.href+"?time="+new Date();   //请求发送到的url就是当前的href路径
			//5.请求的方式
			var method="POST";
			//6.调用XMLHttpRequest对象的send方法,发送请求
			xmlhttp.open(method,url);
			xmlhttp.send();
			//7.为XMLHttpRequest对象添加onreadystatechange方法
			xmlhttp.onreadystatechange=function(){
				//8.判断请求是否完成,当readystate=4时完成
				if(xmlhttp.readystate==4){
					//9.判断响应是否可用,即url链接是否正确
					if(xmlhttp.status==200 ||xmlhttp.status==304){
						//10.打印响应的结果，responseText
						alert(xmlhttp.responseText);
					
					}
				}
			};
			
			//2.取消a节点的默认行为
			return false;
		}
	</script>
  </head>
  
  <body>
   		<a href="note.jsp" οnclick="helloWorld()">hello world</a>
  </body>
</html>

note.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'note.jsp' starting page</title>

  </head>
  
  <body>
   	hello,ajax ^ ^
  </body>
</html>

ajax处理请求的方式，一般有三种方式：HTML、XML和json

1）、HTML方式处理

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'htmlAjax.jsp' starting page</title>
    
	<script type="text/javascript">
		window.οnlοad=function(){
			
			//获取a节点
			var aNode=document.getElementsByTagName("a");
			//遍历a节点
			for(var i=0;i<aNode.length;i++){
				//为a节点赋予行为事件
				aNode[i].οnclick=function(){
					
					//1.创建XMLHttpRequest对象
					var xmlhttp;
					if(window.XMLHttpRequest){
						xmlhttp=new XMLHttpRequest();  //IE7、chrome、Safair、Firefox
					}else{
						xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
					}
					//alert(xmlhttp);
					//2.准备发送请求的链接
					var url=this.href+"?time"+new Date();
					//3.发送请求
					xmlhttp.open("GET",url);
					xmlhttp.send(null);
					//4.onreadystatechange响应函数
					xmlhttp.onreadystatechange = function(){
						//5.判断响应是否完成
						if(xmlhttp.readyState==4){
							//alert("2222");
							//6.判断
							if(xmlhttp.status==200||xmlhttp.status==304){
								
								document.getElementById("details").innerHTML=xmlhttp.responseText;
								
							}
						}
					};
					return false;
				};	
				
			}
		};
	</script>
  </head>
  
  <body>
  	<!-- 点击不同的链接,将链接中的页面赋予给下面的div属性中 -->
    <ul>
    	<li><a href="test/test1.html">Test1</a></li>
    	<li><a href="test/test2.html">Test2</a></li>
    	<li><a href="test/test3.html">Test3</a></li>
    </ul>
    <div id="details" style="width:200px;height:200px;border:1px solid #ff0;"></div>
  </body>
</html>

test1.jsp

<!DOCTYPE html>
<html>
  <head>
    <title>test1.html</title>
  </head>
  
  <body>
  <h4> this is test1 page....</h4>
  </body>
</html>

test2.jsp

<!DOCTYPE html>
<html>
  <head>
    <title>test1.html</title>
  </head>
  
  <body>
  <h4> this is test2 page....</h4>
  </body>
</html>

test3.jsp

<!DOCTYPE html>
<html>
  <head>
    <title>test1.html</title>
  </head>
  
  <body>
  <h4> this is test3 page....</h4>
  </body>
</html>

注：主要通过

document.getElementById("details").innerHTML=xmlhttp.responseText;

即通过XMLHttpRequest的responseText属性将获取的内容赋予给指定的对象

HTML是三种格式中最好处理的一种，HTML由普通文本组成，文本将存储在responseText中，

它已经是所希望的文本，不用解析，直接用innerHTML属性使用就可以了

2）、xml方式处理

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'htmlAjax.jsp' starting page</title>
    
	<script type="text/javascript">
		window.οnlοad=function(){
			
			//获取a节点
			var aNode=document.getElementsByTagName("a");
			//遍历a节点
			for(var i=0;i<aNode.length;i++){
				//为a节点赋予行为事件
				aNode[i].οnclick=function(){
					
					//1.创建XMLHttpRequest对象
					var xmlhttp;
					if(window.XMLHttpRequest){
						xmlhttp=new XMLHttpRequest();  //IE7、chrome、Safair、Firefox
					}else{
						xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
					}
					//alert(xmlhttp);
					//2.准备发送请求的链接
					var url=this.href+"?time"+new Date();
					//3.发送请求
					xmlhttp.open("GET",url);
					xmlhttp.send(null);
					//4.onreadystatechange响应函数
					xmlhttp.onreadystatechange = function(){
						//5.判断响应是否完成
						if(xmlhttp.readyState==4){
							//alert("2222");
							//6.判断
							if(xmlhttp.status==200||xmlhttp.status==304){
								//debugger;
								var result=xmlhttp.responseXML;
								//2.不能直接使用,要先创建对应的节点，再将节点放入details中
								var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
								var phone=result.getElementsByTagName("phone")[0].firstChild.nodeValue;
								var address=result.getElementsByTagName("address")[0].firstChild.nodeValue;
								//3.创建相应的节点
								var aNode=document.createElement("a");
								aNode.appendChild(document.createTextNode(name));
								var bNode=document.createElement("b");
								bNode.appendChild(document.createTextNode(phone));
								document.getElementById("details").innerHTML="";
								document.getElementById("details").appendChild(aNode);
								document.getElementById("details").appendChild(bNode);
								
								/* for(i=0;i<ds.length;i++){		
									var name=ds[i].getElementsByTagName("name")[0].firstChild.nodeValue;
									var phone=ds[i].getElementsByTagName("phone")[0].firstChild.nodeValue;
									var address=ds[i].getElementsByTagName("address")[0].firstChild.nodeValue;
									
									//alert("name:"+name+"---"+"phone:"+phone+"---"+"address:"+address);
									document.getElementById("details").innerHTML="name:"+name+"<br/>"+"phone:"+phone+"<br/>"+"address:"+address;
								} */
							}
						}
					};
					return false;
				};	
				
			}
		};
	</script>
  </head>
  
  <body>
  	<!-- 点击不同的链接,将链接中的页面赋予给下面的div属性中 -->
    <ul>
    	<li><a href="xmlTest/Jhon.xml">Jhon</a></li>
    	<li><a href="xmlTest/Lucy.xml">Lucy</a></li>
    	<li><a href="xmlTest/Tom.xml">Tom</a></li>
    </ul>
    <div id="details" style="width:200px;height:200px;border:1px solid #ff0;"></div>
  </body>
</html>

jhon.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
	<name>Jhon</name>
	<phone>18829429419</phone>
	<address>湖北省武汉市武昌区</address>
</details>

Lucy.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
	<name>Lucy</name>
	<phone>18829333201</phone>
	<address>湖北省武汉市洪山区</address>
</details>

Tom.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
	<name>Tom</name>
	<phone>15379429419</phone>
	<address>湖北省武汉市江夏区</address>
</details>

XML格式优点和缺点

优点：通用的数据格式，不必将数据强加到已定义好的格式中，而是要为数据自定义合适的标记

缺点：如果文档来自于服务器，就必须得保证文档含有正确的首部信息。

如果文档类型不正确，那么responseXML的值将是空的

当浏览器接收到长的XML文件后，DOM解析可能会很复杂

json方式处理

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'jsonAjax.jsp' starting page</title>   
	<script type="text/javascript">
		var jsonObject={
			"name":"张三",
			"sex":'男',
			"age":18,
			"address":{"city":"湖北省武汉市","school":"武汉大学"},
			"teaching":function(){
				alert("中文");
			}
		};
		//alert(jsonObject.name);
		//alert(jsonObject.address.city);
		//alert(jsonObject.teaching());
		
		//将一个字符串转换为json对象
		var jsonStr='{"name":"李四","address":"湖北省武汉市武昌区"}';
		//alert(jsonStr.name);
		//调用eval()方法将字符串转换为json对象
		var jsonObj=eval("("+jsonStr+")");
		//alert(jsonObj.name);
		window.οnlοad=function(){
			var aNodes=document.getElementsByTagName("a");
			for(var i=0;i<aNodes.length;i++){
				aNodes[i].οnclick=function(){
					//1.创建XMLHttpRequest对象
					var xmlhttp;
					if(window.XMLHttpRequest){
						xmlhttp=new XMLHttpRequest();
					}else{
						xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
					}
					var href=this.href;
					xmlhttp.open("GET",href);
					xmlhttp.send();
					xmlhttp.onreadystatechange=function(){
						//debugger;
						if(xmlhttp.readyState==4){
							if(xmlhttp.status==200||xmlhttp.status==304){
								var result=xmlhttp.responseText;
								var jsonObj=eval("("+result+")");
								document.getElementById("details").innerHTML=jsonObj.name+"<br/>"+jsonObj.sex+"<br/>"
								+jsonObj.age+"<br/>"+jsonObj.address.city;
							}
						}
					};
					//2.取消a节点的行为属性
					return false;
				};
			}
		};
		
	</script>
  </head>
  
  <body>
    	<a href="jsonTest/Lucy.json">Lucy</a>
    	<div id="details" style="width:200px;height:200px;border:1px solid #f0f;"></div>
  </body>
</html>

Lucy.json

{
	"name":"zhangsan",
	"sex":"男",
	"age":18,
	"address":{"city":"湖北省武汉市","school":"武汉大学"},
	"teaching":function(){
		
	}
}

json优点和缺点

优点：

与xml类似，但是更加灵巧

不需要从服务器发送含有特定内容类型的首部信息

缺点：

语法过于严谨

代码不容易读

eval函数存在风险

三种数据传输格式的对比：

1、当远程应用程序未知时，XML优先，因为XML是web服务领域的世界语言

2、如果数据要重用，优先使用json

3、如果应用程序不需要与其它应用程序共享数据的时候，使用HTML片段来返回数据时最简单