上节课说到了一个简单的例子,并且简单的分析了一下 如何创建一个XMLHttpRequest对象。
这节课,我们在详细的说明一下XMLHttpRequest对象
大家首先看一下上节课遇到的 xmlHttp.send(); 方法。 这个 send(string) 是可以带一个参数的 ,但是 ,必须 “POST”的模式下。我上面的截图中,应该写成 xmlHttp.send(null);
大家可以试一下,结果正确吗?
那么大家可能有一个问题?POST和GET都在什么情况下使用呢?
首先,我们知道 提交Form表单 有这两种方式,呵呵,那么我们就可以用提交表单的方式去理解 这两种方式啊。
GET:毫无疑问速度比POST快。并且可用的范围广。
POST:
以下的情况下,建议用POST
1》向服务器发送大量数据。
2》发送密码什么的。 为什么?安全性高。
继续咱们昨天的例子:我们昨天细心的园友可能发现一个问题,就是我们“单击显示时间” 假如浏览器没有关闭,重新打开,那么我们的到得时间总是一个时间,这是为什么呢?
因为 您可能得到的是缓存的结果。 解决这个现象也很简单,呵呵,我想玩过ASP.NET的程序员,应该有个习惯解决这个问题。
好了,不卖关子了,大家可以在上面例子中的URL上面添加一个 参数
function getAjax() { xmlHttp.open("GET", "Ajax.ashx?i="+Math.random(),true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } } xmlHttp.send(); }
再试一下 有木有效果呢?结果还是相同的吗?
哦了,下面给大家写一个例子,这个例子,有兴趣的童鞋可以自己写个登陆出来,还有我因为是基于ASP.NET的原生态AJAX所以大家可能,所以我例子中的有些代码是基于ASP.NET的。
所以大家可能需要注意一下。
首先先修改一下,Ajax.ashx【这个一般处理程序的代码】
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; string name = context.Request["name"].ToString(); string sex = context.Request["sex"].ToString(); context.Response.Write(string.Format("大家好我是{0},我是{1}",name,sex)); }
好了,修改好了,下面是Ajax1.htm的页面代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var xmlHttp = false; //这个声明成什么都无所谓啦 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest();
} function getAjax() { xmlHttp.open("GET", "Ajax.ashx?name=KinDZ&sex=Man",true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById('getText').innerHTML = xmlHttp.responseText; } } xmlHttp.send(); } </script> </head> <body> <input type="button" value="单击我就显示我是谁?" onclick="getAjax();" /> <div id="getText"></div> </body> </html>
好了,该做的准备我们已经做好了 ,这回大家可以看到了吧
xmlHttp.open("GET", "Ajax.ashx?name=KinDZ&sex=Man",true); 这句明白了吗?呵呵,GET方法是可以带参数的。
下面给大家一个 上面例子的POST版本
function getAjax() { xmlHttp.open("POST", "Ajax.ashx", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById('getText').innerHTML = xmlHttp.responseText; } } xmlHttp.send("name=KingDZ&sex=Man"); }
记住上面的
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 这个是必须要设置的, setRequestHeader() 来添加 HTTP 头。
下面就是设定----以后我们慢慢讲解。
setRequestHeader(头名称,值);
好了,这节课的最后我们再来说明一下 xmlHttp.open("POST", "Ajax.ashx", true); 这里面的这个 “true”;
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
注:async:true(异步)或 false(同步)
当使用 async=true 时,我们就可以使用 onreadystatechange 事件中的就绪状态时来执行的函数
就是我们之前用到的例子。
当您使用 async=false 时,就不要使用 onreadystatechange 函数
把我们执行的代码放到 send() 语句后面即可
呵呵,大家可以 具体在找一下这个资料。不过,对于新手来说,记住设置成 true 使用AJAX即可。
function getAjax() { xmlHttp.open("POST", "Ajax.ashx", false); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("name=KingDZ&sex=Man"); document.getElementById('getText').innerHTML = xmlHttp.responseText; }
好了,我们下面说一下 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
常用:
responseText:
获得字符串形式的响应数据。
responseXML:
获得 XML 形式的响应数据。
不常用:【就不细讲了】
responseBody :
获得 unsigned byte数组形式的响应数据
responseStream
获得IStream 形式的响应数据。
我们上面一直使用的是 responseText 。
下面我们稍微说一下 responseXML ,以后用到在慢慢细讲。
首先我们需要准备一个XML文件 Ajax1.xml
<?xml version="1.0" encoding="utf-8" ?> <Ajaxstudent> <student name="KindDZ"> <sex>21</sex> <chinesename>哈哈</chinesename> </student> <student name="WDZ"> <sex>22</sex> <chinesename>呵呵</chinesename> </student> <student name="ADZ"> <sex>22</sex> <chinesename>嘻嘻</chinesename> </student> </Ajaxstudent>好了,下面修改一下
function getAjax() { xmlHttp.open("GET", "Ajax1.xml", true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { xmlDoc = xmlHttp.responseXML; //读取 Ajax1.xml文件 getxml = ""; chinesename = xmlDoc.getElementsByTagName("chinesename"); //这个是我们XML文件中的某个节点。 for (i = 0; i < chinesename.length; i++) { getxml = getxml + chinesename[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("getXml").innerHTML = getxml; } } xmlHttp.send(); }
好了,修改完了,修改一下 HTML代码
<body> <input type="button" value="单击我就显示XML文件中的chinesename?" onclick="getAjax();" /> <div id="getXml"> </div> </body>
OK结束了
到这里,AJAX基础的知识我们已经了解的差不多了。谢谢大家支持哦!