原生ajax超详细讲解

最新推荐文章于 2022-08-09 19:13:53 发布
原创 最新推荐文章于 2022-08-09 19:13:53 发布 · 452 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #javascript #前端

本文探讨了HTTP中的GET和POST方法在处理表单提交时的应用。GET方法适用于数据量小的场景，可通过手动或表单序列化方式拼接参数。对于不在表单内的数据提交，可以考虑将数据转换为查询字符串附加到URL。POST方法更适合大量数据或敏感信息的传递，能处理复杂表单数据。此外，POST方法还常用于文件上传，通常结合multipart/form-data编码类型实现。

一 ：使用GET方法提交表单

1：表单数据不多，手动拼接get需要的参数(key=value&key=value)

2 ：表单数量较多，手动拼接效率太低，应该使用表单的序列化

所谓表单序列化就是通过一两行代码就可以获取表单中的数据，变成key=value&key=value

3：某些情况，要提交的数据不在表单中，请想办法解决一下

二：使用POST方法提交表单

三：使用POST方法上传文件

基于原生ajax与封装的ajax使用方法(详解)
12-08
当我们不会写后端接口来测试ajax时，我们可以使用node环境来模拟一个后端接口。 1、模拟后端接口可参考网站整站开发小例子，在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express –save，安装express中间件。 2、把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.join(__dirname,'views')); //在views目录下搜索所有模板 app.en
原生ajax调用数据实例讲解
10-23
以下是对原生AJAX调用数据实例的详细解析。 1. 兼容性处理： 在不同的浏览器中，创建XMLHttpRequest对象的方式有所不同。在现代浏览器中，可以通过`new XMLHttpRequest()`来创建，但在旧版的Internet Explorer中，...
原生Ajax讲解
weixin_30954265的博客
01-10 302
典型的http通信：浏览器向服务器发出请求，服务器向客户端返回响应，浏览器重新加载页面，这种不连续的页面加载方式导致用户的体验变得杂乱，缺乏连贯性。 如： 在一般的web应用程序中，用户填写表单字段然后单击submit按钮，然后整个表单发送到服务器，服务器将它转发给处理该表单的脚本（PHP或JAVA），脚本执行完成后再发送回全新的页面。该页面返回的可能是带有已经填充某些数据的新表单的h...
关于原生的Ajax详解
qq_49868258的博客
08-09 559
Ajax的出现揭开了无刷更新页面数据的时代，JavaScript的实用性也得到了巨大的提升，网页可以在不重载的情况下，实现异步更新，而在Ajax出现前，如果你要更新页面数据，就需要重载整个页面，这样也就不难理解Ajax对开发者的意义之重大了，甚至完全可以称只为web开发应用的里程碑。POST请求以报文形式传递参数，把要请求的参数放在请求体中，这样安全性更高，但是相对会消耗更高的资源，POST请求消耗的资源大概是GET请求的两倍，同时必须设置请求头，并将参数放在send()方法中发送。...
Ajax原生详解
weixin_45157968的博客
05-09 154
发送ajax的请求步骤 1、准备XMLHttpRequest类型的对象 2、准备发送，打开与一个网址之间的连接 3、执行发送动作 4、指定 xhr 状态变化事件处理函数 //1.相当于打开了一个浏览器 //本质上XMLHttpRequest 就是JavaScript在Web平台中发送HTTP请求的手段，发送的请求仍然是HTTP请求，同样符合HTTP约定的格式 const xhr = new XMLHttpRequest(); //2.相当于在地...
原生AJAX请求教程
derfyfxh588690的博客
06-06 143
ajax即Asynchronous Javascript And XML，AJAX不是一门的新的语言，而是对现有持术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异步：指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。 XMLHttpRequest 对象 浏览器内建对象，用于在后台与服务器通信...
原生ajax使用
11-29
以下是对原生Ajax使用的详细讲解。 1. **创建XMLHttpRequest对象** 首先，你需要创建一个XMLHttpRequest实例。这是Ajax的基础，所有后续操作都将围绕这个对象进行。 ```javascript var xhr = new XMLHttpRequest...
实例讲解使用原生JavaScript处理AJAX请求的方法
10-22
使用原生JavaScript处理AJAX请求，可以帮助开发者不依赖于外部库，如jQuery，也能有效地实现网络数据的异步交互。 在原生JavaScript中处理AJAX请求主要依靠的是XMLHttpRequest对象。以下是实现原生JavaScript处理...
原生js的ajax和解决跨域的jsonp(实例讲解)
11-27
【原生JS的AJAX与JSONP：实例详解】 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。在...
原生的Ajax技术，包含原生Ajax的所有常用的知识点
08-26
以上就是关于原生Ajax技术的基本知识点，包括创建异步对象、发送请求、处理响应、以及与服务器端的交互。掌握这些内容，你就可以创建基本的Ajax应用，实现在不刷新页面的情况下与服务器进行数据交互。
原生AJAX详解
m0_51281306的博客
04-03 540
// 1.创建一个 XMLHttpRequest 类型的对象 var xhr = null; // 兼容写法 if (window.XMLHttpRequest) { // 标准浏览器 xhr = new XMLHttpRequest(); } else { // IE 6 浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 2.open() 方法开启请求...
ajax原生详解,原生 ajax 详解
weixin_34952628的博客
08-05 360
做过前后端分离的同学，肯定都知道 ajax 这个异步通信方法定义首先肯定是要知道什么是 ajax，毕竟不能保证每个读这篇文章的人都是有前后端分离经验的人(Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器...
ajax原生详解,原生Ajax详解
weixin_32179749的博客
08-05 300
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在(ActiveX控件)。1. XmlHttpRequest对象介绍XmlHttpRequest对象的主要方法：a. void open(String method,String url,Boolen async)用于创建请求参数：method： ...
Ajax 原生ajax详解
boonyaxnn的博客
05-06 548
1、特点：局部刷新，用户体验度高 2、步骤：（1）创建xmlHttpRequest()对象； （2）准备发送； （3）执行发送动作； （4）指定回调函数； 3、get请求方式： （1）无参请求方式 （2）有参请求方式 描述：get请求 拼接地址...
原生AJAX入门讲解
hao123
10-16 605
Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合，目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。关于它的概念，止于此。想了解更多，请前往：http://zh.wikipedia.org/zh/AJAX  优点很明显，利于用户体验，不会打断用户的操作，在不刷
原生Ajax技术讲解
时间在流
12-24 217
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），不是一门新的编程语言，而是一种创建交互式网页应用的网页开发技术。是一种无需重新加载整个网页的情况下能够更新部分网页的技术，类似于我们在百度搜索栏输入数据的时候，每输入文字下面出现不同的内容。 传统的网页(没有使用Ajax），如果想要提交一个表单需要加载整个网页。使用Ajax的...
Ajax原生详解-学习笔记
竹叶轻拂水
12-10 274
原生ajax的属性方法和使用
原生的ajax总结
chelflan's blog
05-16 498
1. 什么是Ajax？ Ajax（Asynchronous Javascript And XML：异步Javascript和XML）在2005年2月被提出。不过Ajax并不是一种新的语言或技术。实际上，它由几种已知的技术组合而成。 Ajax技术的核心是XMLHttpRequest。 XMLHttpRequest 　　它是整个Ajax技术的灵魂。Ajax技术的核心就是异步发送请求，而XML...
axios和ajax的区别详细讲解
最新发布
09-13
### 概念本质 - **Ajax**：即 Asynchronous JavaScript and XML，是一种网页开发技术，借助 JavaScript 和 XML（如今更多使用 JSON），无需重新加载整个页面就能更新部分页面内容，实现异步向服务器发送请求并接收响应，提高页面响应速度和用户体验，有实时更新、表单验证等作用[^2]。 - **Axios**：是用于网络请求的第三方库，对 xhr 进行二次封装，在 nodejs 端还有 http 请求适配器，返回一个 Promise[^1]。 ### 用法层面 - **Ajax**：使用原生 XMLHttpRequest 对象来发送请求，代码较为繁琐，需要手动处理请求状态和错误。示例如下： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); ``` - **Axios**：提供了简洁的 API，使用方便，支持 Promise 语法，可使用 `async/await` 处理异步请求。示例如下： ```javascript axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` ### 功能特性 - **Ajax**：原生功能相对基础，处理复杂请求和响应时需手动编写较多代码。 - **Axios**：具备更多高级功能，如拦截请求和响应、自动转换 JSON 数据、取消请求、客户端支持防止 CSRF/XSRF 等。以下是拦截器示例： ```javascript // 请求拦截器 axios.interceptors.request.use(config => { config.headers['Authorization'] = 'Bearer your_token'; return config; }, error => { return Promise.reject(error); }); // 响应拦截器 axios.interceptors.response.use(response => { return response; }, error => { return Promise.reject(error); }); ``` ### 兼容性 - **Ajax**：基于原生 XMLHttpRequest，兼容性好，在较旧浏览器也能使用。 - **Axios**：依赖 Promise，在不支持 Promise 的旧浏览器中需使用 polyfill 来保证兼容性。 ### 跨域处理 - **Ajax**：处理跨域请求时，需服务器端配合设置 CORS 或使用 JSONP 等方式，实现相对复杂。 - **Axios**：同样依赖服务器端设置 CORS，但使用方式更简单，与其他请求逻辑一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

测试的自我修养

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值