在上一篇中我们介绍了如何使用JavaScript创建XMLHttpRequest对象,在本文中将介绍使用XMLHttpRequest发送请求。
向服务器发送数据需要用到两个方法:open()和send()
open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
参数介绍:
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send(string):将请求发送到服务器。
参数介绍:
- string:仅用于 POST 请求
在open方法中,我们需要指定请求的类型,常用的请求类型有GET、POST等,那么什么时候该用GET,什么时候该用POST呢?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。
setRequestHeader(header,value):向请求添加 HTTP 头。
参数介绍:
- header: 规定头的名称
- value: 规定头的值
示例代码:
xmlhttp.open("POST", "ajax_test.asp", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
同步还是异步?
AJAX指的是异步的AJAX和XML,但open方法却可以规定请求是同步或者异步,这为开发者提供了一个灵活的选项。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp.open("GET", "ajax_test.asp", true);
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
异步请求的回调方法
使用同步的请求处理方法比较简单,我们可以直接在send方法之后来获取XMLHttpRequest 的Response:
xmlhttp.open("GET", "test1.txt", false); xmlhttp.send(); document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
但对于异步请求,直接在send方法后面获取Response是不可行的,因为此时服务器还没有返回数据。这个时候,我们就需要为XMLHttpRequest添加onreadystatechange事件,这个事件将监视XMLHttpRequest状态的变化,当检测到请求成功的时候我们即可获取Response数据。
xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "test1.txt", true); xmlhttp.send();
我们将在下一篇中详细介绍readyState和Status。