js之ajax的一点理解

来源：互联网发布：2017金融大数据论坛编辑：程序博客网时间：2024/05/24 06:12

一、定义：

1.Ajax是Asynchronous Javascript And Xml 的缩写（异步javascript及xml），Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换

不重新加载整个网页的情况下，对网页的某部分进行更新。

二、进步：

在等待服务器响应时执行其他脚本（异步处理，每个一段时间来轮询一下状态）
当响应就绪后对响应进行处理

三、代码:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->    <title>php</title>    <script type="text/javascript">        window.addEventListener("load",function() {            var btn = document.getElementById("btn");            var content = document.getElementById("content");            btn.addEventListener("click",function() {                var request = new XMLHttpRequest();                request.onreadystatechange = function() {                    if(request.readyState === 4 && request.status == 200) {                        // console.log(JSON.parse(request.responseText));                        content.innerHTML = request.responseText;                    }                }                request.open("GET","./test.php",true);                // request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");                request.send(null);            });        },false);    </script></head><body><input type="button" value="点我" id="btn"><h2>下面是点击后的内容：</h2><p id="content"></p></body></html>

注意:使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

原因:当async=falsle时，是阻塞的，等待服务器响应才会执行后续的代码，所以可以这样写:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

四、回调函数：

<html><head>    <meta charset="utf-8">    <script type="text/javascript">        var xmlhttp;        function loadXMLDoc(url,callback)        {            if (window.XMLHttpRequest)            {// code for IE7+, Firefox, Chrome, Opera, Safari                xmlhttp=new XMLHttpRequest();            }            else            {// code for IE6, IE5                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");            }            xmlhttp.onreadystatechange=callback;            xmlhttp.open("GET",url,true);            xmlhttp.send();        }        function myFunction()        {            loadXMLDoc("./test.txt",function()            {                if (xmlhttp.readyState==4 && xmlhttp.status==200)                {                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;                }            });        }    </script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="myFunction()">通过 AJAX 改变内容</button></body></html>

五、与XML的交互

function loadXMLDoc(url){var xmlhttp;var txt,xx,x,i;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");    for (i=0;i<x.length;i++)      {      txt=txt + "<tr>";      xx=x[i].getElementsByTagName("TITLE");        {        try          {          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";          }        catch (er)          {          txt=txt + "<td> </td>";          }        }    xx=x[i].getElementsByTagName("ARTIST");      {        try          {          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";          }        catch (er)          {          txt=txt + "<td> </td>";          }        }      txt=txt + "</tr>";      }    txt=txt + "</table>";    document.getElementById('txtCDInfo').innerHTML=txt;    }  }xmlhttp.open("GET",url,true);xmlhttp.send();}

阅读全文

0 0