ajax

1.什么是ajax？

AJAX是再一种无需重新加载整个页面的情况下，也能够更新网页部分的技术（局部刷新）AJAX是一个异步的代码，再程序中同步异步的区别就是，同步代码按照顺序执行，异步代码不按照顺序执行。

2.ajax的优点？

页面无刷新更新数据：ajax最大的优点就是能够在不刷新网页的情况下与服务器通信维护数据；异步与服务器通信：ajax使用异步方式与服务器通信 ，不需要打断用户的操作，具有更加迅速的响应能力；前端和后端负载平衡：ajax可以把以前一些服务端负担的工作转嫁到客户端，减轻服务器和带宽的负担，节约空间和宽带租用成本；基于标准被广泛支持：ajax基本标准化的并被广泛支持的技术，不需要下载浏览器插件；界面与应用分离：ajax使WEB中的数据与呈现分离，有利于分工合作，提高效率。

3.ajax的缺点

ajax干掉了Back和History功能：即对浏览器机制的破坏，在动态页面的情况下，用户无法回到前面一个页面状态；ajax有安全问题：ajax技术给用户带来了很好的用户体验的同时也带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接的通道；对搜索引擎支持较弱：对搜索引擎优化不太好；破坏程序的异常处理机制：像Ajax。dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制；AJAX不能很好支持移动端设备；

4.如何使用ajax

主流W3C标准浏览器都支持XMLHttpRequest对象

低版本IE浏览器使用的是 ActiveXObject

4.1.创建ajax对象

var xhr = new XMLHttpRequest();//主流W3C标准浏览器 //考虑兼容 if(window.XMLHttpRequest){ // 非IE5 IE6 var xhr=new XMLHttpRequest(); }else{ // IE5 IE6 var xhr=new ActiveXObject("Microsoft.XMLHTTP"); };

4.2.初始化ajax请求

xhr.open(method,url,async); //参数说明： method:请求数据类型 get/post url：文件在服务器上的位置 async： 可选，默认ture（异步），false（同步）

4.3发送请求

xhr.send(param); //参数说明： param:对于get请求，参数为null param：对于post请求，参数为发送到服务器的数据 //为post请求时，需要在send()之前设置http请求头：作用模拟表单post来传递参数 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") //get/post区别 1.语义化不一样 GET倾向于从服务器获取数据 post倾向于从服务器提交数据 2.传递参数的方式 GET请求直接在地址栏后边拼接 post请求在请求体里面传递 3.参数大小限制 GET请求一般理论上不大于2KB post请求理论上没有上线 4.缓存能力 GET会被浏览器主动缓存 POST不会被浏览器主动缓存 5.安全性能 GET请求相对安全性较低 POST请求相对安全性较高 get/post本质上都是tcp连接

4.4请求-响应状态

//readystate 属性存有XMLHttpRequest对象的状态，会从0-4发生变化； 0：请求未初始化 1：服务器连接已经建立 2：请求已经接收 3：请求处理中 4：请求已经完成 //当readystate改变时就会触发onreadystatechange事件 //status:http请求状态码 //下面是常见的Http请求状态码： 200：请求成功 301：网页被重定向到其他的url 304：文件未被修改，使用缓存资源 404：找不到此网页(指定的资源) 500：服务器内部错误 //当readyState为 4 且 status为 200 时，表示请求已完成，成功得到响应结果 xhr.onreadystatechange=function (){ if (xhr.readyState==4) { // 请求完成 if (xhr.status==200) { //ok 成功 alert( xhr.responseText ); // 得到响应结果 } else{ alert( xhr.status ); // 弹出失败的状态码 }; }; } //xhr.responseText 获得文本形式的响应数据 //xhr.responseXML 获得 XML 形式的响应数据

5.封装ajax

5.1封装ajax

//封装ajax请求 function ajax(options){ 1.创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //判断传入的参数类型，处理一下data，变成字符串数据 //如果data为对象 var data = ""; if(typeof options.data === "string"){ data = options.data; } if(typeof options.data === "object" && options.data!==null && options.data.constructor === Object){ //{abc:123, ddd:777}转变成'abc=123&ddd=777' for(var key in options.data){ data += key+"="+options.data[key]+"&"; } //data='abc=123&ddd=777&' data = data.substring(0,data.length-1) //data='abc=123&ddd=777' } //判断请求类型 if(options.type.toLowerCase()==='get'){ 2.初始化一个请求 xhr.open(options.type,options.url+"?"+data+"&_="+Date.now()) 3.发送一个请求 xhr.send() }else if (options.type.toLowerCase()==='post'){ 2.初始化一个请求 xhr.open(options.type,options.url) //设置请求头 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 3.发送一个请求 xhr.send(data) }els{ alert('目前只支持 get和post 请求！') } 4.请求-响应状态 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { options.success(xhr.responseText) } else { options.error(xhr.status) } } } } //参数说明： options：是一个参数对象 options ={ type:"GET/POST", //请求的类型 url： , //请求的地址 data:{ //请求携带的参数，支持字符串类型，对象类型 }， success：function(){ //请求成功的回调，要执行的内容 } error：function(){ //请求失败的回调，要执行的内容 } }

5.2.使用Promise封装ajax

function promiseAjax(options){ return new Promise(function(resolve,reject){ // 1.创建XMLHttpRequest对象（数据交互对象） var xhr = new XMLHttpRequest();//w3c标准 // var xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE 5 6 var data = ''; if (typeof options.data === 'string'){ data = options.data; } if (typeof options.data === 'object' && options.data !== null && options.data.constructor === Object){ // 把{abc:123,ddd:777} 转成 'abc=123&ddd=777' for (var key in options.data){ data += key+'='+options.data[key]+'&'; } // data = 'abc=123&ddd=777&'; data = data.substring(0,data.length-1); // console.log(data); } // return; // 判断请求方式 if (options.method.toLowerCase() === 'get'){ xhr.open(options.method,options.url+'?'+data+'&_='+Date.now(),true); xhr.send(null);// get请求 } else if (options.method.toLowerCase() === 'post'){ xhr.open(options.method,options.url,true); // 作用是模拟表单post来传递参数 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(data);// post请求发送数据 } else { alert('目前只支持 get和post 请求！') } // 4.请求-响应 状态 xhr.onreadystatechange = function (){ // console.log(xhr.readyState); if (xhr.readyState == 4){//请求完成 （请求状态） if(xhr.status >= 200 && xhr.status < 300){// 得到响应数据 （响应状态） resolve(xhr.responseText); } else{ reject(xhr.status); } } } }); }

5.3.jQuery ajax

$.ajax( options ) 通过 HTTP 请求加载远程数据

url：请求的url地址 type：请求类型（get/post…） cache：是否读取缓存，默认true data：要发送给服务器的数据，示例："name=jack&age=19"string或Object{name:“jack”,age:“19”} async：默认true，为异步请求 dataType：服务器返回的数据类型特殊的格式JQ会进行预解析和兼容性修复。可选择的值：“xml” , “html” , “script” , “json” , “text”，”jsonp”等 timeout：设置超时（毫秒） success：请求成功的回调函数 error：请求失败的回调函数 complete：请求完成后的回调函数，无论成功与失败 beforeSend：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义 HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

$('#login').click(function (){ $.ajax({ type:'get', url:'test.php', dataType:'json', cache:false, //不使用缓存 success:function (json){ $('h1').html(json.name+json.sex+json.age); }, error:function (){ alert('请求失败'); } }); })

！！！ 以上是DaXiong本人对前端知识的理解总结，如内容知识有错误可以留言修改。

！！！如果以上内容帮助到了你，点击一下赞或者收藏吧！