`

Ajax 基础(自己学习)

阅读更多
XMLHTTPRequest---->JavaScript对象

open()

onreadystatechange---->委托

send()

readystate----页面响应关态

status-----页面状态

setRequestHeader----设置请求头协议

第一步  创建XMLHTTPRequest对象
var request=onInit();
第二步 告诉请求那个服务器
request.open("GET",URL,TRUE);1提交方式 2 服务器地址 3 是否准许异步提交
第三步 定义事件当请求开始后触发
request.onreadystatechange=Request;
第四步
request.send(null);//开始提交到服务器提交的参数,POST提交需要参数
function CreateResponse()
{
创建XMLDocument对象
var dom=request.ResponseXML();
字符串
var str=request.responseText();
}
function Request()
{
判断数据是否响应完毕
if(request.readystate==4)
{
  判断页面是否正常
  if(request.status==200)
  {
  
  }
}
}
function onInit()
{
  if (window.XMLHttpRequest) {
        return new windows.XMLHTTPRequest();
    }
    if (window.ActiveXObject) {
       return new window.ActiveXObject("microsoft.XMLHTTP");
    }
}

-----------------------------------------------
 XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。

了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:

先看看IE创建XMLHttpRequest 对象的方法(方法1):

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)

  而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法(方法2)创建XMLHttpRequest 对象:

var xmlhttp = new XMLHttpRequest();

  实际上Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者(下文统称 XMLHttpRequest 对象)。IE7开始也开始使用XMLHttpRequest 对象了。

  在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错,并且无法使用该对象。所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法:

  创建兼容多浏览器的 XMLHttpRequest 对象方法

var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
    try{
        xmlhttp = new XMLHttpRequest();  //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
    }
    catch (e){
        try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
        }
        catch (e){
            try{
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
            }
            catch (failed){
                  xmlhttp = false;  //如果失败则保证 request 的值仍然为 false。
            }
        }
    }
    return xmlhttp;
}
判断是否创建成功就很简单了

if (!xmlhttp){
 //创建XMLHttpRequest 对象失败!
}
else{
 //创建成功!
}
=========================================================
创建好了XMLHttpRequest 对象我们再来看看这个对象的方法、属性以及最重要的onreadystatechange事件句柄吧。

  方法:

  open() 说明:初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。

  abort() 说明:取消当前响应,关闭连接并且结束任何未决的网络活动。

  getAllResponseHeaders() 说明:把 HTTP 响应头部作为未解析的字符串返回。

  getResponseHeader() 说明:返回指定的 HTTP 响应头部的值。

  send() 说明:发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

  setRequestHeader() 说明:向一个打开但未发送的请求设置或添加一个 HTTP 请求。

  属性:

  readyState 说明:HTTP 请求的状态。

  responseText 说明:目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。

  responseXML 说明:对请求的响应,解析为 XML 并作为 Document 对象返回。

  status 说明:由服务器返回的 HTTP 状态代码。

  statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。

  onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数。

  下面从发送请求并处理请求结果的过程来理解一下XMLHttpRequest 对象吧。

  发送请求之前自然就是生成一个XMLHttpRequest 对象,代码上面有了就不多写了。

  生成一个XMLHttpRequest 对象

var xmlhttp = CreateXMLHttp();

  创建好XMLHttpRequest 对象了,那我们要送请求到哪个网站呢,就选择博客园首页的RSS吧。那怎么设置我要请求的网站地址呢,使用open()方法。


open(method, url, async, username, password)

该方法有5个参数,具体什么意思可以看这里:http://www.w3school.com.cn/xmldom/dom_http.asp

  我们用的就是这个了。

xmlHttp.open("get","http://www.cnblogs.com",true);

get参数表示用get方法,第二个自然就是目标地址,博客园首页,第三个就是表示是否异步了,我们当然使用true了。具体的参数说明还都可以到http://www.w3school.com.cn上面看了。

  好了,目标定好了,怎么发送呢。用send()方法。

  send(body),send()方法只有一个参数,表示DOM对象,这个DOM对象需要说明的内容很多,下次说,今天我们只要写

xmlhttp.send(null);

  就可以了。好了,发送了,那怎么处理返回的结果呢,这个时候就用到XMLHttpRequest 对象最重要的东西了,那就是onreadystatechange事件句柄。什么意思呢,那就需要说明一下XMLHttpRequest 对象的readyState了,readyState有5种状态,分别用数字的 0 到 4 来表示。

状态      名称            描述
0      Uninitialized       初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置。
1      Open           open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2      Sent            Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3      Receiving      所有响应头部都已经接收到。响应体开始接收但未完成。
4      Loaded         HTTP 响应已经完全接收。 


但是需要注意的是,onreadystatechange事件句柄不同的浏览器能处理的状态并不一致,IE和FireFox能处理1到4,而Safari能处理2到4的状态,Opera 能处理3、4两中状态。0的状态基本没什么用,因为创建了XMLHttpRequest 对象后都会马上调用open() 方法,这时候状态就变成1了,当然除非你要判断对象是否已经被 abort() 取消,可是这样的情况依然很少。大部分情况下判断是不是4(已经接受完成)这个状态就够了。

好了,明白了readyState有5种状态了,那处理返回结果就是看状态变更到不同的状态我们做不同的处理就可以了,怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢。有两种写法,一种是用匿名方法,另一种是指定方法,其实只是不同的写发,作用都一样,看下代码:

xmlhttp.onReadyStateChange = function (){
 //处理状态变化的代码
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
 ///处理状态变化的代码
}
//顺便说一下,句柄的名称比较长,可以这样记忆 on ReadyState Change 表示在读取状态改变时

  请求发送了,也指定处理方法了,怎么获取返回的内容呢,有responseText和responseXML两个属性可供使用,responseXML是返回对象,需要再解析,后面再说,这里先用responseText,看看返回什么。

  alert(xmlhttp.responseText); //看看是不是返回了首页的HTML代码啊。是你就成功了。

  整个过程是:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意,我们正常的思路理解是这样的,可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好,否则无法处理状态变化事件。
所以我们应该按照下面的流程来记忆:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求,请求发送后状态变化了就会自动调用指定的处理方法。

  好了,看看完成的代码吧。

  完成的代码

    var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
    function CreateXMLHttp(){
        try{
            xmlhttp = new XMLHttpRequest();  //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
        }
        catch (e){
            try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
            }
            catch (e){
                try{
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
                }
                catch (failed){
                      xmlhttp = false;  //如果失败则保证 request 的值仍然为 false。
                }
            }
        }
        return xmlhttp;
    }
    xmlhttp = CreateXMLHttp();
    xmlhttp.open("get","http://www.cnblogs.com",true);
    xmlhttp.onReadyStateChange = getResult;
    xmlhttp.send(null);
    function getResult(){
        if(xmlhttp.readyState == 4){
            alert(xmlhttp.responseText);
        }
    }

  看似一切都OK了,可是有没有想过,如果HTML代码在网络传输过程中出错了,或者我们指定的地址失效会怎么样呢。这个时候就需要用到status属性,即由服务器返回的 HTTP 状态代码。 xmlhttp.status 等于200时表示传输过程完整没有错误。具体的HTTP状态代码什么意思可以到W3C组织网站上看看,地址http://www.w3.org /Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 。

  把getResult()方法写成下面这样我觉的就真的OK了。

 function getResult(){
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
   alert(xmlhttp.responseText);
  }
 }

分享到:
评论

相关推荐

    ajax基础学习资料

    Ajax的基础知识点主要包括以下几个方面: 1. **XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest对象,它是JavaScript内置的对象,允许浏览器向服务器发送异步HTTP请求。创建一个XMLHttpRequest对象,然后设置其...

    ajax基础知识总结

    学习ajax基础知识,让自己的前端技术更上一层,学会与后台交互

    ajax 的基础学习

    AJAX原理介绍 博文链接:https://bblove.iteye.com/blog/249360

    学习ajax的文档——ajax基础文档

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这个技术由JavaScript实现,通常与...通过不断实践和深入学习,你将能够运用Ajax创造出更多优秀的Web项目。

    Ajax基础入门简介

    **Ajax基础入门简介** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的出现极大地提升...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    - **W3Schools**:提供Ajax基础教程和实例,适合初学者:https://www.w3school.com.cn/ajax/ - **jQuery 和 Axios**:学习Ajax时,可以了解jQuery的$.ajax()方法和现代JavaScript库Axios,它们都提供了更方便的接口...

    Ajax学习资料 Ajax

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够...在学习过程中,可以结合实例代码进行实践,加深对Ajax的理解,并逐步掌握其在实际项目中的应用。

    csdn 图书 Ajax基础教程.chm

    《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...

    Ajax基础实例讲解

    在Ajax的基础实例中,通常包括以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,它是浏览器提供的一个内置对象,用于在后台与服务器通信。在JavaScript中,我们可以通过`new XMLHttpRequest()`...

    精通Ajax 基础概念.核心技术与典型案例

    ## **一、Ajax基础概念** 1. **异步通信**:Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信,不阻塞用户对页面的操作。 2. **局部刷新**:Ajax可以只更新网页的部分区域,而不是整个页面...

    Ajax基础学习资料

    ### Ajax基础学习资料知识点解析 #### 一、Ajax概述 **定义:** Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术组合,通过在后台与服务器进行少量数据交换,使得网页能够异步更新。这...

    ajax入门基础教程

    在学习AJAX的过程中,新手需要从基础开始,逐步了解如何通过JavaScript创建XMLHttpRequest对象,并用它发起请求、接收响应。同时,新手还要学习如何处理服务器返回的数据,这通常涉及解析XML或JSON格式的数据。 ...

    Ajax全套学习教程

    一、Ajax基础知识 1.1 Ajax的工作原理:Ajax通过JavaScript与服务器进行异步通信,用户在页面上执行操作时,后台可以发送请求获取数据,然后在不刷新页面的情况下更新指定区域的内容。 1.2 XMLHttpRequest对象:Ajax...

    ajax基础学习文档

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过不断学习和实践,我们可以更好地利用Ajax来构建更加高效和用户友好的Web应用。

    Ajax学习资料+实例

    1. **Ajax基础** - **Ajax简介**:Ajax的主要优点在于它可以实现页面的局部更新,提高网页的响应速度,减少用户的等待时间。它通过JavaScript在后台与服务器通信,无需用户感知,实现了无刷新的数据交互。 - **...

    精通Ajax_基础概念_核心技术与典型案例

    精通Ajax——基础概念、核心技术与典型案例 人民邮电出版社 本书主要介绍Ajax技术的组成元素,涉及JavaScript、CSS、DOM、XMLHTTP和XML等内容,其中详细介绍了JavaScript客户端语言,它是Ajax技术的核心组成,是...

    14ajax课程_AJAX基础_

    **AJAX基础详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得网页能够实现异步数据交换,无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识,帮助你理解其...

    学习AJAX基础知识

    ### 学习AJAX基础知识:理解现代Web应用的基石 #### AJAX:重新定义Web应用的交互体验 在探讨AJAX的基础知识之前,我们先要理解它为何能够在过去十几年间成为Web开发领域的一颗璀璨明星。AJAX,全称为Asynchronous...

    ajax简介及入门基础

    **Ajax 简介** Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。它并不是一项全新的技术,而是由一系列成熟的技术组合而成,包括JavaScript、DOM...

    ajax基础学习总结及例子

    **Ajax基础学习总结及例子** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建异步通信请求,与服务器交换数据并...

Global site tag (gtag.js) - Google Analytics