原生JS实现Ajax的GET POST请求

最新推荐文章于 2024-06-26 08:42:55 发布
最新推荐文章于 2024-06-26 08:42:55 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： ajax javascript 文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengQunBin/article/details/78107245
版权
本文探讨了传统web交互的缺陷，即每次交互都要返回完整HTML页面，导致资源浪费和响应慢。Ajax的出现解决了这个问题，允许网页在不完全刷新的情况下更新部分内容。文中介绍了Ajax的GET和POST请求实现，并强调了异步请求的重要性。
摘要由CSDN通过智能技术生成

传统方法的的缺陷

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

Ajax出现

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Get请求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="showInfo"></div>
        <form
最低0.47元/天 解锁文章
honghong.zhou
关注
专栏目录
原生ajax请求
罗先生
07-12 2796
原生ajax的步骤： 1.创建一个XMLHttpRequest的对象. 2.通过open（）与服务器建立连接。 3.使用send（） 来发送请求。 4.使用onreadystatechange事件来监听。如果表示readystate4就说明解析成功， 且status200(状态码成功)，就说明与后台搭建成功。 5.使用responseText来获取服务器返回的数据 兼容： IE6以下 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建
原生javascript实现ajax 发送post请求
05-27
原生javascript实现ajax发送pos请求,这样可以脱离jquery框架，
原生 JS Ajax,GET和POST 请求实例代码
10-22
主要介绍了原生 JS Ajax,GET和POST 请求实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
javascript基础从小白到高手系列一千三百五十九：GET 请求
最新发布
wanmeijuhao的博客
06-26 351
假如没有发送Content-Type 头部，PHP 的全局$_POST 变量中就不会包含数据，而需要通过。在这个函数中，来自ID 为"user-info"的表单中的数据被序列化之后发送给了服务器。请求体中携带提交的数据，而GET 请求则不然。POST 请求的请求体可以包含非常多的数据，而且数据。第二个最常用的请求是POST 请求，用于向服务器发送应该保存的数据。步是创建对应格式的字符串。最常用的请求方法是GET 请求，用于向服务器查询某些信息。默认情况下，对服务器而言，POST 请求与提交表单是不一样的。
几种请求之原生ajax请求
weixin_43028853的博客
12-05 510
js ajax 请求get 请求post 请求总结:为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了 get 请求 //1.创建异步对象 var ajax = new XMLhttpRequest(); //2.设置请求参数 请求方式 和 请求地址 ajax .open ('get','xxxx/xxxx?xx=xxxx'); //3.发送请求 ajax.send(); //4...
原生Ajax请求
kochiya_的博客
02-27 194
Ajax ​ Asynchronous Javascript And XML(异步JavaScript和XML); 获取Ajax请求对象 方式一: function getXhr(){ var xhr = null; if(window.XMLHttpRequest){//针对其他浏览器 xhr = new XMLHttpRequest(); }else{//针对低版本的ie浏览器 xhr = new ActiveXObject(
原生JS实现ajax与ajax的跨域请求实例
11-27
以下是如何使用原生JavaScript实现一个简单的AJAX请求的步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，我们首先需要创建一个XMLHttpRequest对象，它是AJAX的核心，用于与服务器进行异步通信。 ```...
原生JavaScript实现Ajax异步请求
10-18
原生JavaScript实现Ajax异步请求是前端开发中的一项基本技能，尤其在理解网络通信和优化性能时至关重要。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），它允许网页在不重新加载整个页面的情况下...
原生Ajax的创建过程
田兴的博客
05-11 4095
创建xhr 核心对象 var xhr=new XMLHttpRequest(); 调用open 准备发送 参数一：请求方式 参数二: 请求地址 参数三：true异步，false 同步 xhr.open('post','http://www.baidu.com/api/search',true) 如果是post请求，必须设置请求头。 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 调用s.
原生的AJAX请求
qq_44849271的博客
03-20 8336
AJAX概念 AJAX全称：Asynchronous Javascript And XML。AJAX并不是一种新的编程语言，是一种技术。AJAX实现了页面不需要刷新也能获取数据。 使用AJAX技术，关键在于XMLHttpRequest对象。 AJAX是异步操作 Demo: let xmlhttp=new XMLhttpRequest();//创建 XMLhttpRequest 对象 xmlhttp.open("请求方式","请求资源的地址"); xmlhttp.send();//发送请求 xmlhtt
原生AJAX请求
weixin_62922379的博客
05-15 1099
XML是可扩展标记语言XML被用来传递和存储数据XML和HTML很相似 但是HTML是预定义标签 而XML没有预定义标签大部分是自定义标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值