AJAX第一个例子hello word

最新推荐文章于 2024-07-09 22:50:39 发布

宸路

最新推荐文章于 2024-07-09 22:50:39 发布

阅读量539

点赞数

分类专栏： AJAX学习文章标签： ajax xmlhttprequest function javascript mozilla 浏览器

AJAX学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

来自：http://hi.baidu.com/%CD%C7%B7%CF%C9%B5%D3%E3/blog/index/4

通过对Ajax的概述，大概都知道Ajax是个什么东西了，也了解了它的应用，接下来就开始学习Ajax

通过这个例子，我们可以了解Ajax的运行流程是什么样子的，还有工作原理

    使用Ajax技术实现异步通讯，一般的请求方式如下：

    1.生成XmlHttpRequest对象，为适应不同浏览器，通常我门会创建多浏览器的XmlHttpRequest对象

2.如果生成XmlHttpRequest对象成功了，那么就可以使用OPEN进行异步资源请求

3.在使用OPEN请求之前，我们还需要实现XmlHttpRequest对象的一个方法即onreadystatechange()

这个函数的作用是readyState改变的时候会自动调onreadystatechange()，这就实现了监控功能

4.实现了onreadystatechange()方法后就可以使用XmlHttpRequest的readyState属性查看当前请求

的状态（有5种可能的值：0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成）

下面通过简单的代码例子去理解这上面的理论知识

CODE：

<html> <mce:script language="javascript"></mce:script> </html>

在同一个目录下建立一个文件名为TextFile.txt，内容为：我是经典的Hello Word^_^!

但是注意到一个问题，在显示文本内容的不支持中文，中文部分也就是"我是经典的"被

    忽略掉了，只显示"Hello Word^_^!"

    说明：上面代码学过JavaScript脚本的同鞋都能看得懂，而且大都有注释了，我就简单说一下

xmlhttp.onreadystatechange=function()这种写法应该懂的吧？和先定义好一个函数

之后，在xmlhttp.onreadystatechange=函数名调用的方式是一样的，解释关键的地方

xmlhttp.open("GET","TextFile.txt",true)这一句就是异步请求的关键，第1参数为请

求方式，第2参数为请求资源，第3个参数只能true或者false(true=异步，false=同步)，

          open还支持4个和5个参数，具体自己查阅资料

    留心的同鞋可能会注意到一个问题，那就是当请求的资源没有找到呢？那又会出现什么情况了

    大家自己去动手测试结果。基于这样子的请求，我们还需要进一步处理判断是否返回错误信息

    对onreadystatechange方法稍做修改即可完善监控方法的功能

xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { if(xmlhttp.status==2000)//多了这个判断 { alert("异步请求资源成功，内容为："+xmlhttp.responseText); } else//其他的状态码(status)都是没有成功完成目的的 { alert("由于某些原因请求没有完成") } } } xmlhttp.send(null); }

宸路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX第一个例子hello word

来自：http://hi.baidu.com/%CD%C7%B7%CF%C9%B5%D3%E3/blog/index/4 通过对Ajax的概述，大概都知道Ajax是个什么东西了，也了解了它的应用，接下来就开始学习Ajax通过这个例子，我们可以了解Ajax的运行流程是什么样子的，还有工作原理使用Ajax技术实现异步通讯，一般的请求方式如下：
复制链接

扫一扫