ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别

一、ajax的本质其实就是在HTTP协议的基础上以异步的方式与服务器进行通信。

二、ajax的常见的请求方法：

get 、post、put 、delete等

三、ajax请求的实现步骤：

创建XMLHttpRequest对象,也就是创建一个异步调用对象.

创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

设置响应HTTP请求状态变化的函数.

发送HTTP请求.

获取异步调用返回的数据.

使用JavaScript和DOM实现局部刷新.

四、实现

简单的get 请求例子

//创建一个异步请求对象
var xhr = new XMLHttpRequest()
//设置请求头
xhr.open('GET','/api')
//设置请求体
xhr.send(null)
//判断服务器请求响应返回的状态
xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){var result = document.querySelector('.result')result.innerHTML = xhr.responseText}
}

简单的post请求例子


//创建一个异步请求对象
var xhr = new XMLHttpRequest()
//设置请求行
xhr.open('POST','/api')
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//设置请求体
xhr.send("name=cat&age=1")
//判断服务器请求响应返回的状态
xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){var result = document.querySelector('.result')result.innerHTML = xhr.responseText}
}

五、get和post请求的区别

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send('name=cat&age=10')

4、POST需要设置请求头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制

7、GET请求有缓存相对没那么安全，但是可添加到收藏夹上，POST没有缓存，无法添加到收藏夹

上面是本人对Ajax的一点学习总结，希望能帮助到小伙伴们。。。。

ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别相关推荐

ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
ORM中的事务和锁、Ajax异步请求和局部刷新、Ajax文件上传、日期时间类型的Json、多表查询图书系统
一.ORM中的事务和锁事务事务要确保原子性 """ 事务ACID原子性:不可分隔的最小单位一致性:跟原子性是相辅相成隔离性:事务之间相互不干扰持久性:事务一旦确认永久 ...
HTML发送异步请求,使用原生JS发送ajax异步请求
Ajax Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术).当我们向服务器发起请求的时候,服务器不会像浏览器响应整个页面,而是只有 ...
html ajax请求怎么用,如何使用ajax，ajax请求的五个步骤
有很多童鞋,在WEB前端面试的时候,常会被Ajax问题难住,其实Ajax没有你们理解的那么难,现在源码时代H5学科讲师带着大家重新来回顾一下知识点:随便再给大家普及一下小常识,今天咱们聊的就是怎么快速 ...
ajax提交相对路径报错,ajax提交请求为啥url要用这个函数encodeURI
参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式例如:ajax提交到后台的,就需要对url进行encodeURI编码, 否则,会导致后台出现各种乱码,不加en ...
php ajax session失效,PHP中解决ajax请求session过期退出登录问题
1.session过期,如果直接是url请求,或者用户在打开的系统页面中直接清除缓存及cookie信息,可直接在php的入口文件中调用以下封装的方法,进行session信息判断以及页面的跳转,如: i ...
ajax communication failed,Extjs4，等待ajax请求
我应该在一个按钮点击运行多个ajax请求,但所有的请求应该等到第一个执行.我曾试图把所有请求中的第一个成功的回调,但是这给了这个错误:Extjs4,等待ajax请求 TypeError: o is u ...
Ajax调用springboot接口,Springboot解决ajax+自定义headers的跨域请求问题.pdf
Springboot解解决决ajax+自自定定义义headers的的跨跨域域请请求求问问题题 1..什什么么是是跨跨域域由于浏览器同源策略 (同源策略,它是由Netscape提出的一著名的安全策略 ...
ajax请求传递参数的方式,Ajax请求一般处理程序参数传递的几种方式
简介这篇文章主要介绍了Ajax请求一般处理程序参数传递的几种方式以及相关的经验技巧,文章约869字,浏览量397,点赞数3,值得参考! //第一种Ajax请求 $.ajax({ type:" ...
jQuery ajax请求两次问题,jquery ajax请求了两次问题
页面有一个请求form: 订单编号用户帐户发货状态请选择未发送已发送查询 JavaScript请求部分: function showdatalist() { var username = ...

ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别

一、ajax的本质其实就是在HTTP协议的基础上以异步的方式与服务器进行通信。

二、ajax的常见的请求方法：

三、ajax请求的实现步骤：

四、实现

五、get和post请求的区别

ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别相关推荐

最新文章

热门文章

ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别

一、ajax的本质其实就是在HTTP协议的基础上以异步的方式与服务器进行通信。

二、ajax的常见的请求方法 ：

三、ajax请求的实现步骤：

四、实现

五、get和post请求的区别

ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别相关推荐

最新文章

热门文章

二、ajax的常见的请求方法：