Ajax的笔记

Posted 2020-08-22 necod

Ajax指异步javascript及XML(Asynchronous JavaScipt And XML),是一种异步交互式网页开发技术，用于创建快速动态网页。与服务器进行少量数据交换中，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

97年微软便发明了ajax的关键技术，并且在99年用于IE5中，但可惜因为其它原因没有被推广搁置了起来，ajax技术的流行得益于google的大力推广。Ajax的核心是JavaScript对象XmlHttpRequest,是一种支持异步请求的技术，它的意义有：1.在不重新加载页面的情况下更新网页。2.在页面已加载后从服务器请求数据。3.在页面已加载后从服务器接收数据。4.在后台向服务器发送数据。需要注意的是AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

 

1.AJAX的工作原理：

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

 

2.Ajax的优点：

1.最大的一点是页面无刷新，用户的体验非常好。

2.使用异步方式与服务器通信，具有更加迅速的响应能力。

3.可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

5.Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

 

3.Ajax的缺点：

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

 

4.XmlHttpRequest对象的属性和方法：

属性	说明
readyState	存有 XMLHttpRequest 的状态。从0到4发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
Onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
responseText	服务器响应的文本内容
responseXML	服务器响应的XML内容对应的DOM对象
Status	服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
statusText	服务器返回状态的文本信息。

 

 

方法	说明
Open(string method,string url,boolean asynch, String username,string password)	指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method:表示http请求方法，一般使用"GET","POST". url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步； 后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
Send(content)	向服务器发出请求，如果采用异步方式，该方法会立即返回。 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
SetRequestHeader(String header,String Value)	设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。
getAllResponseHeaders()	返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。 返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
getResponseHeader(String header)	返回HTTP响应头中指定的键名header对应的值
Abort()	停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

 

 

上面了解了Ajax以及工作原理和XmlHttpRequest对象的属性和方法，那我们该怎么样来使用它呢？这里我分来五步来实现。

 

第一步：创建XmlHttpRequest对象:

1 2 3 4 5 6 7

var xmlhttp = null; //XMLHttpRequest IE6是有兼容问题的,可以判断ie6的 ActiveXObject(‘Microsoft.XMLHTTP‘) if(window.XMLHttpRequest){     xmlhttp =new XMLHttpRequest();//除了IE6以外的浏览器 }else{     xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器 }

 

第二步：指定链接地址：

1	var url=‘demo.php‘。

 

第三步：发送资源请求给服务器。

使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

xmlhttp.open(method,url,async) method包括get和post，url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）

xmlhttp.send();使用get方法发送请求到服务器。

xmlhttp.send(string);使用post方法发送请求到服务器。

 

post 发送请求什么时候能够使用呢？

(1)更新一个文件或者数据库的时候。

(2)发送大量数据到服务器，因为post请求没有字符限制。

(3)发送用户输入的加密数据。

 

get例子：

1 2 3 4

xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.open("GET", "index.html", true); xmlhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send(); xmlhttp.send(null);//传递参数用的,但是只有在使用post方式提交请求的时候才有用

post例子:

1 2	xmlhttp.open("POST", "demo_post.asp", true); xmlhttp.send();

post表单例子:

1 2 3

xmlhttp.open("POST", "ajax_test.aspx", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

 

第四步：服务器响应

使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

 

如果来自服务器的响应并非 XML，请使用responseText属性。

responseText 属性返回字符串形式的响应，因此可以这样使用：

responseText例子：

1	document.getElementById("demo").innerHTML=xmlhttp.responseText;

 

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

responseXML例子：

1 2 3 4 5 6 7

xmlDoc = xhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i < x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("demo").innerHTML = txt;

 

第五步：onreadystatechange函数的使用

onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。

readyState属性，XMLHttpRequest对象的状态，改变从0到4，0代表请求未被初始化，1代表服务器连接成功，2请求被服务器接收，3处理请求，4请求完成并且响应准备。

status属性，200表示成功响应，404表示页面不存在。

在onreadystatechange事件中，服务器响应准备的时候发生，当readyState==4和status==200的时候服务器响应准备。

 

1 2 3 4 5 6 7

xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("demo").innerHTML=xmlhttp.responseText;     }   }

 

使用回调函数 

 

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

1 2 3 4 5 6 7

function myFunction(){     loadXMLDoc("/try/ajax/ajax_info.txt",function()     {         if (xmlhttp.readyState==4 && xmlhttp.status==200)         {             document.getElementById("demo").innerHTML=xmlhttp.responseText;        }     });}

 

在实际的运用中，尝试利用事件+ajax 给button绑定点击事件，然后执行ajax。

 

server.php

 

<?php 
	if (isset($_POST[‘action‘]))
	{
		switch($_POST[‘action‘])
		{
			case "btn1":btn1();break;
			case "btn2":btn2();break;
			default:break;
		}
	}
	
	function btn1()
	{
		echo "hello 按钮1";
	}
	function btn2()
	{
		echo "hello 按钮2";
	}

?>

 

方式：index.php

 

<html>
<head>
	<style>
		div {width:600px;margin:200px auto;}
		
		.btn {
			background-color:#44c767;
			-moz-border-radius:28px;
			-webkit-border-radius:28px;
			border-radius:28px;
			border:1px solid #18ab29;
			display:inline-block;
			cursor:pointer;
			color:#ffffff;
			font-family:Arial;
			font-size:17px;
			padding:16px 31px;
			text-decoration:none;
			text-shadow:0px 1px 0px #2f6627;
		}
		.btn:hover {
			background-color:#5cbf2a;
		}
		.btn:active {
			position:relative;
			top:1px;
		}
		
		#btn2 {float:right;}
	</style>
	<script type="text/javascript" language="javascript">
		var xmlHttp;  
		function createXMLHttpRequest(){ 
			//检查浏览器是否支持 XMLHttpRequest 对象
			if(window.ActiveXObject){  
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
			}  
			else if(window.XMLHttpRequest){  
				xmlHttp = new XMLHttpRequest();  
			}  
		}  
		function fun(n){  
			createXMLHttpRequest();  
			var url="server.php";  
			xmlHttp.open("POST",url,true); 
			xmlHttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
			xmlHttp.onreadystatechange = callback;  
			xmlHttp.send("action=" + n.value);  
		}  
		function callback(){  
			if(xmlHttp.readyState == 4){  
				if(xmlHttp.status == 200){  
					alert(xmlHttp.responseText);   
				}  
			}  
		} 
	</script>
</head>

<body>
	<div>
		<button type="button" class="btn" id="btn1" onclick="fun(this)" value="btn1">按钮1</button>
		<button type="button" class="btn" id="btn2" onclick="fun(this)" value="btn2">按钮2</button>
	</div>
</body>


</html>