快速学习AJAX之二

======================================================
注：本文源代码点此下载
======================================================

上节课说到了一个简单的例子,并且简单的分析了一下如何创建一个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>21sex>

chinesename>哈哈chinesename>

student>

student name="wdz">

sex>22sex>

chinesename>呵呵chinesename>

student>

student name="adz">

sex>22sex>

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 "

";

}

document.getelementbyid("getxml").innerhtml = getxml;

}

}

xmlhttp.send();

}

好了,修改完了,修改一下 html代码

body>

input type="button" value="单击我就显示xml文件中的chinesename?" onclick="getajax();" />

div id="getxml">

div>

body>

ok结束了

到这里,ajax基础的知识我们已经了解的差不多了。谢谢大家支持哦!

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/