开发者社区> 爱六六> 正文

一步一步理解Ajax(二)

简介: ajax方法:通过 HTTP 请求加载远程数据get方法: 通过远程 HTTP GET 请求载入信息post方法:通过远程 HTTP POST 请求载入信息1、创建XMLHttpRequest对象 function createXHR() {            return window.
+关注继续查看

ajax方法:通过 HTTP 请求加载远程数据
get方法: 通过远程 HTTP GET 请求载入信息
post方法:通过远程 HTTP POST 请求载入信息

1、创建XMLHttpRequest对象

function createXHR() {
            return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

2、将键值对转换成拼接串
      function params(data) {
            var a = [];
            for (var i in data) {
                a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
            }
            return a.join("&");
        }

3、封装ajax方法
    参数
  method       请求方法      get和post          默认get
  data            键值对         {key:value}
  url               链接地址
  cache           缓存           true   和  false    默认true带缓存
  success       成功           
  error           异常
  function ajax(args) {
            var xhr = createXHR();
            var data = params(args.data);
            if (/get/i.test(args.method)) {    //  当为get方式时  将data直接拼接到url后
                args.url += "?" + data;
            }
            if (!args.cache) {      //无缓存
                if (args.url.indexOf("?") < 0) {   //当无参数data
                    args.url += "?";
                }
                args.url += "&" + (new Date());  // Math.random();
            }
            xhr.open(args.method, args.url, true);
            xhr.onreadystatechange = function () {
                if (4 == xhr.readyState && 200 == xhr.status) {
                    args.success(xhr.responseText, xhr.responseXML);
                }
                else {
                    args.error();
                }
            }
            if (/post/i.test(args.method)) {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(data);
            }
            else {
                xhr.send();
            }
        }

4、这是一个简单的 get方法 请求功能以取代复杂 ajax方法 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用ajax方法。
       function get(url, data, fn) {   
            ajax({ "method": "get", "url": url, "data": data, "success": fn });
        }

5、这是一个简单的 post方法 请求功能以取代复杂 ajax方法 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用ajax方法。
       function post(url, data, fn) {
            ajax({ "method": "post", "url": url, "data": data, "success": fn });
        }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19577 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14580 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18617 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
16958 0
+关注
爱六六
前端开发相关专家
164
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载