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;