前端请求接口,局域网跨域,上传图片,发送数据类型,报错400和415

建立请求的方法

1. 原生ajax和jquery的ajax

• 原生ajax：

var xhr = createXHR();
xhr.onreadystatechange =  function(){
    if(xhr.readyState === 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //success
            //console.log(xhr.responseText);
            //成功之后的操作
            gridStore.setData( JSON.parse(xhr.responseText) );
        } else { 
            console.log("Request was unsuccessful: " + xhr.status); 
        }
    }
};
xhr.open('get','diana',true);  //第三个参数 ，是否异步
xhr.send(null); 
function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){ 
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){ 
        if (typeof arguments.callee.activeXString != "string"){ 
            var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
            for (i=0,len=versions.length; i < len; i++){ 
                try { 
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i]; 
                    break;
                } catch (ex){ 
                //跳过
                } 
            } 
        } 
        return new ActiveXObject(arguments.callee.activeXString); 
    } else {
        throw new Error("No XHR object available.");
    } 
}

• jquery.ajax

$.ajax({
    url:"",    //请求的url地址
    success:function(req){
        //请求成功
    },
    error:function(){
        //请求出错
    },
    complete:function(){
        //请求完成
    }
});

2. axios

	//get请求***************************************************
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
	// post请求***************************************************
 axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
	// 多个并发请求***************************************************
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
//

3. Fetch请求

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

实战应用:
     一般实战中使用的ajax请求还是jquery比较多,前端的工作进度快不快还是得看后台大哥的接口靠不靠谱,如果后台大哥的功能很强大,那么我们只需要根据后台接口渲染页面就行了.
     这里插一句题外话,如果后台大哥给你写了一堆(能用到的用不到的)接口,那么做起来爽到飞起,如果后台大哥只给你造了一大坨的数据,所有的判断和增删改查都要前端做,那你得累到吐血.
     ## 后台给的接口模型
① /index/index
应对这种接口只需要正常get和post调用就行
② /index/index/key
一般这种请求都是key为自定义变量,用js算出来变量直接赋值调用即可

     ##特殊注意事项
① 首先说跨域,我碰到的问题是局域网项目的开发,调用后台大哥局域网的参数需要注意ajax请求的时候添加一个参数,具体原因是为什么我也不知道,反正我就是这样调通的,还需要让后台大哥取消后台对跨域的监控,好像是在后台增加请求头来着

					$.ajax({
                        url:url,
                        type:getOrPost,
                        crossDomain: true, // 设置为true
                        xhrFields: {
                            withCredentials: true // 设置为true
                        },
                        // async: false,
                        data:data,
                        dataType: 'json',
                        // contentType:"application/json;charset=UTF-8",
                        success:successfun,
                        error:errorfun,
                        xhr:xhrfun
                    })

② 请求报错400和415,这个问题是因为向后台传送的参数不对,这时候需要看下接口文档,传递的参数有可能需要把json转换为字符串格式

				$.ajax({
                        url:url,
                        type:"post",
                        // crossDomain: true,
                        xhrFields: {
                            withCredentials: true
                        },
                        cache: false,
                        data:JSON.stringify(data),// 看这里 看这里 看这里
                        contentType:"application/json;charset=UTF-8",
                        success:successfun,
                        error:errorfun,
                        xhr:xhrfun
                    })

③ 如果是向后台发送资源文件 ,比如图片,视频,pdf,音频之类的,也是需要改变发送数据的类型
     一, 获取input选中的文件

		var obj = {
          file:$("#uploadImg01")[0].files[0]
        }

     二,声明向后台发送的数据

			var formData = new FormData();
            formData.append('file1',that.$parent.fileSession.file1);  //添加文件信息的参数
            formData.append("token","1234567");  //也可以添加后台需要的数据

     三,ajax发送请求即可
不做解释,照着上面的照抄就行