• 【Ajax 2】封装Ajax的核心对象:XMLHttpRequest对象


    导读:AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。那么,XMLHttpRequest对象是怎么创建和封装的呢?

    一、简介

    1.1,用途

    该对象向服务器发送请求,并接收服务器响应,实现与服务器的异步通信

    1.2,发展

    在1999年上半年,微软利用ActiveX对象实现了XMLHTTP对象,随后,在2000年,Mozilla实现了相同接口的原生对象XMLHttpRequest对象,Opera,Safari也相继实现。

    二、XMLHttpRequest的基本知识

    2.1,属性

    2.2,状态


    2.3,status和statueText


    2.4,方法

    三、封装XMLHttpRequest对象

    3.1,步骤

    总结说来,对于XMLHttpRequest对象的封装,有五步:

    1,创建一个XMLHttpRequest对象

    2,调用对象的Open()方法设置和服务器端交互的基本信息

    3,使用对象的onReadystatechange属性注册回调函数,在函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,更新页面内容

    4,通过对象的setRequestHeader()方法设置相应的请求头(如果交互方式为:POST)

    5,调用对象的send()方法发起请求

    3.2,封装

    <span style="font-family:KaiTi_GB2312;font-size:18px;">/*
    封装XMLHTTPRequest对象
    */
    var XMLHTTPRequest=function(userName) {
        //1,创建XMLHTTPRequest对象
        var myXMLHttpRequest;
        if (window.XMLHttpRequest) {
            //IE7,IE8,Firefox,Mozillar,Safari,Opera
            myXMLHttpRequest = new XMLHttpRequest();
            //服务器发送回来的头部,不是text/xml,进行忽略
            if (myXMLHttpRequest.overrideMineType) {
                myXMLHttpRequest.overrideMineType("text/xml");
            }
        }//IE5,IE6,IE5.5
        else if (window.ActiveXObject) {
            //创建一个数组,包含所有能用于创建XMLHTTPRequest对象的ActiveXobject控件名称
            var activeName = ["XSXML2.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.6.0"];
            for (var i = 0; i < activeName.length; i++) {
                //没有可用的控件,捕捉异常
                try {
                    myXMLHttpRequest = new ActiveXObject(activeName[i]);
                    break;//创建成功,终止循环
                } catch (e) {
    
                }
            }
        }
        //对象创建失败
        if (myXMLHttpRequest == undefined || myXMLHttpRequest == null) {
            alert("当前浏览器不支持创建XMLHTTPRequest对象,请更换浏览器");
            return;
        }
        /*
        //GET方式交互
        //2,设置和服务器端交互的相应参数,打开资源
        myXMLHttpRequest.open("GET", "AJAX?name=" + userName, true);
        //3,注册回调函数
        myXMLHttpRequest.onreadystatechange = callback;
        //4,设置向服务器端发送的数据,启动和服务器端的交互
        myXMLHttpRequest.send(null);
        */
    
        //POST方式交互
        //2,设置和服务器端交互的相应参数,打开资源
        myXMLHttpRequest.open("POST", "AJAX",true);
        //3,注册回调函数
        myXMLHttpRequest.onreadystatechange = callback;
        //4,设置请求头(和GET方式的区别)
        myXMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4,设置向服务器端发送的数据,启动和服务器端的交互
        myXMLHttpRequest.send("name="+userName);
    
        //3.1,实现回调函数
        function callback() {
            //判断和服务器端的交互是否完成,然后判断服务器端是否正确返回了数据
            if (myXMLHttpRequest.readyState == 4) {//和服务器端的交互已经完成
                if (myXMLHttpRequest.status == 200) {//服务器的响应代码为200,正确的返回了数据
                    //纯文本的接收方法,使用前提:服务器端设置content-type为text/xml
                    var message = myXMLHttpRequest.responseText;
                    //向div标签中填充文本内容
                    var div = document.getElementById("message");
                    div.innerHTML = message;
                }
            }
        }
    }
    </span>

    四、总结

    Ajax还有很多需要探索和学习的,比如说例子的实现,我没有实现它,肯定是对于这个知识的掌握还不够,或者说别的关于BS的知识学习的还不够,不能放弃,遇到一个问题就是我的一次机会。还有包括Ajax的封装,还有其跨域问题、缓存问题等,都需要解决。


  • 相关阅读:
    02-NSArray、NSSet、NSDictionary 集合类
    01-结构体NSRange、NSPoint、NSSize、NSRect、及NSString简介
    13-Objective-C特有语法:协议protocol
    12-Objective-C特有语法:(高效率)block数据类型
    Xcode编译器特性:ARC(Automatic Reference Counting)
    11-Objective-C特有语法:内存管理总结
    10-Objective-C特有语法:Category、类对象、description、SEL、NSLog输出增强
    09-Objective-C特有语法:万能指针id及构造方法
    通配符 正则常用对比
    window 远程登录linux
  • 原文地址:https://www.cnblogs.com/hhx626/p/6010393.html
Copyright © 2020-2023  润新知