异步更新，局部更新，AJAX概述
应用背景概括：
传统的web交互是用户触发一个http请求服务器，然后服务器收到请求之后，做出响应并返回到用户，用户界面会得到一个新的页面。
每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，从而导致了用户界面的响应慢得多。
AJAX 的出现,刚好解决了传统方法的缺陷，AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。比如说在任意百度搜索结果界面，其右侧界面部分会有一个当前的实时新闻框，该新闻窗口就可以在不使用整个页面刷新的基础上实现新闻窗口的更新。
主角：前后端交互的重要工具AJAX
ajax 全名 async javascript and XML(异步JavaScript和XML)
- 是前后台交互的能⼒ 也就是客户端给服务端发送消息的⼯具，以及接受响应的⼯具
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX分为同步（async = false）和异步（async = true），默认异步执⾏机制的功能
-
什么是同步请求？(false)
-同步请求是指当前发出请求后，浏览器什么都不能做，
必须得等到请求完成返回数据之后，才会执行后续的代码，
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态 -
什么是异步请求？(默认:true)
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
AJAX 的优势
不需要插件的⽀持，原⽣ js 就可以使⽤
⽤户体验好（不需要刷新⻚⾯就可以更新数据）
减轻服务端和带宽的负担
具体的流程为：
首先通过PHP页面将数据库中的数据取出
->取出后转成json格式的字符串，后利用ajax把字符串返还给前台
->再利用json.parse
->解析通过循环添加到页面上
->那么反之，前端的数据可以利用ajax提交到后台
->但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
->最后再由PHP将数据插入到数据库中。
AJAX 的使用
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
在 js 中有内置的构造函数来创建 ajax 对象，随后我们就使⽤ ajax 对象的⽅法去发送请求和接受响应。Ajax的一个最大的特点无刷新更新页面,这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
常见的方法：
常见的属性：
//从创建对象，到配置链接服务器信息再到发送请求
//1.创建对象
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
//2，配置链接服务器信息
//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './ajax_test.php')
// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()
//3,发送请求
//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './ajax_test.php')
// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()
后面还有一些状态码信息等也很重要，篇幅过长，暂时不做更新描述了。
最后一个完整的Ajax应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步更新，局部更新，AJAX概述</title>
<script>
/*
type 代表 请求方式
url 代表 请求url路径
data 代表 发送数据
success 代表 下载数据成功以后执行的函数
error 代表 下载数据失败以后执行的函数
*/
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
//设置提交数据格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error：" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
/*
当我们下载完数据以后需要对数据的处理方式不一样
【注】$ajax，我们需要按照传参的顺序，依次传入我们的参数。
*/
aBtns[0].onclick = function(){
$ajax({
url: "js/ajax-get.php",
data: {
username: "张三",
age: 18,
password: "zhangsan911"
},
success: function(result){
alert("GET请求到的数据：" + result);
},
error: function(msg){
alert("GET请求数据错误：" + msg);
}
})
}
aBtns[1].onclick = function(){
$ajax({
type: "post",
url: "js/ajax-post.php",
data: {
username: "zhaosi",
age: 18,
password: "zhaosi911"
},
success: function(result){
alert("POST请求到的数据：" + result);
},
error: function(msg){
alert("POST请求数据错误：" + msg);
}
})
}
}
</script>
</head>
<body>
<button>GET请求</button>
<button>POST请求</button>
</body>
</html>
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
