文档章节

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

PHer
 PHer
发布于 2014/06/19 10:40
字数 371
阅读 17
收藏 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
再也不学AJAX了!(二)使用AJAX

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

LiBin
2017/12/01
0
0
【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

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

范大脚脚
2017/12/14
0
0
Ajax的原理和应用(给公司做所的培训)

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

韩金星
2013/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[Hive]JsonSerde使用指南

注意: 重要的是每行必须是一个完整的JSON,一个JSON不能跨越多行,也就是说,serde不会对多行的Json有效。 因为这是由Hadoop处理文件的工作方式决定,文件必须是可拆分的,例如,Hadoop将在...

Mr_yul
19分钟前
0
0
54:mysql修改密码|连接mysql|mysql常用命令

1、mysql修改密码: root用户时mysql的超级管理员,默认mysql的密码是空的,直接可以连接上去的,不过这样不安全; 注释:为了方便的使用mysql,需要把mysql加入到环境变量里; #后续自己输入mys...

芬野de博客
26分钟前
0
0
鼠标单击复制粘贴标签中的内容

<span ref="spanContentOne" id="spanContentOne" style="font-size: 14px;">或许不是最亮眼,总比瞎买强一点</span><!--<input type="button" @click="copyClick('1')" value="复制" />-......

帝子兮
30分钟前
0
0
使用axel多线程疯狂下载

在Linux中比较常见见的下载工具是curl和wget,但是下载比较大的文件两者都不支持多线程, 断点续传的作用不见得能发挥到最大。今天介绍一个axel工具,开启多线程疯狂下载。 安装 Fedora/Cen...

linuxprobe16
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部