Ajax跨域请求与解决方案

同域与跨域请求

同域请求：

网络协议，域名，端口号都一致，则为同域(同源)请求

http://www.sina.com.cn：8090/index.html
跨域请求:

浏览器对于javascript的同源策略的限制,网络协议，域名，端口号只要有一个不同，则视为跨域请求
ajax的同源策略

ajax请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.不能是其他域的资源，这是在设计ajax时基于安全的考虑

jsonp(了解)

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性,一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>
4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.
5.而json又是一个轻量级的数据格式,还被js原生支持
6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

跨域请求360索引的数据

 <script>$(function () {// 输入框绑定按键抬起事件$('input').keyup(function () {// 取得按键抬起时用户输入的数据var vals=$(this).val()// 清空列表$('ul').empty()$.ajax({// 跨域请求url: 'https://sug.so.360.cn/suggest',type: 'get', dataType: 'jsonp',  // 使用jsonp实现跨域data:{'word':vals,'encodein':'utf-8','encodeout':'utf-8'}}).done(function (dat) {console.log(dat)//dat:  {q: "c", p: true, s: Array(10)} 迭代数组//迭代数组 s为数据列表for(var i=0;i<dat.s.length;i++){// 准备一个节点$li=$('<li>'+dat.s[i]+'</li>')// 向ul的子级尾部添加节点$('ul').append($li)}})})})</script><!-- html部分 -->
<input type="text">
<ul></ul>

Ajax跨域请求与解决方案相关推荐

JQuery的Ajax跨域请求的解决方案
JQuery的Ajax跨域请求的解决方案参考文章: (1)JQuery的Ajax跨域请求的解决方案 (2)https://www.cnblogs.com/amylis_chen/p/4703735. ...
Ajax跨域请求,无法传递及接收cookie信息解决方案
Ajax跨域请求,无法传递及接收cookie信息解决方案参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...
Ajax跨域请求action方法，无法传递及接收cookie信息（应用于系统登录认证及退出）解决方案
Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案参考文章: (1)Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录 ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
$.ajax跨域请求数据的解决方案
最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的 ...
第四节：跨域请求的解决方案和WebApi特有的处理方式
一. 简介前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...
第十八节：跨域请求的解决方案和WebApi特有的处理方式
一. 简介前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...
Ajax 跨域请求详解
问题描述: 实际开发中,我们经常会看到这样的错误提示: XMLHttpRequest cannot load http://-- No 'Access-Control-Allow-Origin' he ...
网站跨域请求的解决方案
网站跨域请求的五种解决方案: 1.使用JSONP解决跨域问题(不推荐,因为支支持get请求,不支持post请求) 2.使用httpClient或者HttpUrlConnection进行内部转发请求响应 ...

Ajax跨域请求与解决方案

同域与跨域请求

jsonp(了解)

跨域请求360索引的数据

Ajax跨域请求与解决方案相关推荐

最新文章

热门文章