原生ajax请求的五个步骤(ajax请求步骤详细代码案例)

要问什么是ajax？通俗的讲就是在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。本文聊一聊原生ajax请求的五个步骤，一个ajax请求步骤详细代码案例，使用xhr发起POST请求，一个非常简单的案例希望助你学

要问什么是ajax？通俗的讲就是在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。本文聊一聊原生ajax请求的五个步骤，一个ajax请求步骤详细代码案例，使用xhr发起POST请求，一个非常简单的案例希望助你学习好ajax请求知识。

步骤1. 创建 xhr 对象

var xhr = new XMLHttpRequest()

步骤2. 调用 open()

xhr.open('POST', 'http://www.xxxxx.com:3359/api/addbook')

步骤 3. 设置 Content-Type 属性（固定写法）

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

步骤4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器

xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

步骤5. 监听 onreadystatechange 事件

xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}

完整的ajax请求步骤详细案例代码：

var xhr = new XMLHttpRequest()xhr.open('POST', 'http://www.xxxxx.com:3359/api/addbook')xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}