JSONP

XMLHttpRequest

// post请求
const xhr = new XMLHttpRequest()
xhr.open('GET', '/login', false)
xhr.onreadystatechange = function() {
   
  // 这里的函数异步执行
  if(xhr.readyState == 4) {
   
    if (xhr.status == 200) {
   
      alert(xhr.responseText)
    }
  }
}

const postData=  {
   
  userName: 'zhangsan'
  password: 'xxx'
}

xhr.readyState

• 0 - UNSET尚未调用open方法
• 1 - OPENED open 方法已被调用
• 2 - HEADERS_RECEIVED send 方法已被调用，header 已被接收
• 3 - LOADING 下载中，responseText 已有部分内容
• 4 - DONE下载完成

xhr.status

• 2xx-表示成功处理请求，如200
• 3xx- 需要重定向，浏览器直接跳转，如301、302、304
• 4xx-客户端请求错误404、403
• 5xx- 服务器端错误

跨域

什么是跨域( 同源策略 )

• ajax 请求时，浏览器要求当前网页和 server 必须同源(安全)
• 同源:协议、域名、端口，三者必须一致
• 前端: http://a.com:8080/ ;server : https://b.com/api/xxx

加载css js可无视同源策略

• < img src=跨域的图片地址 />
• < link href=跨域的css地址 />
• < script src=跨域的js地址 >< /script >

JSONP

• < script>可绕过跨域限制
• 服务器可以任意动态拼接数据返回
• 所以，< script>就可以获得跨域的数据，只要服务端愿意返回

// jQuery 实现jsonp 
$.<