转载▼标签： ajaxxmlhttprequest | 分类：Web |
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()
二、 向服务器发送请求：
XMLHttpRequest对象有两个相关方法：
1. open()用于
初始化HTTP请求参数，但并不发送；
语法：
open(method, url, async, username,password)
下面来看看每个参数代表的含义：
1）method：取值可为
GET、
POST和
HEAD。这里重点讨论前两个。
在之前的一篇博文（
http://blog.sina.com.cn/s/blog_6ccd0a110101002h.html）中，提到关于HTML中
表单（form）标签的用法，当需要提交用户输入的时候，需要设置form标签中的action和method属性。其中
action属性的值指定了目标页面，而
method属性的值（GET或POST）则指定了发送信息的方式。
表单属性中的method和XMLHttpRequest中open()方法的method参数是相同含义。
**************************************************************************************************
下面来看看这两种请求方式的区别：
在客户端：
- GET方式使用URL提交数据，就是说提交的数据会附加在目标URL后，以"?"与URL分开，字符数字原样发送，空格替换为"+"，其余字符使用%XX替换（XX是该字符对应的ASCII码）。
- POST方式则是将请求的数据放置在HTTP HEADER中提交。
基于上述原因，
GET方式对于提交数据有1024字节的限制，而POST方式则没有（
因此上传文件只能使用POST方式）；且
POST方式要比GET方式要安全，因为GET方式发送的数据是会显示在地址栏的。
更多GET和POST请求方式的区别，见
http://net138.blog.163.com/blog/static/28373415200922932453486/
**************************************************************************************************
注：当选择请求方式为“POST”时，需要使用
2）url：指定了
请求的目标文件地址。
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对象返回。
**************************************************************************************************
附一个示例，读取一个XML文件，并改写当前页面的内容：
<html>
<head>
<scripttype="text/javascript">
var xmlhttp;
//
函数主体
function loadXMLDoc(url)
{
}
//
readyState递增时的监测函数，当"readyState==4"且"status=200"时，执行相应操作
function state_Change()
{
}
</script>
</head>
<bodyοnlοad="loadXMLDoc('/example/xdom/test_xmlhttp.txt')">
<div id="T1" style="border:1px solidblack;height:40;width:300;padding:5"></div><br/>
<buttonοnclick="loadXMLDoc('/example/xdom/test_xmlhttp2.txt')">Click</button>
</body>
</html>
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
