前端学习系列——(一)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

猜你喜欢

转载自blog.csdn.net/sinat_36521655/article/details/79986394