[Ajax-相濡以沫,不如相忘于江湖] Ajax核心: XMLHttpRequest对象
2016-01-28 21:16
621 查看
Ajax应用工作模式/过程:
第一步，初始化XMLHttpRequest对象;
第二步，打开与服务器的连接。打开连接时，指定发送请求的方法: 采用GET或POST; 指定是否采用异步方式;
第三部，设置监听XMLHttpRequest状态改变的事件处理函数;
第四部，发送请求。如采用POST方式发送请求，可发送带参数的请求。
下面给出一个示例: 级联菜单。页面中两个下拉框，选择或改变下拉框1的值将影响下拉框2中所加载的值。
XMLHttpRequest对象定义:
XMLHttpRequest是一套可以在JavaScript、VBScript、JScript等脚本语言中使用的API，它通过HTTP协议异步地向服务器发送请求，获取服务器返回的响应。XMLHttpRequest的用处是: 提供与服务器异步通信的能力。
XMLHttpRequest的方法和属性:
XMLHttpRequest包含了一些基本的属性和方法，XMLHttpRequest正是通过这些属性和方法与服务器通信的。
XMLHttpRequest的方法:
XMLHttpRequest对象的方法并不多，以下是其基本方法:
abort(): 停止发送当前对象。
getAllResponseHeaders(): 获取服务器返回的全部响应头。
getResponseHeader("headerLabel"): 根据响应头的名字，获取对应的响应头。
open("method", "URL"[,asyncFlag[,"userName"[,"password"]]]): 建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要使用用户名、密码，则提供对应的信息。
send(content): 发送请求。其中content是请求参数。
setRequestHeader("label", "value"): 在发送请求之前，先设置请求头。
XMLHttpRequest的属性:
onreadystatechange: 该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。
readyState: 该属性用于获取XMLHttpRequest对象的处理状态。
responseText: 该属性用于获取服务器的响应文本。
responseXML: 该属性用于获取服务器相应的XML文档对象。
status: 该属性是服务器返回的状态吗，只有服务器的响应已经完成时，才会有该状态码。
statusText: 该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。
属性详解:
onreadystatechange:
onreadystatechange属性用于指定XMLHttpRequest对象的状态改变函数。当XMLHttpRequest对象的状态改变时，该函数将被触发。onreadystatechange属性的作用与按钮对象的onclick属性一样，都是事件处理属性。也就是说，XMLHttpRuquest对象是事件源，它可以引发readystatechange事件。当程序讲一个函数引用赋给XMLHttpRequest对象的onreadystatechange属性后，该函数即成为XMLHttpRequest对象的事件处理器。每次XMLHttpRequest发生readystatechange事件，都会触发监听该事件的事件处理器。
readyState:
XMLHttpRequest对象有如下几种状态，这些状态可通过readyState属性获得:
0：XMLHttpRequest对象还没有完成初始化
1：XMLHttpRequest对象开始发送请求
2：XMLHttpRequest对象的请求发送完成
3：XMLHttpRequest对象开始读取服务器的响应
4：XMLHttpRequest对象读取服务器响应结束
XMLHttpRequest对象的这几种状态信息可通过readyState属性读取。每当XMLHttpRequest对象的readyState属性改变时，其onreadystatechange属性指定的方法都会被触发。
status和statusText:
服务器的响应完成后(readyState=4)，依然不能直接获取服务器响应。因为服务器响应也有很多种情况。为了判断服务器的响应是否正确，可以检测XMLHttpRequest的status或statusText属性。当服务器的响应正常时，JavaScript才应该读取服务器响应信息，并将响应信息动态加载到目标页面。
服务器常用的状态码及其对应的含义如下:
200：服务器响应正常
304：该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意
400：无法找到请求的资源
401：访问资源的权限不够
403：没有权限访问资源
404：需要访问的资源不存在
405：需要访问的资源被禁止
407：访问的资源需要代理身份验证
414：请求的URL太长
500：服务器内部错误
如果想通过JavaScript获取服务器响应，必须先判断服务器响应是否完成。要判断服务器的响应是否完成，只需判断XMLHttpRequest对象的readyState属性即可，当readyState值为4，代表响应完成；服务器响应完成后，还应判断服务器响应是否正确，要判断服务器响应是否正确，可通过判断XMLHttpRequest对象的status属性进行。当status值为200时，服务器响应正确，否则响应不正常。
发送请求:
发送GET请求:
通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。GET请求将所有请求参数转换成一个查询字符串，并将该字符串添加到请求的URL之后，因而可在请求的URL后看到请求参数名、请求参数值。如果将某个表单的action属性设置为GET，则请求会将表单中个字段的名和值转换为字符串，并附加到URL之后。
GET 和 POST异同:
GET请求传送的数据量较小，一般不能大于2KB。POST传送的数据量较大，通常认为POST请求参数的大小不受限制，但往往取决于服务器的限制。通常来说，POST请求的数据量总比GET请求的数据量大。
POST请求则通过HTTP POST机制，将请求的参数以及对应的值放在HTML Header中传输，用户看不到明码的请求参数值。
当使用Ajax发送异步请求时，建议使用POST请求，而不是GET请求。发送GET请求需注意如下两点:
通过open方法开与服务器的连接时，设置使用GET方法。
如需要发送请求参数，应将请求参数转成查询字符串，并追加到请求URL之后。
注意:
虽然GET请求的请求参数附加在URL之后的，但使用send方法时，还是应该为send方法传入参数。如果调用send方法时无须发送请求参数，则使用null作为参数即可。
发送POST请求:
POST请求的适应性更广，可使用更大的请求参数，且POST请求的请求参数通常不能直接看到。
发送POST请求通常需要一下三个步骤:
第一步，使用open方法打开连接时，指定使用POST方式发送请求；
第二步，设置正确的请求头，POST请求通常应设置Content-Type请求头；
第三步，发送请求，把请求参数转换为查询字符串，将该字符串作为send()方法的参数。
注意: 使用POST方法发送请求，一样可以将请求参数附加到URL之后。
第一步，初始化XMLHttpRequest对象;
第二步，打开与服务器的连接。打开连接时，指定发送请求的方法: 采用GET或POST; 指定是否采用异步方式;
第三部，设置监听XMLHttpRequest状态改变的事件处理函数;
第四部，发送请求。如采用POST方式发送请求，可发送带参数的请求。
下面给出一个示例: 级联菜单。页面中两个下拉框，选择或改变下拉框1的值将影响下拉框2中所加载的值。
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest -- Test</title>
</head>
<body>
<select name="first" id="first" onchange="change(this.value);">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
</select>
<select name="second" id="second"></select>
<div id="output"></div>
<script type="text/javascript">
// 定义XMLHttpRequest对象
var xmlrequest;
// 初始化XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlrequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
function change(id) {
// 初始化XMLHttpRequest对象
createXMLHttpRequest();
// 设置请求相应的URL
var uri = "second.jsp?id=" + id;
// 打开与服务器响应地址的连接
xmlrequest.open("POST", uri, true);
// 设置请求头
xmlrequest.setRequestHeader("Content-Type", "application/x-www.form-urlencoded");
// 设置处理相应的回调函数
xmlrequest.onreadystatechange = processResponse;
// 发送请求
xmlrequest.send(null);
}
// 定义处理响应的回调函数
function processResponse() {
// 响应完成且响应正常
if (xmlrequest.readyState == 4) {
if (xmlrequest.status == 200) {
var cities = xmlrequest.responseText.split('$');
var displaySelect = document.getElementById("second");
displaySelect.innerHTML = null;
for (var i=0; i<cities.length; i++) {
var opt = document.createElement("option");
opt.innerHTML = cities[i];
displaySelect.appendChild(opt);
}
// 信息已经成功返回，开始处理信息
//var headers = xmlrequest.getAllResponseHeaders();
// 通过警告框输出响应头
//alert("响应头类型: " + typeof headers + "\n" + headers);
// 在页面输出所有响应头
//document.getElementById("output").innerHTML = headers;
}
} else {
// 页面不正常
//window.alert("状态信息: " + xmlrequest.readyState + " -- 服务器响应状态信息: " + xmlrequest.status + "-- 服务器状态信息描述: " + xmlrequest.statusText + "-- 请求页面有异常!");
}
}
</script>
</body>
</html>XMLHttpRequest对象定义:
XMLHttpRequest是一套可以在JavaScript、VBScript、JScript等脚本语言中使用的API，它通过HTTP协议异步地向服务器发送请求，获取服务器返回的响应。XMLHttpRequest的用处是: 提供与服务器异步通信的能力。
XMLHttpRequest的方法和属性:
XMLHttpRequest包含了一些基本的属性和方法，XMLHttpRequest正是通过这些属性和方法与服务器通信的。
XMLHttpRequest的方法:
XMLHttpRequest对象的方法并不多，以下是其基本方法:
abort(): 停止发送当前对象。
getAllResponseHeaders(): 获取服务器返回的全部响应头。
getResponseHeader("headerLabel"): 根据响应头的名字，获取对应的响应头。
open("method", "URL"[,asyncFlag[,"userName"[,"password"]]]): 建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要使用用户名、密码，则提供对应的信息。
send(content): 发送请求。其中content是请求参数。
setRequestHeader("label", "value"): 在发送请求之前，先设置请求头。
XMLHttpRequest的属性:
onreadystatechange: 该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。
readyState: 该属性用于获取XMLHttpRequest对象的处理状态。
responseText: 该属性用于获取服务器的响应文本。
responseXML: 该属性用于获取服务器相应的XML文档对象。
status: 该属性是服务器返回的状态吗，只有服务器的响应已经完成时，才会有该状态码。
statusText: 该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。
属性详解:
onreadystatechange:
onreadystatechange属性用于指定XMLHttpRequest对象的状态改变函数。当XMLHttpRequest对象的状态改变时，该函数将被触发。onreadystatechange属性的作用与按钮对象的onclick属性一样，都是事件处理属性。也就是说，XMLHttpRuquest对象是事件源，它可以引发readystatechange事件。当程序讲一个函数引用赋给XMLHttpRequest对象的onreadystatechange属性后，该函数即成为XMLHttpRequest对象的事件处理器。每次XMLHttpRequest发生readystatechange事件，都会触发监听该事件的事件处理器。
readyState:
XMLHttpRequest对象有如下几种状态，这些状态可通过readyState属性获得:
0：XMLHttpRequest对象还没有完成初始化
1：XMLHttpRequest对象开始发送请求
2：XMLHttpRequest对象的请求发送完成
3：XMLHttpRequest对象开始读取服务器的响应
4：XMLHttpRequest对象读取服务器响应结束
XMLHttpRequest对象的这几种状态信息可通过readyState属性读取。每当XMLHttpRequest对象的readyState属性改变时，其onreadystatechange属性指定的方法都会被触发。
status和statusText:
服务器的响应完成后(readyState=4)，依然不能直接获取服务器响应。因为服务器响应也有很多种情况。为了判断服务器的响应是否正确，可以检测XMLHttpRequest的status或statusText属性。当服务器的响应正常时，JavaScript才应该读取服务器响应信息，并将响应信息动态加载到目标页面。
服务器常用的状态码及其对应的含义如下:
200：服务器响应正常
304：该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意
400：无法找到请求的资源
401：访问资源的权限不够
403：没有权限访问资源
404：需要访问的资源不存在
405：需要访问的资源被禁止
407：访问的资源需要代理身份验证
414：请求的URL太长
500：服务器内部错误
如果想通过JavaScript获取服务器响应，必须先判断服务器响应是否完成。要判断服务器的响应是否完成，只需判断XMLHttpRequest对象的readyState属性即可，当readyState值为4，代表响应完成；服务器响应完成后，还应判断服务器响应是否正确，要判断服务器响应是否正确，可通过判断XMLHttpRequest对象的status属性进行。当status值为200时，服务器响应正确，否则响应不正常。
发送请求:
发送GET请求:
通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。GET请求将所有请求参数转换成一个查询字符串，并将该字符串添加到请求的URL之后，因而可在请求的URL后看到请求参数名、请求参数值。如果将某个表单的action属性设置为GET，则请求会将表单中个字段的名和值转换为字符串，并附加到URL之后。
GET 和 POST异同:
GET请求传送的数据量较小，一般不能大于2KB。POST传送的数据量较大，通常认为POST请求参数的大小不受限制，但往往取决于服务器的限制。通常来说，POST请求的数据量总比GET请求的数据量大。
POST请求则通过HTTP POST机制，将请求的参数以及对应的值放在HTML Header中传输，用户看不到明码的请求参数值。
当使用Ajax发送异步请求时，建议使用POST请求，而不是GET请求。发送GET请求需注意如下两点:
通过open方法开与服务器的连接时，设置使用GET方法。
如需要发送请求参数，应将请求参数转成查询字符串，并追加到请求URL之后。
注意:
虽然GET请求的请求参数附加在URL之后的，但使用send方法时，还是应该为send方法传入参数。如果调用send方法时无须发送请求参数，则使用null作为参数即可。
发送POST请求:
POST请求的适应性更广，可使用更大的请求参数，且POST请求的请求参数通常不能直接看到。
发送POST请求通常需要一下三个步骤:
第一步，使用open方法打开连接时，指定使用POST方式发送请求；
第二步，设置正确的请求头，POST请求通常应设置Content-Type请求头；
第三步，发送请求，把请求参数转换为查询字符串，将该字符串作为send()方法的参数。
注意: 使用POST方法发送请求，一样可以将请求参数附加到URL之后。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP中 SQL语句 使用方法第1/3页
- 身份证复印件的正确使用方法 身份证防被盗用
- h1标签的使用技巧
- 惰性函数定义模式 使用方法第1/3页
- JS event使用方法详解
- XMLHTTPRequest的属性和方法简介
- js 使用方法与函数 总结第1/4页
- JQuery1.6 使用方法三
- jquery里的each使用方法详解
- jQuery1.6 使用方法二
- 各种AJAX方法的使用比较详解
- 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
- ajax 入门基础之 XMLHttpRequest对象总结
- JSP XMLHttpRequest动态无刷新及其中文乱码处理
- Ajax xmlHttpRequest的status的值的含义
- JavaScript Try...Catch 声明的 使用方法
- c#进度条 progressBar 使用方法的小例子
- php模拟asp中的XmlHttpRequest实现http请求的代码
- JavaScript For...In 使用方法
- base href 使用方法详解