前端之家收集整理的这篇文章主要介绍了
Ajax和XMLHttpRequest详述，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Ajax：
Asynchronous Javascript andXML（异步的Javascript和XML），是基于Javascript和Http请求的
功能是
快速创建动态网页，即
在不重新载入整个页面的情况下，对网页的某部分进行更新。
使用Ajax的例子：新浪微博，人人网，Google地图。
Ajax的基础是XMLHttpRequest，这个之前也讲过一些。。。
简单来说，就是
- 首先创建一个XMLHttpRequest对象
- 然后利用该对象向服务器发送请求"（在此时可以通过参数传递的方式向服务器端发送数据），读取服务器端的文件（xml、asp、PHP等）
- 最后根据读取的文件内容来更新当前页面的部分区域的内容
下面详细看看这三个步骤：
一、 XMLHttpRequest对象的创建：
在
IE中：
xmlhttp = newActiveXObject("Microsoft.XMLHTTP")
Firefox等其他浏览器中：
xmlhttp = newXMLHttpRequest()
二、 向服务器发送请求：
1. open()用于
初始化HTTP请求参数，但并不发送；
语法：
open(method,url,async,username,password)
下面来看看每个参数代表的含义：
1）method：取值可为
GET、
POST和
HEAD。这里重点讨论前两个。
表单
属性中的method和XMLHttpRequest中open()
方法的method参数是相同含义。
**************************************************************************************************
下面来看看这两种请求方式的区别：
在客户端：
- GET方式使用URL提交数据，就是说提交的数据会附加在目标URL后，以"?"与URL分开，字符数字原样发送，空格替换为"+"，其余字符使用%XX替换（XX是该字符对应的ASCII码）。
- POST方式则是将请求的数据放置在HTTP HEADER中提交。
基于上述原因，
GET方式对于提交数据有1024字节的限制，而POST方式则没有（
因此上传文件只能使用POST方式）；且
POST方式要比GET方式要安全，因为GET方式发送的数据是会
显示在地址栏的。
**************************************************************************************************
注：当选择请求方式为“POST”时，需要使用
setRequestHeader()方法来添加HTTP头。
3）async：取值为true或者false。指定了请求模式是
同步（false）还是
异步（true）。
- 当async为true时，表示为异步请求。即请求之后，不等待响应，继续执行之后的代码。此时需要规定在响应处于 onreadystatechange事件中的就绪状态时执行的函数。
- 当async为false时，表示为同步请求。即请求之后，要等待完全响应才能继续执行之后的代码。（此种模式容易造成堵塞，因此推荐使用异步请求模式）
2. send()用于
发送HTTP请求。
使用open()
方法中指定的参数，向服务器发送请求。
**************************************************************************************************
XMLHttpRequest对象与发送请求相关的
属性：
readyState、status、statueText
1.readyState属性表示的是
HTTP请求的状态，当一个XMLHttpRequest对象被创建时，这个
属性值从0开始，直到接受到完整的HTTP响应，这个值
增加到4。
0：Uninitialized初始化状态。XMLHttpRequest对象已被创建或已被abort()
方法重置；
1：Open open()
方法已
调用，但send()
方法还没被
调用，请求尚未发送
2：Sent send()
方法已
调用，HTTP请求已发送到服务器，但还没有收到响应
3：Receiving 所有响应头部已经收到。响应体开始接收但尚未完成
4：Loaded HTTP响应已经完全接收。
readyState
属性值不会递减，除非当一个请求在处理过程中
调用了open()或abort()
方法。
每次这个
属性值
增加时，都会
触发onreadystatechange事件句柄。
2.status属性是
由服务器返回的HTTP代码状态。
只能在readyState的值大于或等于3的时候读取，否则会出错。
status的值为
200时，表示
读取成功；而
404表示
"NotFound"错误。
3.statusText属性与status参数代表的含义相同，只是
该参数使用字符串而不是数字来表示当前状态。
- status为200时对应的statusText的值为"OK"；
- status为404时对应的statusText的值为"Not Found"。
**************************************************************************************************
XMLHttpRequest对象有两个
属性来存储响应的
内容（应该就是读取的目标
文件的
内容）：
responseText和
responseXML
1.responseText属性：目前为止从服务器端接收到的响应体（不
包括头部），如果还没有接收到数据（
例如readyState<3），则是一个空字符串。
注：如果响应包含了为响应体指定编码的头部，则使用该编码。否则，使用
Unicode UTF-8。
2.responseXML属性：对请求的响应，解析为XML并作为Document对象返回。
**************************************************************************************************
<html>
<head>
<scripttype="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
//
初始化XMLHttpRequest对象
if (window.XMLHttpRequest)
{
//
Firefox等现代浏览器中的XMLHttpRequest对象创建
xmlhttp=newXMLHttpRequest();
}
else if (window.ActiveXObject)
{
//
IE中的XMLHttpRequest对象创建
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;//
指定onreadystatechange事件句柄对应的函数
xmlhttp.open("GET",true); //
初始化HTTP请求参数，GET方式，异步请求
xmlhttp.send(null);//
发送请求
}
else
{
alert("Your browser doesnot support XMLHTTP.");
}
}
//
readyState递增时的监测函数，当"readyState==4"且"status=200"时，执行相应操作
function state_Change()
{
if (xmlhttp.readyState==4) //
4 = "loaded"
{
if (xmlhttp.status==200)//
200 = "OK"
{
//
responseText属性值是响应体的文本
document.getElementByIdx_x('T1').innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
}
</script>
</head>
<bodyonload="loadXMLDoc('/example/xdom/test_xmlhttp.txt')">
<div id="T1" style="border:1px solidblack;height:40;width:300;padding:5"></div><br/>
<buttononclick="loadXMLDoc('/example/xdom/test_xmlhttp2.txt')">Click</button>
</body>
</html>
