jQuery ajax

     $.ajax({
            url: "http://mock-api.com/5n9owmzo.mock/jq",
            type: "GET",
            dataType: "json", //接受的数据格式
            contentType:'', //发送的数据
            success: function(data) {
                log('siblings2',data)
            },
            error: function (err) {
                log('fail2', err)
            }
        })

jsonp

//待验证
$('head>script:last')

动态创建script标签，借助script发送请求。服务端返回js语句。服务端将要返回的数据填充到js语句里返回

script收到js语句并且执行

使用jsonp格式

jsop是利用资源不跨域的特性，同源策略只是限制了xhr对象发送的请求，并没有限制资源加载，所以jsonp利用了这个特性可以解决浏览器的跨域(需要后端配合)

$.ajax({
            url: "http://localhost:8888/login",
            type: "GET",
            dataType: "jsonp", 
            jsonpCallback:'ajaxJsonp',//服务端用于接收callback调用的function名的参数
            success: function(data) {
                log('success',data)
                handleData(data)
            },
            error: function (err) {
                log('fail2', err)
            }
            })

后端

var http = require('http')
var fs = require('fs')
var url = require('url')

let user = [{"name":"a","drink":"beer"},{"name":"b","drink":"82年拉菲"}]
http.createServer((req, res) => {
  if (req.method === 'GET') {
    var urlEeq = url.parse(req.url,true)
    console.log(urlEeq.query.callback)
    complete()
  } else if (req.method === 'POST') {
    complete()
  }

  function complete() {
      if (urlEeq.pathname === '/login') {
          res.writeHead(200,{'Content-Type':'application/json',chartset:'UTF8'})
          if (urlEeq.query && urlEeq.query.callback) {
            var str = urlEeq.query.callback + '(' + JSON.stringify(user) + ')';//jsonp
            res.end(str);
          }
      }
  }
}).listen(8888)

 

• 优点： 解决了跨域， 兼容
• 缺点: 只能get请求， 不能捕获错误状态（毕竟不是真的发送ajax  所以无法捕获状态）