1、XMLHttpRequest (xhr)

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以 请求服务器上的数据资源。

在jQuery中封装的AJAX函数，就是基于xhr，然后封装出jq中的ajax，然后就可以调用出get、post、ajax()三个方法

在原生中实际上真正用到的，是XMLHttpRequest这个对象

2、使用xhr发起GET无参请求

四个步骤：

①：创建 xhr对象

     //1、创建一个 xhr 的对象let xhr = new XMLHttpRequest()

②：调用 xhr的open()函数（open中传递两个参数，参数一是GET/POST请求方式，参数二是请求的URL地址）

     //2、调用xhr中的open()函数,创建一个Ajax的请求xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

③：调用 xhr.send()函数

     //3、调用xhr的send函数，发起请求xhr.send()

④：监听 xhr.onreadystatechange事件

     //4、监听 onreadystatechange 事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {  //固定写法//数据获取成功，获取服务器响应的数据 console.log(xhr.responseText)}}

xhr发起GET请求的完整代码

 <script>//1、创建一个 xhr 的对象let xhr = new XMLHttpRequest()//2、调用xhr中的open()函数,创建一个Ajax的请求xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')//3、调用xhr的send函数，发起请求xhr.send()//4、监听 onreadystatechange 事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {  //固定写法//数据获取成功，获取服务器响应的数据 console.log(xhr.responseText)}}</script>

xhr 对象的 readyState 属性

XHR对象中的 readyState 属性，用来表示 当前Ajax请求所处的状态。

每个Ajax请求必然处于以下状态的一个：

值	状态	描述
0	UNSENT	xhr对象已被创建，但未调用open方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已被调用，响应头也已经被接收
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

3、使用xhr发起GET有参请求

使用 xhr对象发起带参数的请求，只需要在 调用open()方法期间，为URL地址指定参数即可

代码示例

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

这里在URL后用 ? 进行连接参数，用键值对的方式，=号左边的是键，右边是值，其余与无参GET一致

这种在URL地址后拼接的参数?+参数叫做查询字符串

如果有多个参数传递，参数与参数之间使用 & 符号连接

 let xhr = new XMLHttpRequest()//不带参数的URL地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')//带一个参数的URL地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')//带二个参数的URL地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记')

4、使用xhr发起POST请求

步骤（五步）：

①、创建 xhr 对象

        //1、创建xhr的对象let xhr = new XMLHttpRequest()

②、调用 xhr.open() 函数

        //2、调用open函数('请求类型','url')xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')

③、xhr.setRequestHeader 设置 Content-Type 属性（固定写法）

Content-Type必须写在open()的下面，且语句是固定的

        //3、设置 Content-Type属性（固定写法）xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

④、调用 xhr.send()函数，同时指定要发送的数据

        //4、调用send函数xhr.send('bookname=落日听风&author=我我我&publisher=个人出版社')

⑤、监听 xhr.onreadystatechange事件

        //5、监听事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}

⑥、完整的POST请求

    <script>//1、创建xhr的对象let xhr = new XMLHttpRequest()//2、调用open函数('请求类型','url')xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')//3、设置 Content-Type属性（固定写法）xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//4、调用send函数xhr.send('bookname=落日听风&author=我我我&publisher=个人出版社')//5、监听事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}</script>

JS原生：XMLHttpRequest发送GETPOST请求相关推荐

原生html如何发送网络请求,原生JS向服务器发送GET请求
原生JS向服务器发送GET请求使用Jquery可以很方便的进行GET与POST请求,但是在开发由于一些特殊原因只能使用原生JS进行开发,向服务器发送请求经常会遇见的些问题,本文主要讲解如何使用原生J ...
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战目录上一章下一章上一个任务/上一节下一个任务/下一节实例链接点我目录任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...
【JavaScript】使用XMLHttpRequest发送网络请求
在前端的开发中,有时候没有一些库的支持,如jQuery,Axios.那么就只能使用js提供的原生的方法来发送请求.在这里记录一下我的使用 var url = "userInfo.do?p=4 ...
JS(HTTP页面)发送HTTPS请求、同源策略
今天遇到一个必须在前端HTTP页面发送HTTPS请求的功能,有点小尴尬,这个跨域问题,也没啥好的解决方式,我网上查了一下,也没啥好的方式! 后来总结了一下,有两种方式: 1.a标签 <a hre ...
php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤
注:请求地址是自己的项目地址,请自行更改.这只是一个简单的原生XMLHttpRequst的使用,之后会发如何封装原生ajax实现jequery的ajax 第一步:创建xhr对象.const xhr = ...
原生js ajax请求 post,原生js实现ajax 发送post请求
2019独角兽企业重金招聘Python工程师标准>>> var postData = { "name1": "value1", "n ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...

JS原生：XMLHttpRequest发送GETPOST请求

1、XMLHttpRequest (xhr)

2、使用xhr发起GET无参请求

3、使用xhr发起GET有参请求

4、使用xhr发起POST请求

JS原生：XMLHttpRequest发送GETPOST请求相关推荐

最新文章

热门文章