104 使用Ajax请求纯文本

1、使用Ajax步骤

创建AJAX对象

ie5、ie6使⽤var oAjax=new ActiveXObject("Microsoft.XMLHTTP")创建
现代浏览器使⽤var oAjax=new XMLHttpRequest()创建(⼀般使⽤这种即可)

连接服务器

oAjax.open('GET', url, true);三个参数分别是请求的类型、⽂件在服务器上的位置、异步(true)或者同步(false)

发送请求

oAjax.send();

接收数据

  • onreadystatechange事件
  • onload事件

readyState属性:请求状态

  • 0 (未初始化)还没有调⽤open()⽅法
  • 1 (载⼊)已调⽤send()⽅法,正在发送请求
  • 2 (载⼊完成)send()⽅法完成,已收到全部响应内容
  • 3 (解析)正在解析响应内容
  • 4 (完成)响应内容解析完成,可以在客户端调⽤了

status属性:请求结果

  • 200: “OK”
  • 404: 未找到⻚⾯
  • 503:服务器暂时不可用

在这里插入图片描述
请求成功返回内容responseText

2、使用Ajax请求纯文本

准备:新建一个文件sample.txt,使用Ajax来读取其中的数据。
在这里插入图片描述
新建页面ajax1.html。
在这里插入图片描述
使用Ajax请求文本数据。
在这里插入图片描述
结果如下:
在这里插入图片描述
将上述第4步接收数据的方式改成:onreadystatechange
在这里插入图片描述
结果如下:
在这里插入图片描述

3、onload和onreadystatechange的区别

onload能检听到4的readyState状态码,但监听不到2,3的readyState状态码,所以进入onload中一定是4,故上述示例中只输出1次。
在这里插入图片描述
在这里插入图片描述
onreadystatechange能监听到2,3,4的readyState状态码。
在这里插入图片描述
在这里插入图片描述
从结果来看,readyState状态码为3,4的时候都输出了数据。

4、将读取文本显示在页面上。

在这里插入图片描述
在这里插入图片描述
或者:
在这里插入图片描述
结果如下:
在这里插入图片描述


版权声明:本文为weixin_47197906原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。