前端学习系列——（一）AJAX

一、AJAX是什么？

AJAX（读法：阿贾克斯，我之前还真不知道）是一种异步请求数据的技术，因为谷歌大佬才广为人知，其实IE早在这之前几年就已经实现了这个特性。这个技术的诞生，使得用户体验和程序性能得到了非常大的改善。

二、AJAX的使用

1. 创建AJAX核心XMLHttpRequest对象

var xhr;
if(window.XMLHttpRequest) {
    //兼容IE7+ firefox chorme opera safari
    xhr = new XMLHttpRequest()
} else {
    //兼容IE5、6
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.与服务器建立连接

xhr.open(method,url,async);

open方法参数要牢记：

method：请求的类型，比如常用的'GET', 'POST'，'PUT','DELETE'等

url：文件在服务器上的位置（路径）

async：是否异步发送请求的布尔值，true（异步），false（同步）

3.向服务器发送请求

xhr.send()

send()方法接受一个字符串参数，即要作为请求主题发送的数据，即使不需要发送该数据，也必须传入null，保证兼容。

PS：post请求一定要设置请求头的内容，例如

xhr.open('POST','ajax.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("fname=suifeng&lname=nifeng");

4.服务器响应处理

responseText：获得字符串形式的响应数据（DOMString）

responseXML：获得XML形式的响应数据（document）

1）同步处理

直接在send后面处理返回来的数据

xhr.open('GET','ajax.txt',false);
xhr.send(null);
document.getElementById("id").innerHTML = xhr.responseText;

2）异步处理

xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200){
        document.getElementById("id").innerHTML = xhr.responseText;
    }
};

三、xhr总共有五种请求状态（readyState）

0：请求未初始化，尚未调用open（）方法

1：服务器连接已建立，已调用open（），尚未调用send（）

2：请求已接收，已调用send（），尚未收到响应

3：请求处理中，已经接收部分响应数据

4：请求已完成，且响应已就绪。数据全部接收，可以使用

四、HTTP常用响应状态码（status）

200：“ok”

301：（永久重定向）

302：（临时重定向）

304：（未修改）服务器资源未修改

403：（禁止）服务器拒绝请求

404：（未找到）服务器找不到请求的资源

500：（服务器内部错误）服务器遇到错误，无法完成请求

503：（服务不可达）服务器维护或者过载，无法发完成请求

504：（网关超时）服务器作为网关或代理，但没有及时从上游服务器收到请求

详细HTTP状态码可查阅另一篇博文https://blog.csdn.net/sinat_36521655/article/details/79562358

前端学习系列——（一）AJAX

猜你喜欢