Ajax

标签：head   页面   data   cal   动态   客户   标签   open   网站   

什么是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

Ajax

标签：head   页面   data   cal   动态   客户   标签   open   网站   

原文地址：https://www.cnblogs.com/embrace-ly/p/10800542.html