002_XMLHttpRequest对象

1. XMLHttpRequest对象

1.1. XMLHttpRequest是Ajax的基础。XMLHttpRequest对象用于和服务器交换数据。

1.2. XMLHttpRequest对象方法

1.3. XMLHttpRequest对象属性

2. 创建XMLHttpRequest对象

2.1. 所有现代浏览器均支持XMLHttpRequest对象。

2.2. 创建XMLHttpRequest对象的语法:

var xmlHttp = new XMLHttpRequest();

3. 向服务器发送请求

3.1. 如需将请求发送到服务器, 我们使用XMLHttpRequest对象的open()和send()方法:

xmlhttp.open("GET","register.action",true);
xmlhttp.send();

3.2. open 和 send方法描述

4. GET请求

4.1. 一个简单的GET请求:

xmlhttp.open("GET","register.action",true);
xmlhttp.send();

4.2. 在上面的例子中, 您可能得到的是缓存的结果(GET请求有缓存)。为了避免这种情况, 请向URL添加一个唯一的Id:

xmlhttp.open("GET","register.action?t=" + Math.random(),true);
xmlhttp.send();

4.3. 如果您希望通过GET方法发送信息, 请向URL添加信息:

xmlhttp.open("GET","register.action?name=zs&pwd=123",true);
xmlhttp.send();

5. POST请求

5.1. 一个简单POST请求:

xmlhttp.open("POST","register.action",true);
xmlhttp.send();

5.2. 如果需要像html表单那样POST数据, 请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据:

xmlhttp.open("POST","register.action",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=zs&pwd=123");

6. url - 服务器上的地址

6.1. open()方法的url参数是服务器上的地址:

xmlhttp.open("GET","register.action",true);

7. 异步 - True 或 False?

7.1. Ajax指的是异步JavaScript和XML(Asynchronous JavaScript and XML)。

7.2. XMLHttpRequest对象如果要用于Ajax的话, 其open()方法的async参数必须设置为true:

xmlhttp.open("GET","register.action",true);

7.3. 对于web开发人员来说, 发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。Ajax出现之前, 这可能会引起应用程序挂起或停止。

7.4. 通过Ajax, JavaScript无需等待服务器的响应, 而是:

7.4.1. 在等待服务器响应时执行其他脚本。

7.4.2. 当响应就绪后对响应进行处理。

8. Async = true

8.1. 当使用async=true时, 请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数:

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

9. Async = false

9.1. 如需使用async=false, 请将open()方法中的第三个参数改为false:

xmlhttp.open("GET","test1.txt",false);

9.2. 我们不推荐使用async=false, 但是对于一些小型的请求, 也是可以的。

9.3. 如果async=false, JavaScript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢, 应用程序会挂起或停止。这就是同步的结果。

9.4. 当您使用async=false时, 请不要编写onreadystatechange函数, 把要编写的代码放到send()语句后面即可:

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;