源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

零基础学习AJAX之AJAX的简介和基础

  • 时间:2021-11-30 07:40 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:零基础学习AJAX之AJAX的简介和基础
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介。 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)。 AJAX有四个方面的好处:1.即减轻了服务器的负担。2带来了更好的用户体验。3.基于标准被广泛的支持。4.拥有更好的页面呈现和数据分离。 技术名称 技术说明 javascript javascript是通用的脚本语言,AJAX是用javascript编写的 css 用户界面的样式通过css来修改 DOM DOM通过javascript修改DOM,ajax可以在运行时改变用户界面,或者局部更新页面中的某个节点。 XMLHttpRequest XMLHttpRequest对象 XMLHttpRequest对象允许web程序员从web服务器以后台的方式获取数据。数据的个数通常是XML或者是文本。 从上面我们看出,javascript就想胶水一样将各个部分粘贴在一起,例如通过javascript操作BOM改变刷新用户界面,通过修改className来改变css样式风格 [b]1.异步对象连接服务器[/b] 不严谨的说,ajax是一个简单的多线程,它能够是用户在前台多种操作而不间断。ajax异步交互在后台默默的工作着 在web中异步访问是通过XMLHttpRequest对象来实现的,该对象最早是在ie5被作为activeX控件引入的。随后各个浏览器纷纷支持该异步对象,首先必须创建对象。代码如下:
[url=http://study.ahthw.com/ajaxresponse/1-1.aspx]http://study.ahthw.com/ajaxresponse/1-1.aspx[/url]", true);                 xmlHttp.onreadystatechange = function() {                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200)                         alert("服务器返回: " + xmlHttp.responseText);                 }                 xmlHttp.send(null);             }         </script>         <input type="button" value="测试异步通讯" onClick="startRequest()">     </body>
为了解决异步连接ie缓存问题,需要在真实地址加一个与时间毫秒相关的参数,使得每次请求的地址都不一样。而该参数服务器确是不需要的。
[u]复制代码[/u] 代码如下:
var sUrl = "1-1.aspx?"+new Date().getTime();//地址不断变化         XMLHttp.open("GET",sUrl,true);
[b]2.GET和POST模式[/b] 上面的实例中,除了请求异步服务器以外,并没有向服务器发送额外的数据,通常在html请求中有get和post模式,这两种模式都可以作为异步请求发送数据的方式。 如果是GET请求,则直接把数据放入异步请求的URL地址中,而send方法不发送任何数据,例如:
[u]复制代码[/u] 代码如下:
    var queryString = "firstName=isaac&birthday=0226";             var sUrl = "1-1.aspx?" + queryString + "×tamp" + new Date().getTime();             xmlHttp.open("GET", sUrl);             xmlHttp.send(null); //该语句只发送null
如果是POST模式,则是把数据统一在send()方法中送出,请求地址没有任何信息,并且必须设置请求的文件头,例如:
[u]复制代码[/u] 代码如下:
<script language="javascript">             var queryString = "firstName=isaac&birthday=0226";             var sUrl = "1-1.aspx?" + queryString + "×tamp" + new Date().getTime();             xmlHttp.open("POST", sUrl);             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");             xmlHttp.send(queryString); //该语句负责发送数据         </script>
实例 为了更清楚地演示GET和POST的区别,编写示例代码,首先创建两个文本框用于输入用户姓名和生日,并建立两个按钮分别用于GET和POST两个方法来发送异步请求
[u]复制代码[/u] 代码如下:
<form>             <p><input type="text" id="firstName"/></p>             <p><input type="text" id="birthday" /></p>         </form>         <input type="button" value="GET" onClick="doRequestUsingGET()">         <input type="button" value="POST" onClick="doRequestUsingPOST()">
其中用户填写的数据统一用函数createQueryString()编写,需要时予以调运,代码如下
[u]复制代码[/u] 代码如下:
function crrateQueryString() {                 var firstName = document.getElementById("firstName").value;                 var birthday = document.getElementById("birthday").value;                 var queryString = "firstName=" + firstName + "&birthday=" + birthday;                 return queryString;             }
服务器接收到请求数据后根据不同的时刻返回相应的文本,客户端接收到文本后显示在相应的div快中,代码如下
[u]复制代码[/u] 代码如下:
    function handleStateChange() {                 if (xmlHttp.readyState == 4 && xmlHttp.state == 200) {                     var responseDiv = document.getElementById("serverResponse");                     responseDiv.innerHTML = xmlHttp.responseText;                 }             }
GET和POST各建立自己的函数doRequestUsingGET()和doRequestUsingPOST()。 完整代码如下:
[u]复制代码[/u] 代码如下:
<script type="text/javascript">             var xmlHttp;             function createXMLHttpRequest() {                 if (window.ActiveXObject)                     xmlHttp = new ActiveXObject("Microsoft.XMLHttp");                 else if (window.XMLHttpRequest)                     xmlHttp = new XMLHttpRequest();             }             function createQueryString() {                 var firstName = document.getElementById("firstName").value;                 var birthday = document.getElementById("birthday").value;                 var queryString = "firstName=" + firstName + "&birthday=" + birthday;                 return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题             }             function doRequestUsingGET() {                 createXMLHttpRequest();                 var queryString = "1-3.aspx?";                 queryString += createQueryString() + "×tamp=" + new Date().getTime();                 xmlHttp.onreadystatechange = handleStateChange;                 xmlHttp.open("GET", queryString);                 xmlHttp.send(null);             }             function doRequestUsingPOST() {                 createXMLHttpRequest();                 var url = "1-3.aspx?timestamp=" + new Date().getTime();                 var queryString = createQueryString();                 xmlHttp.open("POST", url);                 xmlHttp.onreadystatechange = handleStateChange;                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                 xmlHttp.send(queryString);             }             function handleStateChange() {                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {                     var responseDiv = document.getElementById("serverResponse");                     responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码                 }             }         </script>         <form>             <input type="text" id="firstName" />             <br>             <input type="text" id="birthday" />         </form>         <form>             <input type="button" value="GET" onclick="doRequestUsingGET();" />             <br>             <input type="button" value="POST" onclick="doRequestUsingPOST();" />         </form>         <div id="serverResponse"></div>
服务器端主要是根据用户输入以及请求的类型返回不同的字符串
[u]复制代码[/u] 代码如下:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <%@ Import Namespace="System.Data" %> <%     if(Request.HttpMethod == "POST")         Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);     else if(Request.HttpMethod == "GET")         Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]); %>
从以上代码看出POST和GET都发送了数据异步请求,通常在数据不多的时候使用GET,在数据较多的时候使用POST。 在使用PSOT发送中文字符时,post接收会乱码,使用GET发送中文字符正常。这是因为异步对象xmlHttp在处理返回的responseText的时候,是按照UTF-8编码的。 通常的解决办法是escape()对发送的数据进行编码,然后在返回的responseText再使用unescape()进行解码。然而在javascript编程中通常不推荐escape()和unescape()。而推荐使用encodeURI()和decodeURI()。这里要正常运行,必须对发送的数据进行两次encodeURI()编码。 代码如下
[u]复制代码[/u] 代码如下:
    function createQueryString(){         var firstName =document.getElementById("firstName").value;         var birthday =document.getElementById("birthday").value;         var queryString = "firstName="+firstName +"&birthday="+birthday;         return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题     }
而且在返回数据responeText时再进行一次解码,代码如下
[u]复制代码[/u] 代码如下:
function handleStateChange(){             if(xmlHttp.readyState==4&&xmlHttp.status ==200){                 var responeDiv =document.getElementById(serverResponse);                 responeDiv.innerHTML = decodeURI(XMLHttp.responseText);//编码             }         }
这样POST模式下也能使用中文了。 [b]3.服务器返回xml[/b] XML是一种可扩展标记语言(Extensible Markup Language),它是一种可自定义标记的语言,用来克服html局限,按照实际功能来看,xml主要用于数据存储。 在ajax中,服务器如果返回XML,可通过异步对象的responseXML属性来获取,开发者可以利用DOM的作用方法进行处理。 假设服务器返回
[u]复制代码[/u] 代码如下:
<?xml version="1.0" encoding="gb2312"?> <list>     <caption>Member List</caption>     <member>         <name>isaac</name>         <class>W13</class>         <birth>Jun 24th</birth>         <constell>Cancer</constell>         <mobile>1118159</mobile>     </member>     <member>         <name>fresheggs</name>         <class>W610</class>         <birth>Nov 5th</birth>         <constell>Scorpio</constell>         <mobile>1038818</mobile>     </member>     <member>         <name>girlwing</name>         <class>W210</class>         <birth>Sep 16th</birth>         <constell>Virgo</constell>         <mobile>1307994</mobile>     </member>     <member>         <name>tastestory</name>         <class>W15</class>         <birth>Nov 29th</birth>         <constell>Sagittarius</constell>         <mobile>1095245</mobile>     </member>     <member>         <name>lovehate</name>         <class>W47</class>         <birth>Sep 5th</birth>         <constell>Virgo</constell>         <mobile>6098017</mobile>     </member>     <member>         <name>slepox</name>         <class>W19</class>         <birth>Nov 18th</birth>         <constell>Scorpio</constell>         <mobile>0658635</mobile>     </member>     <member>         <name>smartlau</name>         <class>W19</class>         <birth>Dec 30th</birth>         <constell>Capricorn</constell>         <mobile>0006621</mobile>     </member>     <member>         <name>tuonene</name>         <class>W210</class>         <birth>Nov 26th</birth>         <constell>Sagittarius</constell>         <mobile>0091704</mobile>     </member>     <member>         <name>dovecho</name>         <class>W19</class>         <birth>Dec 9th</birth>         <constell>Sagittarius</constell>         <mobile>1892013</mobile>     </member>     <member>         <name>shanghen</name>         <class>W42</class>         <birth>May 24th</birth>         <constell>Gemini</constell>         <mobile>1544254</mobile>     </member>     <member>         <name>venessawj</name>         <class>W45</class>         <birth>Apr 1st</birth>         <constell>Aries</constell>         <mobile>1523753</mobile>     </member>     <member>         <name>lightyear</name>         <class>W311</class>         <birth>Mar 23th</birth>         <constell>Aries</constell>         <mobile>1002908</mobile>     </member> </list>
下面利用异步对象获取该XML,并将所有的项都罗列在表格中,初始化对象的方法与获取文本完全相同,代码如下:
[u]复制代码[/u] 代码如下:
    var xmlHttp;             function createXMLHttpRequest() {                 if (window.ActiveXObject)                     xmlHttp = new ActiveXObject("Mincrosoft,XMLHttp");                 else if (window.XMLHttpRequest)                     xmlHttp = new XMLHttpRequest();             }
当用户单击按钮时发生异步请求,并获取responseXML对象,代码如下
[u]复制代码[/u] 代码如下:
    function getXML(addressXML) {                 var sUrl = addressXML + "?timestamp=" + new Date();                 createXMLHttpRequest();                 xmlHttp.onRecorderStateChange = handleStateChange;                 xmlHttp.open("GET", url);                 xml.send(null);             }             function handleStateChange() {                 if (xmHttp, readyState == 4 && xmlHttp.status == 200)                 DrawTable(xmlHttp.responseXML); //responseXML获取到xml文档             }
其中DrawTable()为后勤处理XML的函数,将服务器返回的XML对象responseXML直接作为参数传递,HTML部分如下:
[u]复制代码[/u] 代码如下:
    <input type="button" value="获取XML" onclick="getXML('1-4.xml');"><br><br> <table class="datalist" summary="list of members in EE Studay" id="member">     <tr>         <th scope="col">Name</th>         <th scope="col">Class</th>         <th scope="col">Birthday</th>         <th scope="col">Constellation</th>         <th scope="col">Mobile</th>     </tr> </table>
当用户单击按钮时出发getXML(),并将xml地址1-4.xml作为参数传入 而函数DrawTable()的任务就是把XML中的数据拆分,并重新组装到表格"member"中,代码如下:可以看到处理XML的方法与DOM处理HTML完全相同
[u]复制代码[/u] 代码如下:
    function DrawTable(myXML) {                 //用DOM方法操作XML文档                 var oMembers = myXML.getElementsByTagName("member");                 var oMember = "",                     sName = "",                     sClass = "",                     sBirth = "",                     sConstell = "",                     sMobile = "";                 for (var i = 0; i < oMembers.length; i++) {                     oMember = oMembers[i];                     sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;                     sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;                     sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;                     sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;                     sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;                     //添加一行                     addTableRow(sName, sClass, sBirth, sConstell, sMobile);                 }             }
其中addTableRow()函数将拆分出来的每一组XML数据组装成表格<table>的一行,添加到页面中。代码如下:
[u]复制代码[/u] 代码如下:
    function addTableRow(sName, sClass, sBirth, sConstell, sMobile) {                 //表格添加一行的相关操作                 var oTable = document.getElementById("member");                 var oTr = oTable.insertRow(oTable.rows.length);                 var aText = new Array();                 aText[0] = document.createTextNode(sName);                 aText[1] = document.createTextNode(sClass);                 aText[2] = document.createTextNode(sBirth);                 aText[3] = document.createTextNode(sConstell);                 aText[4] = document.createTextNode(sMobile);                 for (var i = 0; i < aText.length; i++) {                     var oTd = oTr.insertCell(i);                     oTd.appendChild(aText[i]);                 }             }
网站中实际返回xml的工作通常是由asp.net jsp php等服务器脚本动态生成的,换句话说,xmlHttp.open()中的URL地址仍然.aspx等动态页面的后缀,它们返回的XML是用户请求生成的。 [b]4.处理多个异步请求[/b] 而实际页面中往往不止一个异步请求,比如在一个表单中,很多单元格都需要发生异步请求来验证,再加上网速的影响,第一个异步请求尚未完成,很可能就已经被第2个请求覆盖。 页面内容不做多介绍,我们发现,发送的第一个请求没有响应,因为它被第二个请求覆盖了。 通常解决的办法是将xmlHttp对象作为局部变量来处理,并且在收到服务器返回值后手动将其删除。如下所示:
[u]复制代码[/u] 代码如下:
        function getData(oServer, oText, oSpan) {                 var xmlHttp; //处理为局部变量                 if (window.ActiveXObject)                     xmlHttp = new ActiveXObject("Microsoft.XMLHttp");                 else if (window.XMLHttpRequest)                     xmlHttp = new XMLHttpRequest();                 var queryString = oServer + "?";                 queryString += createQueryString(oText) + "×tamp=" + new Date().getTime();                 xmlHttp.onreadystatechange = function() {                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {                         var responseSpan = document.getElementById(oSpan);                         responseSpan.innerHTML = xmlHttp.responseText;                         delete xmlHttp; //收到返回结构后手动删除                         xmlHttp = null;                     }                 }                 xmlHttp.open("GET", queryString);                 xmlHttp.send(null);             }
以上就是本文的全部内容了,虽然有点长,但是还是希望小伙伴们能够好好的读一读,这对于学好ajax非常重要,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部