Ajax详解

Posted 2021-03-08 lita07

一、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‘); //如果以上两种都不支持，就抛出一个错误
    }
}