Ajax编程

Ajax编程

什么是Ajax

“Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。”

优点：
减轻服务器的负担,按需取数据,最大程度的减少冗余请求，局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
缺点：
AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

ajax执行原理： 通过在后台与服务器进行少量数据交换，使网页实现异步更新。在不重新加载整个网页的情况下，对网页的某部分进行更新

注： ajax接收的数据类型为字符串或xml文件

Ajax开发方式1（原生js）

//1.创建XMLHttpReaquest对象

//由于IE5,6兼容问题，所以：
let xmlhttp=null;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


//2.使用xmlHttpRequest对象发送请求到服务器(参数详情，请看下图1-1)
xmlhttp.open("get","./StudentInfo.do",true);//（请求方式，请求地址，异步还是同步）
xmlhttp.send();


//3.使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获取服务器的响应
//监听readyState的值当值为4的时候说明数据已经回来
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
  		//获取从服务器端得到的数据
     	let data=xmlhttp.responseText;
     	console.log(data);
    }
  }

Ajax开发方式2（jquery ajax）

$.ajax({
     type: "get",		//请求的方式
     url: "./StudentInfo.do", //请求地址
    dataType:"json",   //将服务器返回的数据转换为json对象
    data:{"userName":$("#name").val(),...},    //传递给后台的参数 若没有可不写
    success:function(data){
        //这里写获得数据后需要执行的代码  e就是从后台获得的json对象；
        console.log(data);
    },asynh:true       //设置使用同步或异步  ，可不写默认为异步
})