Ajax
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，几种原有技术的结合体
优点
- 通过异步的模式，提升用户体验
- 减少不必要的数据往返，优化浏览器和服务器之间的传输，也减少了带宽占用
- Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载
缺点
- 不支持浏览器的回退按钮
- 暴露了与服务器交互的细节从而引起安全问题
- 对搜索引擎的支持较弱
原生ajax
- 创建一个XMLHttpRequer异步调用对象，是整个ajax的核心
- 创建一个新的HTTP请求，并指定该HTTP请求的方法
- 设置响应HTTP请求状态变化的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript"> //获取xhr对象，兼容各个版本 function crateXHR() { if (typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest(); }else if (typeof ActiveXObject != 'undefined'){ var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'] var xhr; for (var i = 0; i < xhrArr.length; ++i){ try{ xhr = new ActiveXObject(xhrArr[i]); break; }catch (e){ } } return xhr; }else { throw new Error('请升级浏览器版本！'); } } //创建XMLHttpRequest对象 var xhr = crateXHR(); //响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyestatechange属性发生变化时触发 xhr.onreadystatechange = function () { //异步调用成功 if (xhr.readyState === 4){//异步调用成功，响应内容解析完成 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ //获取服务器返回的数据 var demo = document.getElementById('demo'); demo.innerText = xhr.responseText; } } } //创建请求 xhr.open('get','./json/demo.json',true); //发送请求 xhr.send(null); //xhr.send({id:8,uuid:"afdeafd58fadf"});//xhr.open是post的话，参数需要放在send中，并在请求头加上header请求头 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); </script> <body> <div id="demo"></div> </body> </html>
jQuery封装后的ajax方法
//jQuery的ajax方法 $.ajax({ url:"./json/demo.json", //请求地址 type:"get", //请求方式 async:true, //同步异步 dataType:"json", //数据返回格式 success:function (data) { //请求成功的回调 //获取服务器返回的数据 $('#demo').text(data) } });