发送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文件中：
  
  <script src="common.js"></script>
  //检测用户名是否存在
 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文件中：
<script src="js/jquery-3.2.1.js"></script>
<button id="btn">加载天气...</button>
  <script>
    $("#btn").click(function(){
    $.ajax({
      url:"http://127.0.0.1:3000/index/",
      type:"get",
      dataType:"jsonp", //原理同方案4
      success:function(res){
        document.write(res);
      }
    })  
  });
</script>

后端文件中：
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的方式进行文件的引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②发送get请求
基本使用格式：
axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典
axios.get(url[,options]);
传参方式：
通过url传参，通过params选项传参

案例：

<div id="app">
    <button @click='send'>发送Ajax请求</button>
    <button @click='sendGet'>GET方式发送Ajax请求</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
        new Vue({
            el:'#app',
            data:{
                user:{name:'eric',age:24},
            },
            methods:{
                send(){
                  axios({
                      method:'get',
                      url:'http://www.baidu.com?name=jack&age=30'
                  }).then(function(resp){
                      console.log(resp.data);
                  }).catch(err=>{
                      console.log('请求失败:'+err.status+','+err.statusText);
                  });
                },
                sendGet(){
                    axios.get('server.php',{
                        params:{name:'tom',age:20}
                    }).then(resp=>{
                        console.log(resp.data)
                    }).catch(resp=>{
                        console.log('请求失败:'+err.status+','+err.statusText);
                    });
                },
            },
        });
</script>

③发送post请求（push,delete的非get方式的请求都一样）

基本使用格式：
axios.post(url,data,[options]);
传参方式：
自己拼接为键值对；使用transformRequest，在请求发送前将请求数据进行转换；如果使用模块化开发，可以使用qs模块进行转换；
注意：
axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

案例：

<div id="app">
    <button @click='sendPost'>post方式发送Ajax请求</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
        new Vue({
            el:'#app',
            data:{
                user:{name:'eric',age:24},
            },
            methods:{
                sendPost(){
                    axios.post('server.php',this.user,{
                        transformRequest:[
                            function(data){
                                let params='';
                                for(let index in data){
                                    params+=index+'='+data[index]+'&';
                                }
                                return params;
                            }
                        ]
                    }).then(resp=>{
                        console.log(resp.data)
                    }).catch(err=>{
                        console.log('请求失败:'+err.status+','+err.statusText);
                    });
                },
            },
        });
</script>

④发送跨域请求：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;
})

---