AJAX和JSONP的实现

AJAX实现过程

//1,创建对象

let xhr = new XMLHttpRequest()

//2，初始化http请求参数(请求方法，请求路径，是否异步)

xhr.open(method, url, true)

//3，发送请求（params是要发送的参数，如果不止一个参数，可以写成对象结构）

//如果是post请求，可能还要设置请求头的content-Type

//xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded')

xhr.send(params)

//4，注册事件，注册onreadystatechange事件，状态改变时就会调用；监听请求状态，执行对应的回调函数

xhr.onreadystatechange = function() {

  //readtstate === 4：请求已完成，且响应已就绪

  if(xhr.readtstate === 4 && xhr.status === 200){

    success(xhr.responseText)

  }else if(xhr.readystate === 4 && xhr.state !== 200) {

    error()

  }

}

JSONP实现

跨域通信的方式：JSONP、WebSocket、CORS、Hash、postMessage。

//JSONP的原理：通过<script>标签的src属性来实现的,只支持get方法

function jsonp(url, data, callback) {

  //callbackName是函数jsonp()第三个参数回调函数callback的名字

  let callbackName = 'jsonp_' + Date.now() + Math.random().toString().substr(2,5)

  //如果有get请求参数data，要用&做分隔符拼接起来

  if(typeof data === 'object') {

    let temArr = []

    for(let key in data) {

      let value = data[key]

      temArr.push(key + "=" + value)

    }

    data = temArr.join('&')

  }

  let script = document.createElement('script')

  script.type = 'text/javascript'

  script.src = url + '?' + data + '&callback=' + callbackName

  document.body.appendChild(script)

  //在window对象上注册callbackName函数

  window[callbackName] = function(data) {

    //函数jsonp()第三个参数是回调函数，执行回调函数

    callback(data)

    //执行完毕要删除

    delete window[callbackName]

    //删除完毕移除创建的标签

    document.body.rermoveChild(script)

  }

}