ajax与jsonp跨域的本质原理

2017-11-11 21:39:38来源:CSDN作者:Yun__shen人点击

分享

ajax的基本概念

了解这个概念,首先得先知道同步交互与异步交互

  • 同步交互:客户端浏览器给服务器发送一个请求,服务器返回一个页面,返回的页面会把之前的页面覆盖掉,我们把这种交互方式称为同步交互
  • 异步交互:就是可会断浏览器给服务器发送一个请求,服务器返回数据,返回的数据不会把之前的页面覆盖掉,我们把这种交互方式称之为异步交互

ajax主要的应用场景:页面不刷新,就可以与服务器进行动态的数据交互

交互的原理

  • 同步交互原理:我们在浏览器,怎么给服务器发送请求呢?可以点击超链接,提交表单,浏览器地址栏输入地址,都是给服务器发送请求,实际上是浏览器帮助我们给服务器去发送请求

  • 异步交互的原理:JavaScript给我们提供了一个新的API接口,帮我们去发送http请求,由XMLHttpRequest 对象来帮助我们发送请求

我们所有的交互操作都可以通过这个对象来完成,发送请求,接受服务器的数据

ajax的具体应用场景

  • 前台可以通过XMLHttpRequest 给服务器发送请求,然后再通过XMLHttpRequest 对象来接受服务器返回的数据,最后通过dom操作把数据写到页面上
  • ajax:可以用来表单输入规范验证
  • ajax:也可以用来做性能优化,比如一个页面非常庞大,这个页面不可能一次加载完毕,实现一个滚动加载

XMLHttpRequest 交互的四个步骤

1,实例化XMLHttpRequest 对象
2,想和服务器进行交互,必须和服务器打开一个连接
3,给服务器发送数据,发送参数数据到服务器
4,接受服务器返回的数据,服务器在返回给客户端的时候会返回一些状态,可以通过监听服务器状态的改变,来更好的操控整个交互流程

ajax跨域

跨域:假设我访问 a 站点,后台返回给我一个页面,然后我又想在 a 站点的这个页面去访问 b 站点的资源,这就是一个跨域的效果,跨域浏览器是有安全限制的

解决·跨域的方式:jsonp方式,

jsonp解决跨域的本质原理:由于浏览器有同源限制,不同站点之间不能相互访问,但是有时候我们就是想要获取其他站点的数据,比如加入我们想要获取一下急速数据的天气预报数据,这肯定跨域了,那么我们该怎么办呢?

原理:就是动态创建

<script type="text/javascript">    function handleResponse(response){            console.log(response);    }</script><script type="text/javascript">    window.onload = function() {    var oBtn = document.getElementById('btn');    oBtn.onclick = function() {             var script = document.createElement("script");        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";        document.body.insertBefore(script, document.body.firstChild);       };};</script>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台