ajax 详解（GET，POST方式传输以其封装）
1，什么是ajax
2，为什么ajax这么火 特点
3，Ajax的工作原理
4，Ajax的工作流程
5，请求服务器调用方式GET，POST
6，同源策略，数据传输方式及接口设计原则
7，ajax操作.txt 格式（详细）
8，ajax操作php（GET方式和POST方式）以及封装
1，什么是ajax
Ajax 的全称是 Asynchronous JavaScript and XML，即异步 JavaScript+XML。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它并不是新的编程 语言，而是几种原有技术的结合体。它由以下几种技术组合而成，包括：
HTML/XHTML——主要的内容表示语言。
CSS——为 XHTML 提供文本格式定义。
DOM——对已载入的页面进行动态更新。
XML——数据交换格式。
XSLT——将 XML 转换为 XHTML（用 CSS 修饰样式）。
XMLHttp——用 XMLHttpRequest 来和服务器进行异步通信，是主要的通信代理。
Ajax和XMLHttpRequest 两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。当需要异步与服务器交换数据时，需要 XMLHttpRequest 对象来异步交换。
2，为什么ajax这么火 特点
不更新整个网站的情况下，实现局部更新
3，ajax工作原理
View层（数据的展示，页面的渲染）-- 中间层（ajax引擎）— 服务器（后台）
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
4，ajax的工作流程
举个例子，以追求一个女孩的过程为例，虽然从来没有成功过，但也经历过
Ajax核心：
XMLHTTPRequest对象(以下都是它的对象或方法) //喜欢一个女孩
常用的方法（ 准备阶段 ）：
open（‘method’,’url’,async）; //规定请求的类型、URL 以及是否异步处理请求。 //想要更近一步，联系她
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(); //发送请求, 将请求发送到服务器。 //给她写了一封信
null:
兼容性问题
安全性问题---防止传参
常用的属性（传输阶段）；
向服务器请求状态的阶段（走进一个女孩的心里）
onreadystatechange //请求改变状态的触发器 //希望改变我们之间的关系
readyState //请求状态 //女孩考虑了一下
0 - (未初始化)还没有调用 send()方法
1 - (载入)已调用 send()方法，正在发送请求
2 - (载入完成)send()方法执行完成
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用
服务器的响应阶段
status 服务器的http请求响应 的状态码 //告知你答案,可以或着不可以等等其他说辞
201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问
200请求成功
300-307表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。
304（未修改） 自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。
400-417表示请求可能出错，会妨碍服务器的处理。
404（未找到） 服务器找不到请求的网页。
413（请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
500至505表示的意思是：服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
500（服务器内部错误） 服务器遇到错误，无法完成请求。
503（服务不可用） 目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。
responseText——从服务器进程返回数据的字符串形式。
responseXML——从服务器进程返回的 DOM 兼容的文档数据对象。
（相当于如果成功之后我可以干什么）
5，请求服务器调用方式GET，POST
1，数据量
早期：GET少，POST多，就是因为IE限制的url长度（4084k），把参数锥到最后
现在：没有限制 ；
浏览器和服务器是通过消息（message）传递的；消息是由两部分组成：
头（header）=》包含的信息少：url头消息
身子（content）=》post数据 整体数据
2，安全性
6，同源策略，数据传输方式及接口设计原则
ajax只能访问同源接口
同源策略：域名（主机名，IP地址）端口 协议相同
不同的客户端脚本（js，as…）在没有明确授权的情况下 是不能来读取对方资源的
同源策略的限制范围：
1，本地缓存（cookie，localstroage，indexDB）
2，不能互相访问dom节点
3，ajax不能向外部请求发送
同源判断：url协议，主机名 ，端口三者相同，才能同源
7，ajax操作.txt 格式
.txt文件
hello
js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax操作.txt</title>
<script type="text/javascript">
window.onload = function() {
//1,获取a节点,并添加onclick函数
document.getElementsByTagName("a")[0].onclick = function(ev) {
//3,创建一个xhr对象
var request = new XMLHttpRequest;
//4,准备发送数据:url
var url = this.href;//"demo.txt"
var method = "GET"
//5,调用xhr对象的open方法
request.open(method, url,true);
//6,调用xhr对象的send方法
request.send(null);
//在前六步完成之后已经有了响应
//7,为xhr对象添加onreadystatechange响应函数
request.onreadystatechange = function() {
//8,判断响应是否完成,xhr对象的readystate属性值为4的时候
if (request.readyState == 4) {
//9,判断响应是否可用,xhr对象status属性值为200
if (request.status == 200 || request.status == 304) {
//10,打印响应结果:responseText
alert(request.responseText)
}
}
}
//2，取消默认行为
return false;
// ev.preventDefault();
}
}
</script>
</head>
<body>
<p>不跳转的情况下获取数据</p>
<a href="demo.txt">接受demo1.txt1</a>
</body>
</html>
8，ajax操作php（GET方式和POST方式）以及封装
<?php
header('Content-type:text/html;charset=utf-8');
// $a=$_GET['user'];
// $b=$_GET['pwd'];
$a=$_POST['user'];
$b=$_POST['pwd'];
echo "我是php页面！接受到的user为{$a},接收到的pwd为{$b}";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax操作.txt</title>
<script type="text/javascript">
// window.onload = function() {
// var xhr = new XMLHttpRequest();
// xhr.open('get', 'demo.php?user=1&pwd=2', true);
// xhr.send(null);
// xhr.onreadystatechange = function() {
// if (xhr.readyState == 4) {
// if (xhr.status == 200) {
// console.log(xhr.responseText)
// }
// }
// }
// }
// //POST方式
// window.onload = function() {
// var xhr = new XMLHttpRequest();
// xhr.open('POST', 'demo.php', true);
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");//设置头部信息
// xhr.send("user=deo");
// xhr.onreadystatechange = function() {
// if (xhr.readyState == 4) {
// if (xhr.status == 200) {
// console.log(xhr.responseText)
// }
// }
// }
// }
//封装ajax
window.onload = function() {
Ajax({
"type": "GET",
"url": "demo.php",
"data": {
"user": "weiucnbin",
"pwd": "532"
},
"success":function(msg){
console.log("這是成功後獲取的数据"+msg)
},
"error":function(msg){
console.log("这是失败后获取的数据"+msg)
}
});
function Ajax(obj) {
obj = obj || {};
obj.type = obj.type || "GET"
obj.url = obj.url || '';
obj.data = obj.data || null;
obj.async = obj.async || true;
obj.success=obj.success||function () {}
obj.error=obj.error||function () { }
//数据data字符串，以&隔开，即后缀
var param = [];
for (var key in obj.data) {
param.push(key + '=' + obj.data[key]);
}
var sendData = param.join("&");
var xhr = new XMLHttpRequest();
//当为GET/POST方式发送请求
if (obj.type.toUpperCase() === "GET") {
xhr.open(obj.type, obj.url + "?" + sendData, obj.async);
xhr.send();
} else {
xhr.open(obj.type, obj.url, obj.async);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); //设置头部信息
xhr.send(sendData);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
obj.success&&obj.success(xhr.responseText)
}else{
obj.error&&obj.error(xhr.responseText)
}
}
}
}
}
/*
//调用方式
Ajax({
type:访问方式GET/POST
url:访问地址
data：向服务器传输的json{}，即提交的后缀=》参数
success：请求成功的回调函数
error：请求失败的回调函数
})
*/
</script>
</head>
<body>
<form action="" method="get">
<input type="text" name='user' placeholder='用户名'><br>
<input type="password" name='pwd' placeholder='密码'><br>
<input type="submit" value="提交">
</form>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！