AJAX核心--XMLHttpRequest五步法

引言:

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

开门见山:

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

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

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

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

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

总结XMLHttpRequest五步使用法:

1、建立XMLHttpRequest对象

2、注册回调函数

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

4、设置发送的数据,开始和服务器端交互

5、在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面。

/*
 * 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;
                    //服务器相应的文本内容
                    var responseXML = tempxmlhttp.responseXML;
                    //服务器相应的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表示请求的服务器的地址,data是向服务器返回的数据;之后是注册回调方法onreadystaechange,readstate有5个值,我们只关心值为4的时候,即相应数据接收成功;之后解决了一些小问题:跨域和Post缓存问题用url转换;最后封装了放弃使用request对象的方法,使用的时候,可以调用内部写的自己的方法。

callback和fallback实在javascript中写的。

总结:

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

时间: 2024-08-02 06:50:25

AJAX核心--XMLHttpRequest五步法的相关文章

Ajax使用的五步法

Ajax使用的五步法 <script type="text/javascript">           //用于保存XMLHttpRequest对象的变量,由于整个过程中必须使用同一个XMLHttpRequest对象,所以要定义成全局的           var xmlhttp;           function submit()           {               //第一步:创建XMLHttpRequest对象               if(

详解AJAX核心 —— XMLHttpRequest 对象 (下)

继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document Object Model)文档对象模型.JavaScript通过DOM读取.改变或者删除 HTML.XHTML 以及 XML中的元素,可以重构整个 HTML 文档.可以添加.移除.改变或重排页面上的项目,而且这样的操作会马上显示在页面上.另外,所有浏览器执行W3C 发布的 DOM 标准规范,DOM

详解AJAX核心 —— XMLHttpRequest 对象 (上)

我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlht

AJAX——核心XMLHttpRequest对象

AJAX——核心XMLHttpRequest对象

AJAX 核心 —— XMLHTTPRequest 对象 回顾记录

AJAX 概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML)用于异步通讯,通过在后台与服务器进行少量的数据交换,在不重载整个网页的情况下,对网页局部实现异步刷新. AJAX 核心 JavaScript 中使用 XMLHTTPRequest 对象(XHR)实现 AJAX 请求. AJAX 步骤 一般步骤如下: 实例化 XMLHTTPRequest 对象(注意 I

AJAX核心XMLHTTPRequest对象

老早就写好了总结,今天整理发表一下. XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做:这样既减轻了服务器负担又加快了响应速度.缩短了用户等待的时间. XMLHttpRequest对象是开发者的梦想,因为能够: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服

【后知后觉】AJAX核心对象——XMLHttpRequest

自从把AJAX学了之后,就是在云里雾里飘着,想总结,却无从下手,就一直拖到现在.最近看DRP,王勇老师简单的讲了AJAX,对这个又是技术又是技巧的东西做了再一次的解,感觉自己稍微理解了一些.现将我现在理解的分享下. 首先什么是AJAX呢? AJAX简介: AJAX这个名词最早是由Jesse James Garrett提出的,当时给出的解释是:Asynchronous JavaScript And XML,虽然当时Jesse James Garrett也曾发表文章介绍这个技术,但是真正被人们所熟知

Ajax核心对象——高速上手XmlHttpRequest

引言: 非TGB的.直接跳过吧-- 从开学结束JQuery之后,计算机的进度停了一段时间.某天无聊的时候,又又一次把BS的东西拿过来看了看. 发现里面有非常多既熟悉又陌生的东西. 在学习王兴魁老师的Ajax的时候,里面的东西,大多都是之前学过的.在学习JS的时候.有非常多js资料. 非常多人看的都是牛腩js和姜浩的js.可是我师父让我看李炎恢的js. 刚開始的时候感觉挺怪的.牛腩的js一周,姜浩的js 一周.李炎恢的js 150集据说至少看三个星期. 尽管感觉压力大了点. 可是等真正看的时候.才

Ajax核心对象——快速上手XmlHttpRequest

引言: 非TGB的,直接跳过吧-- 从开学结束JQuery之后,计算机的进度停了一段时间.某天无聊的时候,又重新把BS的东西拿过来看了看.发现里面有很多既熟悉又陌生的东西. 在学习王兴魁老师的Ajax的时候,里面的东西,大多都是之前学过的.在学习JS的时候,有很多js资料.很多人看的都是牛腩js和姜浩的js.但是我师父让我看李炎恢的js.刚开始的时候感觉挺怪的.牛腩的js一周,姜浩的js 一周.李炎恢的js 150集据说至少看三个星期. 虽然感觉压力大了点.但是等真正看的时候,才发现这150集的