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对象完成操作。
  • 相关阅读:
    关于windows线程的各种状态
    《深入理解计算机系统》(第二版)第二章练习题3
    《深入理解计算机系统》(第二版)第二章中的一练习题2
    Linux进程/线程模型
    用户进程中执行的操作系统
    关于操作系统模型
    《深入理解计算机系统》(第二版)第二章中的一题目
    并发问题互斥(Dekker算法和Peterson算法)
    概率问题:星期二出生的孩子
    Yii添加扩展加载Ckeditor 4.0以上版本
  • 原文地址:https://www.cnblogs.com/wujixing/p/5018906.html
Copyright © 2011-2022 走看看