Ajax详解
一、ajax是一种无需在加载整个网页的情况下,能够更新部分网页的技术
二、ajax的优点
1.通过异步模式,提升了用户体验
(javasript是单线程的,也就是前一个任务结束,后一个任务才能开始;如果说前一个任务耗时很长;产生了任务队列,任务有同步的,异步的,同步是在主线程上安排任务,一次执行任务;ajax运用的是异步的模式,不需要打断用户的动作)
2.优化了浏览器和服务器之间的传输,减少了不必要的数据
3.ajax引擎在客户端运行,承担了一部分服务端的工作,减少了服务器的负核
二、ajax的缺点
1.不支持浏览器的back按钮
2.暴露了与服务器交互的细节
3.对搜索引擎的支持较弱
三、如何使用ajax
XMLHttpRequest对象是ajax的核心
使用步骤
1.创建XMLHttpRequest对象,也就是创建一个异步调用对象,var xhr=new XMLHttpRequest();
2.创建一个新的http请求,并指定http请求的方法,xhr.open("post","./server/slider.json",true);
3.设置响应http请求状态变化的函数
4.发送请求,send();
5.获取异步请求返回的数据(收到的数据保存在xhr对象的属性中)
6.使用javascript和DOM实现局部刷新
open(method,url,async);创建http请求,规定请求类型,url及是否异步处理请求
method:请求类型,get、post
url:请求的文件在服务器上的地址
async:true(异步)、false(同步)
get和post的区别
post向服务器传递数据时,作为send()方法的参数传过去
get向服务器传递数据时,用&符号连接数据放在url的后面传递
1)post可以传送大量数据,get不行;
2)发送包含用户信息时,post更安全可靠
3)无法使用缓存文件,更新服务器上的文件或数据时
在收到响应后相应数据会填充到xhr对象的属性,有4个相关属性别会填充
1.responseText——从服务器进程返回数据的字符串形式
2.responseXML——从服务器进程返回的DOM兼容的文档数据对象
3.status——从服务器返回的数字代码,如404(未找到)和200已就绪
4.statusText——伴随状态码的字符串信息
四、ajax的兼容
xhr对象可以在IE7及其他浏览器上创建实例,在IE6及以下浏览器不兼容
//兼容写法
写法一、
var xhrHttp; if(window.XMLHttpRequest){ // IE7及其他浏览器 xhrHttp=new XMLHttpRequest(); }else{ // IE5 IE6 xhrHttp=new ActiveXObject('Microsoft.XMLHTTP'); } console.log(xhrHttp);
写法二、 function XMLRequest(){ // 判断浏览器是否将XMLHttpRequest作为本地对象使用,IE7,opera,firefox, if (typeof XMLHttpRequest !='undefined') { return new XMLHttpRequest(); } else if(typeof ActiveXObject !='undefined'){ // 将所有可能出现的ActiveXObject版本放在一个数组里 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 len=xhrArr.length,xhr; for (var i = 0; i < len; i++) { try{ // 创建XMLHttpRequest xhr=new ActiveXObject(xhrArr[i]); //判断如果有一个版本号支持ActiveXObject,就不再循环;否则,抛出一个错误 //ActiveXObject(xhrArr[i]);ActiveXObject里面传一个版本号 break; } catch(ex){ } } return xhr; }else{ throw new Error('No XHR Object'); //如果以上两种都不支持,就抛出一个错误 } }