A.名词解释
1.Synchronize （同步）
在一个任务进行时，不能开启其他任务
同步访问：浏览器在向服务器发送请求时只能等待服务器响应，不能做其他事情。
ex：
a. 地址栏访问 页面（www.baidu.com）
b. a标记的默认跳转
c.submit按钮的表单提交
2.Asynchronous（异步）
在一个任务进行中时，可以开启其它的任务
异步访问：浏览器在向服务器发送请求时，不耽误用户在网页上做其他的操作。
ex:
a.用户名的重复验证
b.搜索提示
c.聊天室
d.股票走势
B. AJAX（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML））
1.本质
使用js提供的异步对象（XMLHttpRequest）（xhr），异步的向服务器发送请求，并接受相应数据（数据类型是Xml）
AJAX请求中，服务器响应回来的是部分数据而不是完整页面，并且可以以无刷新效果来更改页面的局部内容。
2.创建xhr对象
标准创建：
var xhr=new XMLHttpRequest()
IE8以下：
var xhr=new ActiveXObject("Microsoft.XMLHttp")(注意符号)
允许通过window.XMLHttpRequest来判断浏览器是否支持标准创建，如果浏览器不支持标准创建
那么window.XMLHttpRequest的值就是null
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObjext("Microsoft.XMLHttp");
}
3.XHR常用方法和属性（常用重点）
a. open（）
xhr.open("method","url",isAsyn) ;
1.method
string 类型
请求方式：get/post
2.url
string类型
请求地址
3.isAsyn
boolean类型
指定采用同步（false）还是异步（true）的方式发送请求
b.readyState 属性
作用：表示xhr对象的请求状态
值：0-4表示5个状态
0：请求尚未初始化
1：已经打开服务器的链接，正在发送请求中
2：请求完成
3.正在接受服务器端的响应
4.接收响应数据成功
（当readyState的值为4时，才表示所有响应都已经接收完毕）
c.status属性
作用：服务器的响应状态码
值：
记住一个值：200
当status的值是200时，表示服务器已经正确处理请求并给出响应
d.onreadystatechange事件
作用：当xhr的readyState属性值发生改变时要自动激发的操作
(在xhr对象的状态改变时，这个事件会一直监视它)
判断xhr的状态为4并且xhr的status的值为200时，就可以获取/响应数据
语法：
onreadystatechange=function(){
if（xhr.readyState==4&&xhr.status==200）{
//接收响应回来的值
var resText=xhr.responseText;
console.log(resText);
}
}
e. send()
作用：发送请求
语法：xhr.send(body)
body:请求主体
如果没有请求主体，body位置处为null（get），如果有请求主体，则
放请求主体数据到body位置(post)
发送异步请求的步骤：
a.创建xhr对象
b.创建请求
c.设置xhr的onreadystatechange(回调函数)
判断状态,并接收响应回来的数据
d.发送请求
f.
get
使用get提交方式，发送请求数据（带参数）
http://127.0.0.1/login.php?uname=value1&upwd=value2
function CreateXhr() {
var xhr= window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft XMLHttp")
return xhr
}
console.log(CreateXhr())
var i1=document.getElementById("i1")
i1.addEventListener("click",function () {
//创建xhr对象
var xhr=CreateXhr()
//创建请求
var value="xiaoming";
xhr.open("get",`demo01.php?uname=${value}`,true)
//设置回调函数
xhr.onreadystatechange=function () {
//判断readyState和status
if(xhr.readyState==4&&xhr.status==200){
//接收响应数据
var resText=xhr.responseText
console.log(resText)
}
}
//发送请求
xhr.send(null)
})post
使用ajax发送post请求
注意：
post请求将数据放在请求主体中
xhr.send(body)
ex: xhr.send("uname=value1");
在发送请求(send)之前需要手动修改请求头
xhr.setRequestHeader("Content-Type":"application/x-www-form-urlencoded");
function CreactXhr() {
var xhr=window.XMLHttpRequest? new XMLHttpRequest():ActiveXObject("Microsoft XMLHttp")
return xhr
}
function login() {
//创建xhr
var xhr=CreactXhr();
//创建请求
xhr.open("post","post.php",true)
//设置回调函数
xhr.onreadystatechange=function () {
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
d1.innerHTML=res;
}
}
//更改请求消息头(get方法没有)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
var uname=name1.value;
var upwd=pwd.value;
//请求主体（get方法没有请求主体）
var msg=`uname=${uname}&&upwd=${upwd}`;
xhr.send(msg)
}