zoukankan      html  css  js  c++  java
  • AJAX核心--XMLHttpRequest五步法

    引言:


    AJAX=异步Javascript + XML,AJAX是一种用于创建高速动态网页的技术。


    开门见山:


    解读:AJAX使用XHTML和CSS为网页表示。DOM动态显示和交互,XML进行数据交换和处理,XMLHttpRequest进行数据检索。Javascript将以上技术融合。


    AJAX与传统的Web开发有什么差别?


    用一句话总结:在页面跳转时传统是整个页面刷新的;AJAX是一部分数据改变。


    思维方式的转变:传统web应用时页面交互为主导、同步响应、非标准方式布局和开发、主要代码在server端,AJAX是数据交互为主导的、异步响应、有标准布局、页面段须要很多其它地代码。


    AJAX的核心知识点(一):XMLHttpRequest对象


    总结XMLHttpRequest五步使使用方法:

    1、建立XMLHttpRequest对象

    2、注冊回调函数

    3、使用open方法设置和服务端交互的基本信息

    4、设置发送的数据。開始和server端交互

    5、在回调函数中推断交互是否结束,响应是否正确,并依据须要获取server端返回的数据,更新页面。


    /* 
     * To change this license header, choose License Headers in Project Properties.
     * To change this template file, choose Tools | Templates
     * and open the template in the editor.
     */
    //使用封装方法的人,仅仅关心提供http的请求方法,url地址。成功和失败的方法
    //类的构造定义,主要职责就是新建出XMLRequest对象
    var MyXMLHttpRequest = function(){
        //定义的不同浏览器的封装
        var xmlhttprequest;
        if(window.XMLHttpRequest){
            xmlhttprequest = new XMLHttpRequest();
            if(xmlhttprequest.overrideMimeType){
                xmlhttprequest.overrideMimeType("text/xml");
            }
        }else if (window.ActiveXObject){
            var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for(var i = 0; i < activeName.length;i++){
                try{
                    xmlhttprequest = new ActiveXObject(activeName[i]);
                    break;
                }catch(e){
                
                }
            }
        }
      if(xmlhttprequest === undefined || xmlhttprequest === null){
          alert("XMLHttpRequest对象创建失败!

    !"); }else { this.xmlhttp = xmlhttprequest; } }; //用户发送请求的方法 MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback) { if(this.xmlhttp !== undefined && this.xmlhttp !== null){ method = method.toUpperCase(); if(method !== "GET" && method !=="POST"){ alert("HTTP的请求方法必须是GET或POST!

    !"); return; } if(url === null || url === underfined){ alert("HTTP的请求地址必须设置!

    "); return; } var tempxmlhttp = this.xmlhttp; this.xmlhttp.onreadystatechange = function(){ //请求发生改变的事件触发器 if(tempxmlhttp.readyState === 4){   //4=完毕。响应数据接收完毕 if(tempxmlhttp.status === 200){ var responseText = tempxmlhttp.responseText; //server对应的文本内容  var responseXML = tempxmlhttp.responseXML; //server对应的XNL内容对应的DOM对象  if(callback === undefined || callback === null){ alert("没有设置处理数据正确返回的方法!"); alert("返回的数据:" + responseText); }else{ callback(responseText,responseXML); } }else{ if(failback === undefined || failback === null){ alert("没有设置处理数据返回失败的处理方法!

    "); alert("HTTP的响应码:" + tempxmlhttp.status + ",响应码的文件信息:" + temphttp.status); }else{ failback(tempxmlhttp.status,tempxmlhttp.statusText); } } } }; //解决缓存的转换 if(url.indexOf("?") >= 0){ url = url + "&t" + (new Date()).valueOf(); }else{ url = url + "?" + (new Date()).valueOf(); } //解决跨域问题 if(url.indexOf("http://") >= 0){ url.replace("?","&"); url = "Proxy?url=" + url; } this.xmlhttp.open(method,url,true); //假设是POST方式。须要设置请求头 if(method === "POST"){ this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } this.xmlhttp.send(data); }else{ alert("XMLHttpRequest对象创建失败,无法发送数据!

    "); } }; MyXMLHttpRequest.prototype.abort = function(){ this.xmlhttp.abort(); };



    分析代码:

    代码大体上是说:首先对XMLHttpRequest对象的构造函数定义。当中就是对不同浏览器的封装。之后是定义了一个send方法,这种方法有几个參数:method有两个数“GET”和“POST”,url表示请求的server的地址,data是向server返回的数据;之后是注冊回调方法onreadystaechange,readstate有5个值,我们仅仅关心值为4的时候。即对应数据接收成功。之后攻克了一些小问题:跨域和Post缓存问题用url转换;最后封装了放弃使用request对象的方法。使用的时候。能够调用内部写的自己的方法。


    callback和fallback实在javascript中写的。


    总结:


    AJAX会在之后会有更好的东西替代它,它仅仅是我们学习的一个阶段。一种新的事物,我们如今看可能是新的,比較传统的东西。会有它的不同点,一般人看到的可能很多其它地是它不同的地方,往往会忽略它与传统的共同点,我们换一种思维方式,就会发现,我们掌握了传统的基础之后,新的事物的不同的地方非常easy掌握。


  • 相关阅读:
    DB2高可用hadr搭建参数配置
    redis一主两从搭建
    hdu 1064 Financial Management(超级大水题)
    hdu 1009 FatMouse' Trade(贪心水题)
    文件选择性加密解密
    uva 10405 Longest Common Subsequence(最长公共子序列)
    UVa 111 History Grading (最长公共子序列)
    hdu 2550 百步穿杨(大水题)
    UVa 10066 The Twin Towers(LCS水题)
    ASP.NET学习参考站点
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/6944340.html
Copyright © 2011-2022 走看看