Ajax编程

特点：局部刷新

优点：

• 页面无刷新，在页面内与服务器通信，减少用户等待的时间，增强了用户体验。
• 使用异步方式与服务器通信，响应速度快。
• 可以把一些原本服务器的工作转接到客服端，利用客服端闲置的能力来处理，减轻了服务器和宽带的负担，节约宽带租用成本。
• 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点

• 无法进行操作的后退，既不支持浏览器的页面后退。
• 对搜索引擎的1支持比较弱。
• 可能会影响程序中的异常处理机制。
• 安全问题。对象一些网站的攻击，如 CSRF,XXS,SQL注入等不能很好的防御。

实现原理

1、创建XMLHttpRequest对象
2、发出HTTP请求
3、接收服务器传回的数据
4、更新页面数据

原生

//1.创建XMLHttpReaquest对象
let xmlhttp=null;
//由于IE5,6兼容问题，所以：
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5 浏览器执行代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


//2.打开链接
//（参数1请求方式，参数2请求地址，参数3异步还是同步默认为true）
xmlhttp.open("get","./StudentInfo",true);
//3.发送请求
xmlhttp.send();
//默认没有参数
//xhr.send("phone=123&pwd=123"); 请求是post，而且想要传参，send方法才有参数
/*如果是post提交
xhr.open("POST","login.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;chars
et=UTF-8");
xhr.send("username=zhangsan&pwd=123");
*/
//4.通过事件监听并处理服务器返回的消息
//请求方式为异步时 onreadystatechange 监听服务器返回的消息
xmlhttp.onreadystatechange=function(){
 /*readyState 0 请求初始化还没有调用 send() 方法
 			  1 服务器连接已建立 已调用 send() 方法，正在发送请求
 			  2 请求已接收 send() 方法执行完成
 			  3 请求处理中 正在解析响应内容
 			  4 请求已完成 响应已就绪，内容解析完成，可以在克服端进行调用了
 	status HTTP 状态码 
 	responseText  响应回来的文本
 	responseXML 如果响应内容类型是  text/xml 或 application/xml 这个属性中将保存着响应数据的 XML DOM 文档 （document形式）
 */
  if (xmlhttp.readyState==4 && xmlhttp.status==200){//服务器正常的响应数据回来
     	let data=xmlhttp.responseText;//得到的数据 是字符串类型 需要通过json 的parse()转换 
     	console.log(data);
    }
  }

jquery ajax 方法

//需要有 jquery js 文件
$.ajax({
    method: "get",		//请求的方式
    url: "./StudentInfo", //请求地址
    //也可对url地址进行请求数据拼接类似表单提交 ./StudentInfo?id=1&name=bai &分隔参数
    dataType:"json",   //将服务器返回的数据转换为json对象 也可以类型为text文本等
    data:{"userName":$("#name").val(),...},    //传递给后台的参数 若没有可不写
    success:function(data){//data 名字不用写死 最好见闻知意 
        //这里写获得数据后需要执行的代码  data就是从后台获得的json对象；
        console.log(data);
    },asynh:true       //设置使用同步或异步  ，可不写默认为异步
})