Ajax XHR请求

这篇具有很好参考价值的文章主要介绍了Ajax XHR请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


AJAX 向服务器发送请求请求

Ajax XHR请求

XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

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

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 将请求发送到服务器。
string:仅用于 POST 请求

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求:

实例文章来源地址https://www.toymoban.com/news/detail-426227.html

xmlhttp.open("GET", "/try/ajax/demo_get.php", true);
xmlhttp.send();

在上面的例子中,您可能得到的是缓存的结果。

为了避免这种情况,请向 URL 添加一个唯一的 ID:

实例

xmlhttp.open("GET", "/try/ajax/demo_get.php?t=" + Math.random(), true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

实例

xmlhttp.open("GET", "/try/ajax/demo_get.php?fname=Henry&lname=Ford", true);
xmlhttp.send();

POST 请求

一个简单 POST 请求:

实例

xmlhttp.open("POST", "/try/ajax/demo_post.php", true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

实例

xmlhttp.open("POST", "/try/ajax/demo_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

url 服务器上的文件

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

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

异步 True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

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

Async=true

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

实例

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "/try/ajax/ajax_info.txt", true);
xmlhttp.send();

您将在稍后的章节学习更多有关 onreadystatechange 的内容。

Async = false

如需使用 async=false,请将 open() 方法中的第三个参数改为 false:

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。

请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

注意:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

实例

xmlhttp.open("GET", "/try/ajax/ajax_info.txt", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

到了这里,关于Ajax XHR请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • c# 设置代理服务器发送http请求

    2024年02月16日
    浏览(43)
  • 在前端html页面中向服务器发送post登录请求

    目录 前言 搭建服务器 搭建前端登录页面 获取表单值 使用axios发送post登录请求 前言 一般在html页面中向服务器发送post请求的模块为登录请求,本文将介绍如何向服务器发送post请求 搭建服务器 如何搭建服务器请看JWT认证这篇文章,有详细的解说。这里之所以使用JWT认证是因

    2024年02月08日
    浏览(43)
  • Ajax XHR请求

    XMLHttpRequest 对象用于和服务器交换数据。 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或

    2023年04月26日
    浏览(26)
  • C# 通过 HttpWebRequest发送数据以及服务器通过Request请求获取数据

    C#中HttpWebRequest的用法详解 可参考: C#中HttpWebRequest的用法详解 C# HttpWebRequest详解 C# 服务器通过Request获取参数 可参考: C# WebService 接口 通过Request请求获取json参数 1、后台程序发送HTTP请求的Class,服务器端也要添加该类 2、服务端返回HTTP请求的数据class,客户端也要有 1、后台

    2024年02月06日
    浏览(55)
  • uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫

    前言 刚刚接触uni-app时候想着直接使用axios发请求,可以发送成功但是请求头有点问题 后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-(浏览器环境发送不了请求,不兼容) 为什么不直接用uni.request()发送请求,是因为每次请求都要写一次添加请求头不合理 后面

    2024年02月16日
    浏览(57)
  • 对读取的Excel文件数据进行拆分并发请求发送到后端服务器

    首先,我们先回顾一下文件的读取操作: 本地读取Excel文件并进行数据压缩传递到服务器-CSDN博客 第一步:根据以上博客,我们将原先的handleFile方法,改为以下内容: 先对data数据进行打印,获取到一千多行的数据信息 那么如何对1000多条信息进行分组处理呢???  因为我

    2024年01月23日
    浏览(46)
  • ajax请求——XMLHttpRequest请求

     个人练习笔记-----Ajax01 一、GET  https://v5.crmeb.net/api/groom/list/3?page=1limit=9  ------协议:// 域名 / 地址?参数 1.xhr.open(\\\"GET\\\",\\\"https://v5.crmeb.net/api/groom/list/3?page=1limit=9\\\");对应的参数从下图中所示中获取 2.xhr.setRequestHeader(\\\"Content-Type\\\",\\\"application/json\\\");//验证身份 xhr.setRequestHeader(\\\"Authori-Z

    2024年02月03日
    浏览(44)
  • (保姆级解决方案)微信小程序【真机预览】无法向服务器发送请求(实测有效)

    问题描述:微信小程序“打开调试模式可以发出请求,关闭调试模式无法发出请求” 1 获取uni-cloud官网提供的request合法域名  这个获取request合法域名是针对使用uni-cloud云开发的小程序。如果使用其它合法域名,同样可以按照下面的方法解决问题。  uni-app官网  2 在微信小程

    2024年02月05日
    浏览(60)
  • Python向带有SSL/TSL认证服务器发送网络请求小实践(附并发http请求实现asyncio+aiohttp)

    最近工作中遇到这样的一个场景:给客户发送文件的时候,为保证整个过程中,文件不会被篡改,需要在发送文件之间, 对发送的文件进行签名, 而整个签名系统是另外一个团队做的, 提供了一个接口服务完成签名,但访问这个接口需要提供他们团队提供的证书链先进行认

    2024年04月16日
    浏览(43)
  • Flask框架小程序后端分离开发学习笔记《4》向服务器端发送模拟请求-爬虫

    Flask是使用python的后端,由于小程序需要后端开发,遂学习一下后端开发。 下面代码,是一个比较老的版本了,可以借鉴一下。 最后尝试请求豆瓣的网页,并未得到,我怀疑是有反爬手段,我们的请求数据还有很多东西没加进去,所以看起来不像是浏览器发送的请求,后续会

    2024年01月20日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包