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

来源：互联网发布：知满天教育官网编辑：程序博客网时间：2024/05/20 21:42

在上篇文章中，我们都知道了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知识！

阅读全文

0 0