AJAX和JSONP的实现

Posted 2023-03-13 rain111

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)