资讯专栏INFORMATION COLUMN

ajax入门之建立XHR对象

Leck1e / 624人阅读

摘要:入门之建立对象今天帮朋友写了一个简单的的发现了一些东西,决定写一篇文章记录一下,避免以后挖坑。函数会启动一个请求但并不是发送,可以看作办事之前的准备。小结这是一个手动创建对象并使用最简单的方法。

ajax入门之建立XHR对象

今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑。

创建XMLHttpRequest
通常
    function createXHR(){
        if(XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP")
        }
    }

这一段js代码来源自w3school,用于创建兼容各浏览器的XMLHttpRequest对象的含义:

检测客户端是否有XMLHttpRequest,否则使用ActiveXObject  

关于XMLHttpRequest对象,IE5是第一个引入XHR对象的浏览器,在IE5中,XHR是通过activeX对象实现的.因此在IE中可能遇到三种不同版本的XHR对象,MXSML2.XMLHTTP,MXSML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。

IE的坑

为了向我们伟大的IE浏览器“致敬”,我们必须添加额外的代码进行创建
以下代码适用与IE7以下的情况:

function createXHR(){
    if(typeof argument.callee.activeXString != "string"){
        var versions = ["MXSML2.XMLHTTP","MXSML2.XMLHttp.3.0","MXSML2.XMLHttp.6.0"];
        var i len;
        for(i = 0;len=versions.length;i
            }
        }
    }
    return new ActiveXObject(argument.callee.activeXString);
}
完整走一遍

但往往我不会考虑这么多,能看懂前面的函数也是很不容易了,再让我写出来,我的天!当大家和我这么懒的时候,可以直接使用第一份代码,也就是w3school那一套代码,我们使用原生的XHR对象进行创建。
当然,我们这里也给出完整的代码。

function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }else if(typeof argument.callee.activeXString != "string"){
        var versions = ["MXSML2.XMLHTTP","MXSML2.XMLHttp.3.0","MXSML2.XMLHttp.6.0"];
        var i len;
        for(i = 0;len=versions.length;i
            }
        }
        return new ActiveXObject(argument.callee.activeXString);
    }else{
        throw new Error("没有XHR对象存在");
    }
}
用法



    
    demo


        

创建好XHR对象只是第一步,才是我们各种操作的开始。

open()

open()函数会启动一个请求,但并不是发送,可以看作办事之前的准备。
它接受三个函数:

open(get/post,url,false/true)

请求类型:最常用的就是get和post

路径:就是要请求的操作的文件的url

是否异步

我们这是使用的是get方式,因为我们并没有要发送的数据。
异步我们选择了true,无意中发现在使用false时候,火狐出现了警告:

主线程中同步的 XMLHttpRequest 已不推荐使用,因其对终端用户的用户体验存在负面影响。

具体需要再了解。

send()

自然而然,准备好了就要发送,send()只接受一个参数,那就是要发送的数据。我们使用的是get,没有数据,那就null好了。

php

因为这篇文章主要是讲ajax,所以php部分我只用了最简单的echo

这样就能在接受到请求后返回一个字符串。

回调函数

我们怎么样才能直到php文件将数据处理完,返回给客户端了呢?
这时候我们就需要监测XHR的readyState属性。先介绍以下readyState属性:

0:初始化未完成,未调用open()

1: 启动调永了open()函数,但是还没有send

2:发送,调永了send()函数,还没有接收到响应

3:开始接收,接收到部分的数据

4:完成,接收到了全部数据。

所以在上面的函数中我们可以看到,我们去监测readyState属性,等到等于4的时候,也就是数据接收完成之后,我们开始对数据进行处理。

小结

这是一个手动创建XHR对象并使用最简单的方法。以后回继续进行更新。介绍其更详细的用法。

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

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

相关文章

  • Ajax基础入门

    摘要:一是什么的全称是,其中,是异步的意思。一定要注意如果请求是请求格式必须设置请求头字符串拼接模板字符串 一、ajax是什么? 1、ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思。 2、是7种技术的综合,它包含了:JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、cs...

    reclay 评论0 收藏0
  • JavaScriptweb通信

    摘要:设置一个定时器,定时询问服务器是否有信息,每次建立连接传输数据之后,链接会关闭。通过调用此程序提供的套接口接口与服务器端的套接口进行通信。 本文同步自我的博客园:http://hustskyking.cnblogs.com P.S: 各个平台中就 segmentFault 写博客体验最好了! web通信,一个特别大的topic,涉及面也是很广的。因最近学习了 javascript 中...

    Honwhy 评论0 收藏0
  • JavaScript通信Ajax

    摘要:表单提交在中提供了表单提交的功能,我们可以通过表单把数据从前台提交到后台,通过设置事件,可以为按钮或其它元素同样可以触发表单提交的事件账号请输入账号密码请输入密码重置重置提交表示获取页面中所有的表单,返回一个数组提交成功通过表单提交数据不需 表单提交 在HTML中提供了表单提交的功能,我们可以通过表单把数据从前台提交到后台,通过设置submit事件,可以为按钮或其它元素同样可以触发表单...

    DDreach 评论0 收藏0
  • Ajax学习笔记

    摘要:最近在学,刚刚入门,用到很多与相关的交互。也用了挺久的了,想写一下学习笔记来记录一下。实现过程是的基础,是核心对象,首先要实例化一个对象进行请求,规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。 最近在学php,刚刚入门,用到很多与Ajax相关的交互。Ajax也用了挺久的了,想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探...

    Forest10 评论0 收藏0

发表评论

0条评论

Leck1e

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<