JS——AJAX
Posted 站错队了同志
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——AJAX相关的知识，希望对你有一定的参考价值。
向服务器发送请求如需将请求发送到服务器，我们使用 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
以上是关于JS——AJAX的主要内容，如果未能解决你的问题，请参考以下文章