Ajax

Posted 2021-12-28 embrace-ly

什么是Ajax：一种不用刷新整个页面便可与服务器通讯的技术

知识点 

1. XMLHttpRequest

var xhr = new XMLHttpRequest()
xhr.open(‘GET‘,‘/api‘,false)
xhr.onreadystatechange = function()
  if(xhr.readyState == 4)//响应内容解析完成，客户端可以调用
    if(xhr.status == 200)
      console.log(xhr.requestText)
    
  

xhr.send(null)

2. 状态码

3. 跨域

什么是跨域 

• 浏览器有同源策略，不允许ajax访问其它域接口
• 跨域条件：协议、域名、端口，有一个不同即为跨域

可以跨域的标签

• <img src=xxx>
• <link href=xxx>
• <script src=xxx>

跨域的几种方式 

1. JSONP

实现原理

• 加载 http://myname.y.com/embrace.html
• 不一定服务器真正有一个embrace.html文件
• 服务器可以根据请求，动态生成一个文件，返回

同理，你要跨域访问某网站的接口 

• 该网站给你一个地址http://someone.xx.com/api.js
• 返回内容格式如 callback(id:1,name:‘xx‘)内容可动态生成

<script>
window.callback = function(data)
  //这是我们得到的跨域信息
  console.log(data)

<script src="http://someone.xx.com/api.js">
//以上将返回 callback（...）,然后被浏览器调用

2. 服务器端设置 http header