发送数据请求

vue-resource

vue-resource依赖与Vue，所以要注意导入顺序，先导入Vue包再导入vue-resource包，利用this.$http.get/post...来发起get、post请求。

常见的请求方式：

get

post

jsonp

this.$http.get("url").then(function(res){
    console.log(res)
})


this.$http.post("url",{},emulateJSON:true).then(function(res){  
//post的格式较为特殊，1、传递url  2、传递服务器的数据  3、传递数据格式定为表单格式
//可以通过{}向服务器传递参数，手动发起的post的请求默认没有表单格式,有的服务器处理不了
//但是可通过post方法的第三个参数设置提交内容类型为普通表单数据格式
    console.log(res)
})


this.$http.jsonp("url").then(function(res){
    console.log(res)
})

jsonp的原理

• 由于浏览器安全限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口。
• 可以通过动态创建script标签的形式，把script标签的src属性指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取的方式成为jsonp
• jsonp只支持get方法

//导入http内置模块
const http=require("http")
//创建一个http服务器
const server = http.createServer()

//监听http服务器的request请求
server.on("request" ,function(req,res){
    const url = req.url
    if(url=="/getscript"){
         //拼接一个合法的js脚本，这里拼接的是一个方法的调用，其中show()方法是客户端中已有的方法；
        var scriptStr="show()"
        //res.end发送给客户端，客户端去吧这个字符串当做JS代码去解析执行
        res.end(scriptStr)

    }else{

        res.end("404")
    }

})

该方法就是把相应url返回的内容加入到script标签中，方法自动执行

具体实现过程

 

 

axios