创建发送异步通讯对象Ajax请求、数据回调及属性状态说明

简单了解了一下 Ajax 技术,及 Ajax 的应用,顺便做个笔记。

创建发送异步通讯对象Ajax请求、数据回调及属性状态说明 经验总结 第1张

什么是 ajax ?

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

简单地说,AJAX是一种用异请求数据的技术,发送出请求以后,不需要刷新页面就可以更新当前浏览器内的数据或内容。

  1. 异步 JavaScript 和 XML

  2. 是指一种创建交互式网页应用的网页开发技术

  3. 异步请求数据的技术

HTML部分: #resText 接收返回的数据, #statusText 接收返回的状态

<button onclick="send()">发送Ajax</button>
<h3 id="resText"></h3>
<h3 id="statusText"></h3>

创建异步通讯对象:

XMLHttpRequest 是 JavaScript 内部对象之一,该对象用于在后台与服务器交换数据,是实现 AJAX 技术的基础。

Chrome:new XMLHttpRequest();

IE5.5/IE6:new ActiveXObject("Microsoft.XMLHTTP");

兼容 Chrome 和 IE 浏览器可以这样写:

//1.创建异步通讯对象
var xmlHttpRequest = null;
if (window.XMLHttpRequest) {
    xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {//ie5.5,6
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    alert("你的浏览器太Low了,不支持HttpRequest对象!")
}

打开操作,发送请求:

如果对象不为 NULL ,发送请求 xmlHttpRequest.send() ,当发送 GET 请求时为 true ,因为直接在地址传值,当发送 POST 请求时,应该是需要传递的值。

if(xmlHttpRequest!=null){
    //2.打开操作
    //参数1:请求的方式 get,post
    //参数2:请求的地址 index.php ajax.php
    //参数3:是否异步请求 true:异步 false:同步
    xmlHttpRequest.open("GET","get.php",true);
    //3.设置回调监听函数
    xmlHttpRequest.onreadystatechange = callback;
    //4.发送请求
    // 参数:当发送GET请求时:true
    //       当发送POST请求时:需要传递的值
    xmlHttpRequest.send(true);
}

回调函数:

// 5.接收回调
console.log(xmlHttpRequest.responseText); //字符串类型

需要介绍一下两个属性:

readyStatus :

XMLHttpRequest 对象的状态:

0:未初始化。对象已创建,未调用 open ;

1:open 方法成功调用,但 Sendf 方法未调用;

2:send 方法已经调用,尚未开始接受数据;

3:正在接受数据。Http 响应头信息已经接受,但尚未接收完成;

4:完成,即响应数据接受完成。

我们在回调的时候,如果直接 console 接收的数据,打印出多条数据。

创建发送异步通讯对象Ajax请求、数据回调及属性状态说明 经验总结 第2张

status :

服务器返回的 http 状态码。

200 表示“成功”;

404 表示“未找到”;

500 表示“服务器内部错误”等。

所以要判断异步请求成功并且服务器返回状态正常,再进行数据打印。所以应该这样写 👇

优化后的函数回调:

//回调函数
function callback() {
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ //readyState:4 回发数据接收成功
        // 5.接收回调
        console.log(xmlHttpRequest.responseText); //字符串类型
        document.getElementById("resText").innerHTML = xmlHttpRequest.responseText;
        document.getElementById("statusText").innerHTML = xmlHttpRequest.statusText;
    }
}

其他属性说明:

Onreadystatechange :请求状态改变的事件触发器(readyState 变化时会调用这个属性上注册的 JavaScript 函数)。

responseText :服务器响应的文本内容。

responseXML :服务器响应的XML内容对应的DOM对象。

statusText :服务器返回状态的文本信息。

推荐阅读:

HTML引入文件的绝对路径、相对路径、根目录

Z-Blog后台无法安装、更新应用的解决方法

html CSS引用字体文件

css的cursor属性 鼠标指针样式

Jetbrains系列激活补丁JetbrainsCrack-2.8更新

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)