发送ajax请求的方式有哪些
一、发送ajax的原理和步骤。
ajax的原理是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。XMLHttpRequest是浏览器内建对象，用于在浏览器后台与服务器通信(交换数据)。因此，可以不用刷新整个页面实现页面的部分更新。
1、创建异步对象
启动浏览器内建对象XMLHttpRequest，用于在浏览器后台与服务器通信(交换数据)。
2、设置请求行
3、设置请求头
4、设置请求体
5、接收返回的数据
5.1、设置响应报文
（1）报文行：状态码200 ok表示当前服务器响应成功。
状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。
1xx：指示信息 —— 表示请求已接收，继续处理。
2xx：成功 —— 表示请求已被成功接收、理解、接受。
3xx：重定向 —— 要完成请求必须进行更进一步的操作。
4xx：客户端错误 —— 请求有语法错误或请求无法实现。
5xx：服务器端错误 —— 服务器未能实现合法的请求。
（2）报文头：服务器给客户端的一些额外的信息。
（3）报文体：4表示返回的数据可以使用。返回responseText：普通字符串。返回responseXML：XML文件。
返回数据的属性有五个状态：
xhr.readyState = 0时，（未初始化）还没有调用send()方法。
xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求。
xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容。
xhr.readyState = 3时，（交互）正在解析响应内容。
xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了。
（4）onreadystatechange 是 Javascript 的事件的一种，其意义在于监听 XMLHttpRequest 的状态是否发生改变。
注：为什么设置请求行、请求头、请求体以及接收返回的数据涉及到了与数据库的连接的知识，由于这里不是重点，所以不做过多的叙述，有兴趣的小伙伴可以去查一下客户端与服务器交互的步骤和原理。
二、原生js发送ajax
1、发送get请求
启动内建对象XMLHttpRequest
var xhr = XMLHttpRequest();
设置请求行
open('get','url?发送的内容（键1=值1，键2=值2…）');
设置请求头
get请求不需要设置请求头
设置请求体
send(null);
监听 XMLHttpRequest 的状态是否发生改变
xhr.onreadystatechange = function(){
if(xhr.status == 200 &&xhr.readyState == 4){
//getAllResponseHeaders:获取所有响应头
//responseText：接收普通字符串
//在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象
//responseXML：专门用来接收服务器返回的xml数据的
//responseXML:获取的结果可以理解为一个dom结构，我们可以使用dom的方式来获取这个返回值是的数据
}
}
2、发送post请求
post请求和get请求基本上都一样，只有设置请求行、请求头和请求体的时候不一样，在此仅指出其中的不同。
设置请求行
open(‘post’，url)；
设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
设置请求体
xhr.send(发送的参数);
代码演示：
在common.js文件中：
function $(id){
return document.getElementById(id);
}
function createXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr= new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
html文件中：
//检测用户名是否存在
function uname_check(){
//1.创建xhr对象
var xhr=createXhr();
//2.监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText; //后端返回的文本 [{"uid":2,"user_name":"当当喵","gender":1}]
//console.log(res);
if(res=="1"){
$("showuname").innerHTML="用户名已占用";
isRegister=false;
}else if($("uname").value==""){
$("showuname").innerHTML="用户名不能为空";
}else{
$("showuname").innerHTML="用户名可注册";
isRegister=true;
}
}
}
//3.打开连接
var uname=$("uname").value;
xhr.open("get","/myPro/ajjquery?uname="+uname,true);
//4.发送连接
xhr.send(null);
}
三、jQuery发送ajax
1、引入jQuery
2、各个参数介绍
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$('form').serialize()序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend:function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）
3、常用格式
$.ajax({
type:'请求类型’,
url:'请求地址’,
data:{},
dataType:’’,
success:function(result){
成功后的操作
}
})
代码演示：
html文件中：
后端文件中：
var express=require("express")
var router=express.Router();
//jsonp方式跨域
router.get("/",(req,res)=>{
var weather="北京 晴 26~32";
res.writeHeader(200,{"Content-Type":"text/plain;charset=utf-8"});
var fun=req.query.callback; //必须是callback，ajax发送的时候只能是callback
res.end(`${fun}('${weather}')`);//填充式json：jsonp 把数据装入js语句当中发回就叫填充式jsonp
});
注意：
因为xhr不允许发送ajax跨域，由于jquery里面封装的是xhr对象，所以 jquery不能发送ajax跨域
解决：加上 datatype:jsonp，原理：不再是ajax请求而是script请求
加上jsonp之后原理其实是在head当中动态加载script，用完加马上删掉
jsonp
四：Vuejs 发送ajax请求：
一、概况
①vuejs中没有内置任何ajax请求方法
②在vue1.0版本，使用的插件 vue resource 来发送请求，支持promise
③在vue2.0版本，使用社区的一个第三方库 axios ，也支持promise
④在HTML5时代，浏览器增加了一个特殊的异步请求方法 fetch，原生支持promise，由于兼容性问题，一般用于移动端
⑤还有的项目会使用vue和jquery混用，借助jQuery的ajax方法
二、axios库的使用
①安装和引入：
npm直接下载axios组件，下载完毕后axios.js就存放在
node_modules\axios\dist中：
npm install axios
网上直接下载axios.min.js文件，或者使用cdn，通过script src的方式进行文件的引入：
②发送get请求
基本使用格式：
axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典
axios.get(url[,options]);
传参方式：
通过url传参，通过params选项传参
案例：
③发送post请求（push,delete的非get方式的请求都一样）
基本使用格式：
axios.post(url,data,[options]);
传参方式：
自己拼接为键值对；使用transformRequest，在请求发送前将请求数据进行转换；如果使用模块化开发，可以使用qs模块进行转换；
注意：
axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参
案例：
④发送跨域请求：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库，可以使用vue-resource发送跨域请求
五。vue resource发送ajax请求
如果项目中没有vue-resource，先安装vue-resource ：
npm install vue-resource –save
引用:再主入口main.js中（因为都要用到）：
import VueResource from 'vue-resource' //node_module中的库
使用vue-resource
Vue.use(VueResource)
在组件中使用vue-resource
加载resource后，this里面多一个属性$http
发送get请求：
this.$http.get('data.php',{'name':123}).then(function(response){
this.posts=response.data;
})
发送post请求
resource中的post请求默认将数据使用request payload方式进行发送，这里应该加入以下代码。转换数据发送格式。否则可能会导致后端收不到post数据：
Vue.http.options.emulateJSON = true;
Vue.http.options.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};
简写发送post请求
this.$http.post('data.php',{'name':123}).then(function(response){
this.posts=response.data;
})