AJAX=异步JavaScript+XML;
ajax是一种无需重新加载整个网页情况下能够更新部分网页的技术。
简单描述:
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
创建ajax详细过程:
step1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象;
step2. 创建一个新的HTTP请求,并指定改HTTP请求的方法、URL以及验证信息;
step3. 设置响应HTTP状态变化的函数;
step4. 发送HTTP请求;
step5. 获取异步调用返回的数据;
step6. 使用javascript和DOM实现局部刷新;
重要代码实现:
<script> var xmlhttp; function createXMLHttpRequest(){ xmlhttp=null; if (window.XMLHttpRequest){ xmlhttp=new xmlHttpRequest(); //Netscape浏览器中的创建方式 }else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的创建方式 } //异步调用服务器段数据 if(xmlhttp!=null){ xmlhttp.open("GET/POST",url,true); //创建HTTP请求 xmlhttp.onreadystatechange=httpStateChange;//设置HTTP请求状态变化的函数 xmlhttp.send(null); //发送请求 }else{ alert("不支持XHR") } } //响应HTTP请求状态变化的函数 function httpStateChange(){//判断异步调用是否完成 if(xmlhttp.readyState==4){//readyState==4表示后台处理完成了 if(xmlhttp.status==200||(xmlhttp.status==0){//状态码为0是本地响应成果,200表示处理的结果是ok的 //判断异步调用是否成功,如果成功开始局部更新数据 //code... }else{ alert("出错状态码:"+xmlhttp.status+"出错信息:"+xmlhttp.statusText); } } } </script>
ajax例子:
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX实例</title>
<script language="javascript" type="text/javascript"> var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象 //定义一个用于创建XMLHttpRequest对象的函数 function createXMLHttpRequest(){ if(window.ActiveXObject){//IE浏览器的创建方式 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ //Netscape浏览器中的创建方式 xmlHttpRequest = new XMLHttpRequest(); } } //响应HTTP请求状态变化的函数 function httpStateChange(){//判断异步调用是否完成 if(xmlHttpRequest.readyState == 4){ //判断异步调用是否成功,如果成功开始局部更新数据 if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0){//查找节点 var node = document.getElementById("myDIv");//更新数据 node.firstChild.nodeValue = xmlHttpRequest .responseText; } else{ //如果异步调用未成功,弹出警告框,并显示出错信息 alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText); } } } //异步调用服务器段数据 function getData(name,value){//创建XMLHttpRequest对象 createXMLHttpRequest(); if(xmlHttpRequest!=null){ //创建HTTP请求 xmlHttpRequest.open("get","ajax.text",true) //设置HTTP请求状态变化的函数 xmlHttpRequest.onreadystatechange = httpStateChange; //发送请求 xmlHttpRequest.send(null); } } </script>
</head>
<body>
<div id="myDiv">原数据</div>
<input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>