一、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