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>
原文地址：https://www.jb51.cc/ajax/161819.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
