注意:AjAx不是一门新的语言,它是JS、XML、JSON等多种网络技术的一种编程模型
AjAx使用GET请求流程
//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.监听服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);//将接收到的服务器数据显示到控制台中
}
};
//2.打开链接
xhr.open("GET","请求地址",是否异步:默认为异步true);
//4.发送请求
xhr.send(null);
AjAx使用POST请求
........................................................没加请求头报的错误.................................................
所以整个的POST请求的书写流程
//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.监听服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);//将接收到的服务器数据显示到控制台中
}
};
//2.打开链接
xhr.open("请求方式","请求地址",是否异步:默认为异步true);
// 注意的地方,和GET请求不同,POST请求需要设置请求头
//3.5 请求头(POST请求时设置)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 注意:与GET不同,它是将参数写在send中
//4.发送请求
xhr.send(传入的参数);
使用AjAx的优点:
1.页面无需刷新,非常好的用户体验。
2.使用异步的方式与服务端通信,不需要中断。
3.可以把以前的服务器的负担转嫁给客户端,减轻服务端和宽带的负担,最大程度上减轻冗余请求。
4.不需要下载插件和小程序
AjAx也有缺点:
1.干掉了Back和history功能,破坏了浏览器的机制
2.安全问题也对IT企业造成了新的安全威胁
3.对搜索引擎支持较弱