JavaScript中最重要的一环之一,ajax发送请求!!

向服务器发送请求

如需向服务器发送请求,我们使用 XMLHttpRequest 对象的 open()send() 方法:

复制代码
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
方法 描述
open(method , url , async) 规定请求的类型 * method:请求的类型:GET 还是 POST * url:服务器(文件)位置 * async:true(异步)或 false(同步)
send() 向服务器发送请求(用于 GET)
send(string) 向服务器发送请求(用于 POST)

GET 还是 POST?

GET 比 POST 更简单更快,可用于大多数情况下。

不过,请在以下情况始终使用 POST:

  • 缓存文件不是选项(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 无大小限制)
  • 发送用户输入(可包含未知字符),POST 比 GET 更强大更安全

一条简单的 GET 请求:

复制代码
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

在上面的例子中,您可能会获得一个缓存的结果。为了避免此情况,请向 URL 添加一个唯一的 ID:

复制代码
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

如果您需要用 GET 方法来发送信息,请向 URL 添加这些信息:

复制代码
xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

一条简单的 POST 请求:

复制代码
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据,请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据:

复制代码
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");
方法 描述
setRequestHeader(header , value) 向请求添加 HTTP 头部 * header:规定头部名称 * value:规定头部值

url - 服务器上的文件

open() 方法的 url 参数,是服务器上文件的地址:

复制代码
xhttp.open("GET", "ajax_test.asp", true);

异步 - true 还是 false?

如需异步发送请求,open() 方法的 async 参数必须设置为 true

复制代码
xhttp.open("GET", "ajax_test.asp", true);

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前,此操作可能会导致应用程序挂起或停止。

通过异步发送,JavaScript 不必等待服务器响应,而是可以:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪时处理响应

onreadystatechange 属性

通过 XMLHttpRequest 对象,您可以定义当请求接收到应答时所执行的函数。

这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的:

复制代码
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

如需执行同步的请求,请把 open() 方法中的第三个参数设置为 false

复制代码
xhttp.open("GET", "ajax_info.txt", false);

有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。

由于代码将等待服务器完成,所以不需要 onreadystatechange 函数:

复制代码
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

同步的 XMLHttpRequest (async = false),因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢,应用程序将挂起或停止。

相关推荐
SugarPPig7 分钟前
PowerShell 查询及刷新环境变量
服务器
良艺呐^O^13 分钟前
uniapp实现app自动更新
开发语言·javascript·uni-app
我的作业错错错3 小时前
搭建私人网站
服务器·阿里云·私人网站
拉不动的猪3 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
烛阴3 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
微网兔子4 小时前
伺服器用什么语言开发呢?做什么用什么?
服务器·c++·后端·游戏
夸克App4 小时前
实现营销投放全流程自动化 超级汇川推出信息流智能投放产品“AI智投“
运维·人工智能·自动化
Rainbond云原生5 小时前
83k Star!n8n 让 AI 驱动的工作流自动化触手可及
运维·人工智能·自动化