文档章节

Ajax兼容处理+发送请求+接收返回信息

PHer
 PHer
发布于 2014/06/19 10:40
字数 371
阅读 18
收藏 0

针对不同的浏览器,Ajax对象的创建方式也是不同的,对于IE5 IE6 创建AJAX的方式和 IE7 主流浏览器都是不同的.

在创建ajax对象的时候,我们需要做一下兼容处理

老版本IE6,IE5,主流浏览器JAJAX兼容处理

<script>
    function CompatiableAjax(){
                    var obj=null;
                    if(window.ActiveXObject){
                            obj = new ActiveXObject("Microsoft.XMLHTTP");
                    }else{
                            obj = new XMLHttpRequest();
                    }
                    return obj;
            }
            var ajx = CompatiableAjax();
</script>

open(type,addr,method):通过某种放打开一个连接服务器的通道,使用http协议来完成。采用同步或异步的方式 

ajx.open('get','./02.php');

send:post方式打开的连接通道。

get方式发送数据和接收服务器返回数据

        

<script type="text/javascript">
    function CompatiableAjax(){
                    var obj=null;
                    if(window.ActiveXObject){
                            obj = new ActiveXObject("Microsoft.XMLHTTP");
                    }else{
                            obj = new XMLHttpRequest();
                    }
                    return obj;
            }
    function f2(){
        var xmlhttp = CompatiableAjax();
        xmlhttp.open('get','./02.php');
        xmlhttp.send(null);
        //根据ajax状态获取返回数据
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    //接收返回数据
                  var messayreturn=xmlhttp.responseText;
            }
        }
    }
</script>

  POST方式发送数据和接收服务器返回数据

 <script type="text/javascript">
            function CompatiableAjax(){
                    var obj=null;
                    if(window.ActiveXObject){
                            obj = new ActiveXObject("Microsoft.XMLHTTP");
                    }else{
                            obj = new XMLHttpRequest();
                    }
                    return obj;
            }
            function f2(){
                var ajx = CompatiableAjax();    
                var usr ="cat";
                var data ="name="+usr;
            //    alert(data);
            
                ajx.open('post','./02.php');
                ajx.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                ajx.send(data);
                ajx.onreadystatechange=function(){
                        if(ajx.readyState==4 && ajx.status ==200){
                        console.log(ajx.responseText);
                        }            
                }    
            }
  </script>

POST发送的数据格式,变量用&符隔开

$data ="name="+alis+"&age="+24;

POST和GET方式可以同时发送。相互之间不影响,即使POST设置了头协议,也跟GET毫无关系。


© 著作权归作者所有

共有 人打赏支持
PHer
粉丝 4
博文 121
码字总数 38443
作品 0
成都
程序员
私信 提问
Ajax里的 XMLHttpRequest对象

XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequ...

颜凤娇
2014/01/08
0
0
温故js系列(12)-ajax&&优缺点&&node后端

前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:Ajax JavaScript-Ajax&&node后端 2005年Jesse James Garrett 发表了一篇...

xzavier
08/27
0
0
【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

前言 ajax已经流行很多年了,现在来说它是否已经晚了呢???特别是有这样框架那样框架后,还有几个人认识原生ajax呢?我们每天都会用到的东西你到底对他了解吗? 在最近一次面试上不幸被问到...

范大脚脚
2017/12/14
0
0
再也不学AJAX了!(二)使用AJAX

在上一篇文章中我们知道,AJAX是一系列技术的统称。在本篇中我们将更进一步,详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚,我们首先要搞清楚我们是从哪里获取数据的,其次我们...

LiBin
2017/12/01
0
0
Ajax的原理和应用(给公司做所的培训)

在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一...

韩金星
2013/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ubuntu美化记,-修改皮肤,安装工具。

事情由来 最近系统盘坏了,换了新SSD,也换了新版的ubuntu 18.04LTS;不得不说,ubuntu 的桌面搞的越来越漂亮了。 把调整过的zsh shell样式,截个图上来镇一下楼: 添加了对python virtuale...

janl
8分钟前
0
0
阿里云物联网边缘计算加载MQTT驱动

写在前面 本文在LinkEdge快速入门样例驱动的基础上,加载了MQTT订阅的客户端,使得边缘端容器可以通过MQTT获得外部数据。 1. 系统需求 物联网边缘计算平台,又名Link IoT Edge[1]。在物联网边...

阿里云云栖社区
9分钟前
0
0
错误: 找不到或无法加载主类

在IDEA的使用过程中,经常断掉服务或者重启服务,最近断掉服务重启时突然遇到了一个启动报错: 错误:找不到或无法加载主类 猜测:1,未能成功编译; 尝试:菜单---》Build---》Rebuild Pro...

安小乐
25分钟前
1
0
vue路由传参,刷新页面,引发的bug

最近遇到一个bug 通过vue路由跳转到页面, 然后接参控制(v-if ),成功显示 而刷新页面,显示失败。 苦苦地找了半天原因,打印参数发现正确,再打印下类型......,路由跳过来会保持传参时的...

hanbb
26分钟前
1
0
【58沈剑 架构师之路】InnoDB,select为啥会阻塞insert?

MySQL的InnoDB的细粒度行锁,是它最吸引人的特性之一。 但是,如《InnoDB,5项最佳实践》所述,如果查询没有命中索引,也将退化为表锁。 InnoDB的细粒度锁,是实现在索引记录上的。 一,Inn...

张锦飞
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部