AJAX全称Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。
Web运作的原理就是,一次HTTP请求对应一个页面。
如果要让用户留在当前页面中,同时又要发出新的HTTP请求,那就可以使用js来发送请求,接收到数据之后再用js更新页面,这样用户就可以停留在当前页面,而数据却可以得到更新。
用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。
AJAX主要依靠的是XMLHttpRequest对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
window.onload=function () {
function success(text) {
var p = document.getElementById('txt');
p.innerText = text;
}
function fail(code) {
var p = document.getElementById('txt');
p.innerText = 'Error code: ' + code;
}
// 新建XMLHttpRequest对象
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
//兼容ie
request = new ActiveXObject('Microsoft.XMLHTTP');
}
//设置回调函数,在回调函数中使用request.readyState === 4来判断请求是否完成
//如果已完成,再根据status === 200判断是否是一个成功的响应
request.onreadystatechange = function () {
// 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过request.responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', 'http://localhost:63342/WEBcode/test/my.xml');
//open方法有3个参数,第一个参数指定是get还是post第二个参数指定URL地址(与当前地址要完全相同),第三个参数指定是否使用异步默认true
request.send();
//发送请求
alert('请求已发送,请等待响应...');
}
</script>
</head>
<body>
<div >
<p id="txt" style="color: red"></p>
</div>
</body>
</html>
my.xml
<?xml version="1.0" encoding="gb2312"?>
GET请求和POST请求的区别:
1.效率
GET的意思是『得』,从服务器获取数据(也可以上传数据,参数就是),效率较高
POST的意思是『给』,但可以向服务器发送数据和下载数据,效率不如GET
2.缓存
GET 请求能够被缓存,默认的请求方式也是有缓存的
POST请求默认不会缓存
缓存是针对URL来进行缓存的,GET请求由于其参数是直接加在URL上-的,一种参数组合就有一种URL的缓存,可以根据参数来进行一一对应,重复请求是幂等的(不论请求多少次,结果都一样);
而POST请求的URL没有参数,每次请求的URL都相同,数据体(HTTPBody)可能不同,无法一一对应,所以缓存没有意义
3.安全性
GET的所有参数全部包装在URL中,明文显示,且服务器的访问日志会记录,非常不安全
POST的URL中只有资源路径,不包含参数,参数封装在二进制的数据体中,服务器也不会记录参数,相对安全。所有涉及用户隐私的数据都要用POST传输
4.数据量
HTTP协议中均没有对GET和POST请求的数据大小进行限制,但是实际应用中它们通常受限于软硬件平台的设计和性能。
GET:不同的浏览器和服务器不同,一般限制在2~8K之间,更加常见的是1k以内
POST方法提交的数据比较大,大小靠服务器的设定值限制,PHP默认是2M(具体的话大家以后看后端给的开发文档就行了)