Ajax

2023-07-09 13:30| 来源: 网络整理| 查看: 265

为了使用 JavaScript 向服务器发送一个 HTTP 请求，你需要一个包含必要函数功能的对象实例。这就是为什么会有 XMLHttpRequest 的原因。

const httpRequest = new XMLHttpRequest();

发送一个请求后，你会收到响应。在这一阶段，你要告诉 XMLHttpRequest 对象由哪一个 JavaScript 函数处理响应，在设置了对象的 onreadystatechange 属性后给它命名，当请求状态改变时调用函数，像这样：

function handler() { // 在这里处理服务器响应。 } httpRequest.onreadystatechange = handler;

要注意的是，函数名后没有括号和参数，因为这是把一个引用赋值给了函数，而不是真正的调用了它。此外，如果不使用函数名的方式，你还可以用 JavaScript 的匿名函数响应处理的动作，就像下面这样：

httpRequest.onreadystatechange = () => { // 在这里处理服务器响应。 };

接下来，声明当你接到响应后要做什么，你要通过调用 HTTP 请求对象的 open() 和 send() 方法发送一个实际的请求，像下面这样：

httpRequest.open("GET", "http://www.example.org/some.file", true); httpRequest.send(); open() 的第一个参数是 HTTP 请求方法——GET，POST，HEAD 以及服务器支持的其他方法。根据 HTTP 标准的要求，保证这些方法一定要是大写字母，否则其他一些浏览器（比如 FireFox）可能无法处理这个请求。更多关于 HTTP 的请求方法，可以查看相关标准。第二个参数是你要发送请求的 URL。由于安全原因，默认不能调用第三方 URL 域名。确保你在页面中使用的是正确的域名，否则在调用 open() 方法时会有 "permission denied" 错误提示。一个容易犯的错误是你企图通过 domain.tld 访问网站，而不是使用 www.domain.tld。如果你真的需要向另一个域名发送请求，可以参考 HTTP 访问控制（CORS）。第三个参数是可选的，用于设置请求是否是异步的。如果设为 true（默认值），即开启异步，JavaScript 就不会在此语句阻塞，使得用户能在服务器还没有响应的情况下与页面进行交互。这就是 AJAX 中的第一个 A。

send() 方法的参数可以是任何你想发送给服务器的内容，如果是 POST 请求的话。发送表单数据时应该用服务器可以解析的格式，像查询字符串：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

或者使用其他格式，类似 multipart/form-data、JSON、XML 等。

如果你使用 POST 数据，那就需要设置请求的 MIME 类型。比如，在调用 send() 方法获取表单数据前要有下面这个：

httpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );

【本文地址】

公司简介

联系我们