创建ajax过程

发布时间：2020-12-16 01:28:56 所属栏目：百科来源：网络整理

导读：AJAX=异步JavaScript+XML； ajax是一种无需重新加载整个网页情况下能够更新部分网页的技术。简单描述： Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。创建ajax详细过程： step

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!