向服务器发送请求如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:Open方法了有两种请求方式——get和post
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
1、无法使用缓存文件(更新服务器上的文件或数据库)
2、向服务器发送大量数据(POST 没有数据量限制)
3、发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
注释:send(string)方法只有当时post请求时才会传入参数
onreadystatechange 事件:当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
GET请求:
<body> <button onclick="loadXMLDoc()">点击发送异步请求</button> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { alert(xmlhttp.responseText); } } xmlhttp.open("get", "person.ashx", true); xmlhttp.send(); } </script> </body>
PSOT请求:
<body> <button onclick="fs()">点击发送异步请求</button> <script> var xmlHttp; function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } function getOkPost() { if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) { // 本地提示:加载中/处理中 } if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { var d = xmlHttp.responseText; // 返回值 // 处理返回值 alert(d); } } function fs() { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert('您的浏览器不支持AJAX!'); return; } var url = "info.ashx"; xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var data = "name=wqx&age=10" xmlhttp.send(data); xmlHttp.onreadystatechange = getOkPost;//发送事件后,收到信息了调用函数 } </script> </body>
参考:W3C