(以下内容仅代表个人理解呦,望大佬指正,嘿嘿....)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 什么是AJAX?
// AJAX即Asynchronous Javascript And XML(异步Javascript和XML),
// 是一种浏览器和服务器之间异步交互的技术(浏览器和服务器之间
// 异步交互可理解为:客户端无须更新页面即可获取数据信息)
// 为什么需要异步?
// 同步:同步发送请求后,客户端需要等待服务端的响应,期间不能做任何操作,
// 在服务端处于处理请求阶段客户端需要一直等待,当数据正常获取后一次性全部刷新,
// 用户体验极差。(异步应运而生)
// 异步:异步发送请求后,服务端在接收到请求体并完成处理后
// 将向客户端发送数据,客户端将会针对局部进行页面刷新
// 原生AJAX
// 两种请求方式:GET和POST,两种不同的原生写法(大同小异)
// 两种请求方式的区别:
// 1.GET请求的参数在URL中显示,数据通过URL或Cookie传输,POST请求数据主要通过body传输
// 2.GET请求发送的数据长度有限制,POST请求发送的数据量大
// 3.GET请求一般是为了获取数据,POST请求则是上传和修改数据
// 4.POST请求比GET请求更安全,数据在地址栏不可见
// 原生AJAX的GET请求:
// 1.创建AJAX对象
function loadXMLDoc(){
// 触发点击事件调用此函数
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2.监听异步回调,即readyState状态的变化
// readyState五个状态:
// 0:请求未初始化,即还未调用open
// 1:服务器已建立连接,即已调用open
// 2:请求已接受,即服务器接收到了请求头信息
// 3:请求处理中,即客户端接受到了响应体
// 4:请求已完成且响应已就绪,即响应已完成
// 下面function中onreadystatechange、readyState和status都是XHR对象的属性,
// 每当readyStata属性发生改变时就会调用onreadyStatechang存储的函数,
// readyState有5个状态,因此一次AJAX请求会调用5次onreadystatechange存储的函数
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// status是HTTP的状态码,HTTP状态码又三位数字组成,首尾数字定义了状态码的类型:
// 1XX:信息类,表示已收到web浏览器的请求,正在进一步处理中
// 2XX:成功, 表示用户请求被正确接受、理解和处理,例如:200 'OK'
// 3XX:重定向,表示请求没有成功,客户需要采取进一步的措施
// 4XX:客户端错误,表示客户端提交的请求有错误
// 5XX:服务端错误,表示服务端不能完成对请求的处理
// 必须保证readyState的状态码为4,表示请求完成,并且HTTP的状态码status是200,
// 表示接口请求成功
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
// responseText为相应数据,字符串类型
}
}
// 打开连接,异步:async = true,同步:async = false
xmlhttp.open('GET','AJAX/AJAX.txt ? k1 = v1 & k2 = v2',true);
// 发送请求
xmlhttp.send(null);
}
// 原生AJAX的POST请求:需要设置请求头,请求的信息写在xmlhttp.send()里面
function loadXMLDoc(){
//创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//监听异步回调
xmlhttp.onreadystatechange(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
}
// 打开连接
xmlhttp.open('POST','AJAX/AJAX.txt',true);
// 设置请求头,包括请求头信息的数据类型和编码方式,
// 即下面的Content-Type和application/x-www-form-urlencoded
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送请求体,需编码后提交
xmlhttp.send('k1 = v1 & k2 = v2');
}
</script>
</head>
<body>
<h1>AJAX</h1>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
原生AJAX,GET和POST两种请求方式
猜你喜欢
转载自blog.csdn.net/The_Road_of_Java/article/details/119737054
今日推荐
周排行