zoukankan      html  css  js  c++  java
  • AJAX开发技术--AJAX简介

    Asynchronous  JavaScript and XML,异步JavaScript和XML

    主要目的用于页面的局部刷新。不用全部刷新,提高性能。

    在AJAX中主要是通过XMLHttpRequest对象处理发送异步请求和处理回应的,此对象最早是在IE 5中以ActiveX组件的形式出现的,一直到2005年之后才被广泛的使用,而如果要想创建一个XMLHttpRequest对象必须使用JavaScript。
     

    创建XMLHttpRequest对象 —— create_ajax.htm :

    <script language="JavaScript">
        var xmlHttp ;                    // AJAX核心对象名称
        function createXMLHttp() {            // 创建XMLHttpRequest核心对象
            if (window.XMLHttpRequest) {        // 判断当前使用的浏览器类型
                xmlHttp = new XMLHttpRequest();// 表示使用的为FireFox内核的浏览器
            } else {                    // 表示使用的是IE内核的浏览器
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
            }
        }
    </script>

    XMLHttpRequest对象的属性 :

    No.

    属性

    描述

    1

    onreadystatechange

    指定当readState状态改变时使用的操作,一般都用于指定具体的回调函数

    2

    readyState

    返回当前请求的状态,只读

    3

    responseBody

    将回应信息正文以unsigned byte数组形式返回,只读

    4

    responseStream

    以Ado Stream对象的形式返回响应信息,只读

    5

    responseText

    接收以普通文本返回的数据,只读

    6

    responseXML

    接收以XML文档形式回应的数据,只读

    7

    status

    返回当前请求的http状态码,只读

    8

    statusText

    返回当前请求的响应行状态,只读

    readState取值:

    对readState一共有五种取值,分别是:
    0:请求没有发出(在调用open()函数之前之前)。
    1:请求已经建立但还没有发出(调用send()函数之前)。
    2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
    3:请求已经处理,正在接收服务器的信息,响应中通常有部分数据可用,但是服务器还没有完成响应。
    4:响应已完成,可以访问服务器响应并使用它。 

    XMLHttpRequest对象的方法 :

    No.

    方法

    描述

    1

    abort()

    取消当前所发出的请求

    2

    getAllResponseHeaders()

    取得所有的HTTP头信息

    3

    getResponseHeader()

    取得一个指定的HTTP头信息

    4

    open()

    创建一个HTTP请求,并指定请求模式,例如:GET请求或POST请求

    5

    send()

    将创建的请求发送到服务器端,并接收回应信息

    6

    setRequestHeader()

    设置一个指定请求的HTTP头信息

    使用异步处理 —— ajax_receive_content.htm :

    <html><head><title>www.mldnjava.cn,MLDN高端Java培训</title></head><body>
    <script language="JavaScript">
        var xmlHttp ;                // AJAX核心对象名称
        function createXMLHttp() {            // 创建XMLHttpRequest核心对象
            if (window.XMLHttpRequest) {        // 判断当前使用的浏览器类型
                xmlHttp = new XMLHttpRequest();    // 表示使用的为FireFox内核的浏览器
            } else {                // 表示使用的是IE内核的浏览器
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ; 
            }
        }
        function showMsg(){
            createXMLHttp() ;            // 建立xmlHttp核心对象
            xmlHttp.open("POST","content.htm");        // 设置一个请求
            // 设置请求完成之后处理的回调函数
            xmlHttp.onreadystatechange = showMsgCallback ;
            xmlHttp.send(null) ;            // 发送请求,不传递任何参数
        }
        function showMsgCallback(){            // 定义回调函数
            if (xmlHttp.readyState == 4) {        // 数据返回完毕
                if (xmlHttp.status == 200) {    // HTTP操作正常
                    var text = xmlHttp.responseText ;    // 接收返回的内容
                    // 设置msg标签元素中要显示的内容为AJAX接收的返回值内容
                    document.getElementById("msg").innerHTML = text ;
                }
            }
        }
    </script><input type="button" onclick="showMsg()" value="调用AJAX显示内容">
    <span id="msg"></span>
    </body></html>

    总结:

    1 使用AJAX可以完成局部刷新操作;
    2 在AJAX中主要是通过XMLHttpRequest对象完成操作。
  • 相关阅读:
    20145308 《信息安全系统设计基础》第3周学习总结
    20145308 《信息安全系统设计基础》第2周学习总结
    20145308 《信息安全系统设计基础》第1周学习总结
    试验箱汇总
    20145202马超《JAVA》预备作业3
    20145202 《信息安全系统设计基础》第14周学习总结
    20145202马超《JAVA》预备作业1
    20145202马超《JAVA》预备作业
    20145202 《信息安全系统设计基础》第13周学习总结(2)
    M4中遇到的问题
  • 原文地址:https://www.cnblogs.com/wujixing/p/5018906.html
Copyright © 2011-2022 走看看