Ajax和XMLHttpRequest详述

前端之家收集整理的这篇文章主要介绍了Ajax和XMLHttpRequest详述前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


(2011-12-10 16:40:23)
AjaxAsynchronous Javascript andXML(异步的Javascript和XML),是基于Javascript和Http请求的
功能快速创建动态网页,即 在不重新载入整个页面的情况下,对网页的某部分进行更新

使用Ajax的例子:新浪微博,人人网,Google地图。


Ajax的基础是XMLHttpRequest,这个之前也讲过一些。。。
简单来说,就是
  1. 首先创建一个XMLHttpRequest对象
  2. 然后利用该对象向服务器发送请求"(在此时可以通过参数传递的方式向服务器端发送数据),读取服务器端的文件(xml、asp、PHP等)
  3. 最后根据读取的文件内容来更新当前页面的部分区域的内容

下面详细看看这三个步骤:

一、 XMLHttpRequest对象的创建:
IE中:
xmlhttp = newActiveXObject("Microsoft.XMLHTTP")
Firefox等其他浏览器中:
xmlhttp = newXMLHttpRequest()

二、 向服务器发送请求:
XMLHttpRequest对象有两个相关方法
1. open()用于 初始化HTTP请求参数,但并不发送;
语法:
open(method,url,async,username,password)

下面来看看每个参数代表的含义:
1)method:取值可为 GETPOSTHEAD。这里重点讨论前两个。
在之前的一篇博文( 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”时,需要使用 setRequestHeader()方法添加HTTP头。

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对象有两个属性来存储响应的内容(应该就是读取的目标文件内容): responseTextresponseXML

1.responseText属性:目前为止从服务器端接收到的响应体(不包括头部),如果还没有接收到数据( 例如readyState<3),则是一个空字符串。

:如果响应包含了为响应体指定编码的头部,则使用该编码。否则,使用 Unicode UTF-8。

2.responseXML属性:对请求的响应,解析为XML并作为Document对象返回。




**************************************************************************************************
附一个示例,读取一个XML文件,并改写当前页面内容

<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");
}

// 若创建成功,则开始解析目标XML文件
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>
原文链接:https://www.f2er.com/ajax/164090.html

猜你在找的Ajax相关文章