前言

最近学习到了前后端交互和跨域，ajax jsonp CORS作为前后端交互的利器，当然各有其的特点，下面我简单的说一下自己对他们的理解。

按照出现时间顺序：

1. jsonp
2. ajax
3. CORS

jsonp

jsonp是什么鬼：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。 简单的说就是动态标签跨域请求。

代码段

前端：

let script = document.createElement('script')
let functionName = 'frank'+ parseInt(Math.random()*10000000 ,10)
window[functionName] = function(){  // 每次请求之前搞出一个随机的函数
    amount.innerText = amount.innerText - 0 - 1
}
script.src = '/pay?callback=' + functionName //jsonp请求格式
document.body.appendChild(script)
script.onload = function(e){ // 状态码是 200~299 则表示成功
    e.currentTarget.remove()
    delete window[functionName] // 请求完了就干掉这个随机函数
}
script.onload = function(e){ // 状态码大于等于 400 则表示失败
    e.currentTarget.remove()
    delete window[functionName] // 请求完了就干掉这个随机函数
}

后端（node.js）：

if (path === '/pay'){
  let amount = fs.readFileSync('./db', 'utf8')
  amount -= 1
  fs.writeFileSync('./db', amount)
  let callbackName = query.callback
response.setHeader('Content-Type', 'application/javascript')
response.write(`
    ${callbackName}.call(undefined, 'success') //jsonp返还格式
`)
response.end()
}

上述代码每响应一次，都会请求一次后端操作。

简述：

请求方：chirs.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）

1. 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
2. 响应方根据查询参数callbackName，构造形如
   yyy.call(undefined, '你要的数据')
   yyy('你要的数据')
   这样的响应
3. 浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
4. 那么请求方就知道了他要的数据

简单的来说jsonp就是动态添加script标签，生成src进行get请求，向服务端发送一次请求，最后返还给客户端，实现了前后端交互功能。

ajax

ajax是什么鬼：就是异步的 JavaScript 和 XML，但是XML已经被丢弃了，JSON成为了主流。叫ajaj也可以吧。

历史：

请求常见方式：

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行

那么有没有什么方式可以实现？

1. get、post、put、delete 请求都行
2. 想以什么形式展示就以什么形式展示

之后IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范，也就是我们的ajax。

请求步骤：

1. 使用 XMLHttpRequest 发请求
2. 服务器返回 XML 格式的字符串
3. JS 解析 XML(json)，并更新局部页面

代码片段：

前端：

let request = new XMLHttpRequest()
request.open('get', '/xxx') // 配置request
request.send()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
  if(request.status >= 200 && request.status < 300){
    let string = request.responseText
    // 把符合 JSON 语法的字符串
    // 转换成 JS 对应的值
    let object = window.JSON.parse(string) 
    // JSON.parse 是浏览器提供的
  }else if(request.status >= 400){
    console.log('说明请求失败') 
  }
}
}

后端：

 if(path==='/xxx'){
  response.statusCode = 200
  response.setHeader('Content-Type', 'text/json;charset=utf-8')
  response.write(`
  {
    "note":{
    "to": "小平",
    "from": "chris",
    "heading": "打招呼",
    "content": "hi"
  }
}
`)
response.end()

这样我们就可以将后端数据解析到前端渲染出来了。

CORS

CORS是什么鬼：跨域资源共享 CORS（Cross-origin resource sharing），简单的说就是你想请求非符合同源策略的网站，我们可以向他们的后端要一个接口，去请求他们的网站的某个文件。

CORS

如果我们的服务器允许别人请求文件，我们仅仅需要在后端代码中加入response.setHeader('Access-Control-Allow-Origin', '允许请求的地址')。当然我们也可以支持多个站点请求。

小结：

AJAX . CORS与JSONP的比较:
1 . AJAX适用于同源策略，并不可以跨域，但是请求方法很多，JSONP只拥有get请求。
2.CORS与JSONP的使用目的相同，但是比JSONP和AJAX更强大:
3.JSONP的优势在于支持老式浏览器。