AJAX----核心XMLHttpRequest对象介绍

最新推荐文章于 2022-09-03 13:37:15 发布

diligentkong

最新推荐文章于 2022-09-03 13:37:15 发布

阅读量543

点赞数 1

分类专栏： Ajax 文章标签： ajax XMLHttpReq

本文链接：https://blog.csdn.net/diligentkong/article/details/72835227

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在上篇文章中，我们都知道了AJAX是实现异步通信的，在不刷新界面的情况下，更新数据。XMLHttpRequest是AJAX的基础，又重点学习了一下。当然还是按照经典的5步来学习！
首先再次了解XMLHttpRequest对象的属性和方法。表格内容引用这里

在最前面）

属性	说明
readyState	表示XMLHttpRequest对象的状态： 0：未初始化。对象已创建，未调用open； 1：open方法成功调用，但Sendf方法未调用； 2：send方法已经调用，尚未开始接受数据； 3：正在接受数据。Http响应头信息已经接受，但尚未接收完成； 4：完成，即响应数据接受完成。
Onreadystatechange	请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。
responseText	服务器响应的文本内容
responseXML	服务器响应的XML内容对应的DOM对象
Status	服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
statusText	服务器返回状态的文本信息。

参数	详细解释
Open(string method,string url,boolean asynch, string username,string password)	指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method:表示http请求方法，一般使用”GET”,”POST”. url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步；后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
Send(content)	向服务器发出请求，如果采用异步方式，该方法会立即返回。 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串
SetRequestHeader(String header,String Value)	设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。
getAllResponseHeaders()	返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
getResponseHeader(String header)	返回HTTP响应头中指定的键名header对应的值
Abort()	停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

有了了解之后，我们依然按照5步方法来实现一个例子。

<body>
    <input type="button" value="提交" onclick="Ajax()"></input>
    <div id="result"></div>

</body>

接下来就是完成Ajax()函数，先定义一个

function Ajax(){

}

通过该函数来异步获取信息，步骤如下：

第一步：创建异步XMLHttpRequest对象

var xmlHttpReq = null;
    if(window.ActiveXObject){
        // IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest){
        // 除IE5 IE6 以外的浏览器  XMLHttpRequest是window的子对象
        xmlHttpReq = new XMLHttpRequest();// 实例化一个XMLHttpRequest对象
    }

第二步：实例化成功后，使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器url，代码如下

xmlHttpReq.open("get","xmlhttpreq.php",true);

默认情况下，使用XMLHttpRequest对象发送的HTTP请求是异步进行的，但是可以显式地把async参数设置为true，如上面所示。
- 第三步：因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。让readyState值改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器，代码如下：

xmlHttpReq.onreadystatechange=RequestCallBack;// 设置回调函数

第四步：使用send()方法发送该请求，因为这个请求使用的是HTTP的get方式，所以可以在不指定参数或使用null参数的情况下调用send()方法，代码如下：

xmlHttpReq.send(null);// 因为使用get方式提交数据，所以可以使用null作为参数调用

第五步：当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此，在处理该相应之前，事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载(readyState的值为4)并且响应已经成功(HTTP状态值200)时，就可以调用一个JavaScript函数，处理该响应内容。代码如下：

//一旦readyState值改变，将会调用该函数
        function RequestCallBack(){
            if (xmlHttpReq.readyState==4) {
                if (xmlHttpReq.status ==200) {
                    // 将xmlHttpReq.responseText的值赋予id为result的元素
                    document.getElementById('result').innerHTML = xmlHttpReq.responseText;
                }
            }
        }

最后，单击“提交”按钮后，会发现网页上出现了如下内容，这样就完成了一个Ajax调用。
这里写图片描述
其中php页面是：

<?php
    header('content-type:text/html;charset=utf-8');
echo "Hello 我是get请求的数据";
?>

上篇只是ajax的入门，可点击这里查看
这篇讲完是不是对ajax有一个更加清晰的认识呢!
后续将继续跟进ajax知识！

diligentkong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX----核心XMLHttpRequest对象介绍

在上篇文章中，我们都知道了AJAX是实现异步通信的，在不刷新界面的情况下，更新数据。XMLHttpRequest是AJAX的基础，又重点学习了一下。当然还是按照经典的5步来学习！首先再次了解XMLHttpRequest对象的属性和方法。表格内容引用这里在最前面）属性说明 readyState 表示XMLHttpReques
复制链接

扫一扫