ajax 第四步

时间 2019-12-01

标签 ajax 第四栏目 Ajax 繁體版

原文原文链接

Ajax和XMLHttpRequest详述

(2011-12-10 16:40:23)

转载▼

标签：

ajax

xmlhttprequest

分类： Web

Ajax： Asynchronous Javascript and XML（异步的Javascript和XML），是基于Javascript和Http请求的

功能是快速建立动态网页，即 在不从新载入整个页面的状况下，对网页的某部分进行更新。

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

Ajax的基础是XMLHttpRequest，这个以前也讲过一些。。。

简单来讲，就是

首先建立一个XMLHttpRequest对象
而后利用该对象向服务器发送请求"（在此时能够经过参数传递的方式向服务器端发送数据），读取服务器端的文件（xml、asp、php等）
最后根据读取的文件内容来更新当前页面的部分区域的内容

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

1、 XMLHttpRequest对象的建立：

在 IE中：

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

Firefox等其余浏览器中：

xmlhttp = new XMLHttpRequest()

2、向服务器发送请求：

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”时，须要使用 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表示 "Not Found"错误。

3. statusText属性与status参数表明的含义相同，只是 该参数使用字符串而不是数字来表示当前状态。

status为200时对应的statusText的值为"OK"；
status为404时对应的statusText的值为"Not Found"。

**************************************************************************************************

3、响应的内容

XMLHttpRequest对象有两个属性来存储响应的内容（应该就是读取的目标文件的内容）： responseText和 responseXML

1. responseText属性：目前为止从服务器端接收到的响应体（不包括头部），若是尚未接收到数据（ 例如readyState<3），则是一个空字符串。

注：若是响应包含了为响应体指定编码的头部，则使用该编码。不然，使用Unicode UTF-8。

2. responseXML属性：对请求的响应，解析为XML并做为Document对象返回。

**************************************************************************************************

附一个示例，读取一个XML文件，并改写当前页面的内容：

<html>

<head>

var xmlhttp;

// 函数主体

function loadXMLDoc(url)

{

xmlhttp=null;

// 初始化XMLHttpRequest对象

if (window.XMLHttpRequest)

{

// Firefox等现代浏览器中的XMLHttpRequest对象建立

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

// IE中的XMLHttpRequest对象建立

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

// 若建立成功，则开始解析目标XML文件

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change; // 指定onreadystatechange事件句柄对应的函数

xmlhttp.open("GET",url,true); // 初始化HTTP请求参数，GET方式，异步请求

xmlhttp.send(null); // 发送请求

}

else

{

alert("Your browser does not 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>

<button onclick="loadXMLDoc('/example/xdom/test_xmlhttp2.txt')">Click</button>

</body>

</html>