分享AjAx小方面的知识点

注意：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.对搜索引擎支持较弱