理解AJAX与XMLHttpRequest对象-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

一，AJAX

是异步JavaScript和XML，它产生的主要目的是用于页面的局部刷新。当用户想服务器端发送请求时，即使是一个简单的局部更新，都会将一个整体的页面进行更新，并重新生成代码，使用AJAX后，就可以实现局部的内容变更。而不会再将整体页面刷新。

二，XMLHttpRequest对象

在AJAX中主要通过XMLHttpRequest对象处理发送异步请求和处理回应的，如果要想创建一个XMLHttpRequest对象则必须使用JavaScript。

使用异步处理

<!DOCTYPE html>
<html>
  <head>
    <title>ajax_receive_content.html</title>
    <script language="JavaScript">
    	var xmlHttp ;							//AJAX核心对象名称
    	function createXMLHttp(){				//创建XMLHttpRequest核心对象
			if(window.XMLHttpRequest)			//判断当前浏览器使用类型
			{
				xmlHttp = new XMLHttpRequest() ;
			}else{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
			}
    	}	    
    	function showMsg(){		
    		createXMLHttp() ;					//调用createXMLHttp函数创建xmlHttp对象
    		xmlHttp.open("POST","content.html") ;
    		xmlHttp.onreadystatechange = showMsgCallBack ;
    		xmlHttp.send(null) ;
    	}
    	function showMsgCallBack(){				//定义回调函数，完成内容的接收
    		if(xmlHttp.readyState==4){			//数据返回完毕
    			if(xmlHttp.status == 200)		//HTTP操作正常
    			{
    				var text = xmlHttp.responseText ;	//接收返回的内容，并设置到msg元素中接收
    				//设置msg标签元素中要显示的内容为Ajax接收的返回值内容
    				document.getElementById("msg").innerHTML = text ;
    			}
    		}
    	}
    </script>
  </head>
  
  <body>
  	<input type="button" onclick="showMsg()" value="调用AJAX显示内容">
  	<span id="msg"></span>
  </body>
</html>

以上程序中，当点击按钮时，会调用showMsg()函数，在showMsg()函数中首先调用createXMLHttp()函数创建xmlHttp对象，然后showMsgCallBack()函数完成内容的接收，在接收时，分别通过 readState==4(判断是否发送完毕)和status==200(200的Http状态码表示操作正确)判断操作是否正确完成，最后通过responseText接收返回的内容，并将其设置到msg元素中进行显示。

转载于:https://my.oschina.net/bugkiller/blog/631755