Ajax原理及不同场景下的应用

Ajax原理及不同场景下的应用

1 概念

ajax是Asynchronous Javascript and xml（异步的js和xml）的缩写。

同步与异步：客户端和服务器段的通信基础上。

同步：客户端发请求，等待，服务器端响应，返回给客户端，客户端接收到了，在继续做其他操作。即客户端必须等待服务器的响应，且在这期间无法做其他操作，直至响应接受到。

异步：客户端发请求，不需要等待，服务器端响应，返回给客户端。即客户端不需要等待服务器的响应，且在这期间可以做其他操作。

2 实质

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。用于提升效率和体验。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

3 原生的JS实现方式

//1 创建核心对象
var xmlhttp;
xmlhttp=new XMLHttpRequest();
//2 建立连接 ("请求方式（post，get）"，"url","同步请求false/异步请求true")
xmlhttp.open("GET","localhost:8080/api/adduser?uid=8","true");
//3 发送请求（get方式参数在url后面拼接，send后面为空参。post方式请求参数在send方法中定义）
xmlhttp.send();
//4 接受并且处理响应的结果；在服务器响应成功时候获取。获取响应后的数据
//当xmlhttp对象的就绪状态改变时，就会触发onreadystatechange函数。
//0-4的变化状态：0请求未初始化，1建立服务器连接，2请求被接受，3请求处理中，4请求完成，响应就绪
//2种状态码：200：页面响应正常。404页面找不到。
xmlhttp.onreadystatechange=function (ev) {
    //判断是否就绪，响应是否成功
             if (xmlhttp.readyState==4&&xmlhttp.status==200){
                 //获取服务器的响应结果
                 var responseText = xmlhttp.responseText;
                 alert(responseText)
                 document.getElementById("t1").innerHTML=responseText;
             }
           }

4 JQuery实现ajax方式

4.1 $.ajax-通用方式

语法规则：$.ajax({key：value形式的键值对})

$.ajax({
    url:"localhost:8080/api/adduser",//请求地址
    type:"post",//请求方式
    data:{"username":"jake","age":"23"},//数据格式
    success:function (data) {
        alert(data);
    },//响应成功后，会调用的函数
    error:function () {
        alert("出粗略")
    },//请求响应出错，会执行的回调函数
    dataType:"text"//接受的返回的数据格式
});

4.2 $.get()/$.post()的get/post请求简写方式

语法规则：$.get({value形式的值});只需要传值了.

$.get/$.post(url,{data},[callback function],[type])，
路径—参数信息—回调函数—响应结果的数据类型

$.get/$.post("localhost:8080/api/adduser",{"username":"getajax"},function (data) {
    alert(data);},"text")

5 Vue.js中实现ajax方式

1 首先在vue前端配置代理，在根目录下的config/index.js中的dev标签下添加：

	// Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
          '/api':{
            target:'http://localhost:8080',
            changeOrigin: true,
            pathRewrite:{
              '^/api': ''
            }
          }
        },

2 然后在src目录下面新建一个文件夹api（名称随意），在文件夹中新建一个axios.js的文件。代码如下：

import Vue from 'vue'
import axios from 'axios';
Vue.prototype.axios = axios;
axios.defaults.baseURL ='http://localhost:8080/';  //配置请求地址

3 在src/main.js中设置反向代理，并且注册axios，用于发送数据

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios=require('axios')
axios.defaults.baseURL = 'http://localhost:8080/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

4 在页面中的使用,发送post请求。

getreview(){
          this.$axios.post('/getreview',//url地址
            {fid:this.$store.getters.clickedFilminfo.fid}//传递的参数
            ).then(res=>{//then里面写上接收的结果，以及需要做的操作
            console.log(res.data)
            this.otheruserreview=res.data;
          }).catch(err=>{console.log(err)})//捕捉异常
        },