AJAX----核心XMLHttpRequest对象介绍
2017-06-01 21:02
423 查看
在上篇文章中,我们都知道了AJAX是实现异步通信的,在不刷新界面的情况下,更新数据。XMLHttpRequest是AJAX的基础,又重点学习了一下。当然还是按照经典的5步来学习!
首先再次了解XMLHttpRequest对象的属性和方法。表格内容引用这里
在最前面)
有了了解之后,我们依然按照5步方法来实现一个例子。
接下来就是完成Ajax()函数,先定义一个
通过该函数来异步获取信息,步骤如下:
第一步:创建异步XMLHttpRequest对象
第二步:实例化成功后,使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器url,代码如下
默认情况下,使用XMLHttpRequest对象发送的HTTP请求是异步进行的,但是可以显式地把async参数设置为true,如上面所示。
- 第三步:因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。让readyState值改变时,会激发一个readystatechange事件,可以使用onreadystatechange属性来注册该回调事件处理器,代码如下:
第四步:使用send()方法发送该请求,因为这个请求使用的是HTTP的get方式,所以可以在不指定参数或使用null参数的情况下调用send()方法,代码如下:
第五步:当请求状态改变时,XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此,在处理该相应之前,事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载(readyState的值为4)并且响应已经成功(HTTP状态值200)时,就可以调用一个JavaScript函数,处理该响应内容。代码如下:
最后,单击“提交”按钮后,会发现网页上出现了如下内容,这样就完成了一个Ajax调用。
其中php页面是:
上篇只是ajax的入门,可点击这里查看
这篇讲完是不是对ajax有一个更加清晰的认识呢!
后续将继续跟进ajax知识!
首先再次了解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对象会复位到未初始化的状态。 |
<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知识!
相关文章推荐
- Ajax核心XMLHttpRequest对象、(发送请求、接收)方法和属性介绍、AJAX开发框架、数据格式提要(XML、JSON、HTML)
- Ajax核心XMLHttpRequest对象、(发送请求、接收)方法和属性介绍、AJAX开发框架、数据格式提要(XML、JSON、HTML)
- Ajax核心XMLHttpRequest对象、(发送请求、接收)方法和属性介绍、AJAX开发框架、数据格式提要(XML、JSON、HTML)
- Ajax核心XMLHttpRequest对象、(发送请求、接收)方法和属性介绍、AJAX开发框架、数据格式提要(XML、JSON、HTML)
- AJAX——核心XMLHttpRequest对象
- AJAX—核心XMLHttpRequest对象
- AJAX的初步介绍以及XMLHttpRequest对象的五步使用法
- 【后知后觉】AJAX核心对象——XMLHttpRequest
- Ajax核心对象 XMLHTTPRequest 五步学会使用
- AJAX——核心XMLHttpRequest对象
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
- 艾伟:详解AJAX核心 —— XMLHttpRequest 对象 (上)
- AJAX核心XMLHttpRequest的属性和方法介绍_javascript
- 为何XMLHttpRequest对象是AJAX的核心
- Ajax核心对象-- XMLHttpRequest 对象使用详解
- Ajax核心对象——XMLHttpRequest对象
- 详解AJAX核心 —— XMLHttpRequest 对象
- Ajax核心对象——XMLHttpRequest对象
- XMLHttpRequest对象是AJAX的核心
- Ajax核心--XMLHttpRequest对象