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

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

什么是 ajax ？

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

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

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

异步请求数据的技术

HTML部分： #resText 接收返回的数据， #statusText 接收返回的状态发送Ajax

创建异步通讯对象：

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 接收的数据，打印出多条数据。

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 ：服务器返回状态的文本信息。