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对象完成操作。
原文地址:https://www.cnblogs.com/wujixing/p/5018906.html