ajax

来源：ajax常用操作及 跨域的实现原理

1 创建兼容的XMLHttpRequest对象

<script>
  // 1 创建兼容的 XMLHttpRequest 对象
  function createXMLXttpRequest() {
    let xmlHttpRequest
    if (window.XMLHttpRequest) {
      //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
      xmlHttpRequest = new XMLHttpRequest()
      //针对某些特定版本的mozillar浏览器的BUG进行修正
      if (xmlHttpRequest.overrideMimeType) {
        xmlHttpRequest.overrideMimeType('text/html')
      }
    } else if (window.ActiveXObject) {
      //针对IE6，IE5.5，IE5
      //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
      //排在前面的版本较新
      const activexName = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
      for (let i = 0; i < activexName.length; i++) {
        try {
          //取出一个控件名进行创建，如果创建成功就终止循环
          //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
          xmlHttpRequest = new ActiveXObject(activexName[i])
          if (xmlHttpRequest) {
            break
          }
        } catch (e) {
          
        }
      }
    }
    return xmlHttpRequest
  }
</script>

或者

const xmlHttpRequest = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP')

2 get()

function get() {
    const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
    if(xhr) {
      xhr.open('GET', 'https://xxx.come/?username=123')
      xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
          if(xhr.status === 200 || xhr.status === 304) {
            console.log(xhr.responseText)
          } else {
            console.log('error')
          }
        }
      }
    }
  }

3 post()

function post() {
    const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject()
    if(xhr) {
      xhr.open('POST', 'http://test.com/', true)
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=gbk;')
    }
    xhr.send("keywords=手机")
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        if(xhr.status === 200){
          alert('success')
        }else{
          alert('error')
        }
      }
    }
  }