Ajax

Arno 发布于2019-08-20 17:49 / 2596人阅读

摘要：原理客户端通过对象向服务器发送异步请求，从服务器获取数据，通过操作的对象来更新页面。是，则返回状态码，客户端从缓存中读取数据。

原理

客户端通过xmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，通过操作javascript的DOM对象来更新页面。

实现 原生实现

function createXmlHttpRequest(){
    var xhr;
    if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr = new window.XMLHttpRequest();
    }else if(window.ActiveXObject){
       // code for IE6, IE5
        try{
            xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
         }catch(ex){
             xhr = new window.ActiveXObject("msxm12.XMLHTTP");
         }
    }
    return xhr;
}

function doGet(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}
function doPost(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}

Jquery封装实现

var ajaxa = function(){
    //默认参数
    var _options = {
        type: "GET",
        url: null,
        data: null,
        dataType: "jsopn",
        success: null,
        fail: null,
        async: true,
        contentType: "application/x-www-form-urlencoded"
    };
    
    return function(options){
        if(!options || !options.url){
            throw("参数异常");
        }
        
        var xhr = new (window.XMLHttpRequest||window.ActionXObject)("Mircosoft.xml);
        
        xhr.open(options.type, options.url, options.async);
        
        xhr.onreadystate.change = function(){
            if(xhr.raadySate = 4){
                if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
                    var text = xhr.responseText;
                    if(options.dataType == "json"){
                        text = JSON.parse(text);
                    }
                    if(typeof options.success === "function"){
                        options.success(text, xhr.status);
                    }
                }else{
                    if(typeof options.fail === "function"){
                        options.fail("failed", 500);
                    }    
                }
            }
        }
        xhr.setRequestHeader("content-type",options.contentType);
        xhr.send(options.data);
    }
}

readystate五种状态

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了

常见的MIME类型

MIME是描述消息内容类型的因特网标准，能包含文本、图像、音频、视频以及其他应用程序专用的数据。主要有五种，text、application、images、audio、video

响应状态码304原理

客户端发送条件验证请求，服务器端读取If-Modified-Since和If-None-Match请求头信息，来判断客户端缓存的资源是否是最新的。是，则返回304状态码，客户端从缓存中读取数据。

服务器托管专线服务 ajax() ajax? ajax _AJAX

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83903.html

ajax与jsonp一点基础整理

摘要：之所以不能跨域其实是因为受到同源策略的限制，只能让它访问同源下的数据，不能访问不同源下的数据同源策略每个网站只能读取同一来源的数据，这里的同一来源指的是主机名域名协议和端口号的组合。一、Ajax的概念 Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏...

tomlingtm 2019-08-21 16:57 评论0 收藏0
深入浅出Ajax

摘要：在接收响应期间持续不断地触发。在请求发生错误时触发。在通信完成或者触发或事件后触发。已经接收到部分响应数据。基于标准被广泛支持。破坏程序的异常处理机制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 学习大纲理解Ajax的工作原理 Ajax核心-XMLHttpRequest对象封装Aja...

megatron 2019-08-22 18:39 评论0 收藏0
再也不学AJAX了！（一）AJAX概述

摘要：需要注意的是，并不是的替代品，两者各自有其适应的场景。但为了方便交流，我们通常将获取资源的一方称为客户端主要的工具是浏览器，而将派发资源的一方称为服务端又称为服务器。它可以帮助我们为之后概念细节的学习打下良好基础。再也不学AJAX了是一个与AJAX主题相关的文章系列，包含以下三个部分的内容： AJAX概述：主要回答AJAX是什么这个问题；使用AJAX：介绍如何通过JavaSc...

neu 2019-08-21 17:49 评论0 收藏0
ajax入门

摘要：基于标准被广泛支持。这样的类最初是在中作为一个名为的对象引入的。请求还没有被发送。当为，这个属性返回目前已经接收的响应部分。由服务器返回的状态代码，如表示成功，而表示错误。方法取消当前响应，关闭连接并且结束任何未决的网络活动。前言总括：本文讲解了ajax的历史，工作原理以及优缺点，对XMLHttpRequest对象进行了详细的讲解，并使用原生js实现了一个ajax对象以方便日常开...

Fundebug 2019-08-20 13:51 评论0 收藏0
Web前端-Ajax基础技术(下)

摘要：前端基础技术下你要明白是什么，怎么使用，程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。获取字符串形式的响应数据，获取形式的响应数据。基础回顾原理是借助标签发送跨域请求的技巧。 Web前端-Ajax基础技术(下) 你要明白ajax是什么，怎么使用？ ajax，web程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。浏览器发送请求，获取服务器的数据：...

赵连江 2019-04-23 11:44 评论0 收藏0
AJAX-Cache：一款好用的Ajax缓存插件

摘要：是一款缓存插件，可以为方法扩展缓存功能。缓存清理插件本身会自动清理过期缓存对于不想继续使用缓存的接口可以为方法传入清理当前接口的缓存并返回最新数据也可以调用清理所有插件产生的缓存。原文链接 AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用缓存提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件...

didikee 2019-08-22 15:11 评论0 收藏0