ajax跨域

来源：互联网发布：苏菲淘宝旗舰店编辑：程序博客网时间：2024/05/21 09:28

跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过ajax进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

什么是JSONP？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

实现的方法:

$(document).ready(function(){   var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"       +"?id=1&callback=?';   $.ajax({     url:url,     dataType:'jsonp',     type:'get',     success:function(data){       alert(data.name);     },     error:function(XMLHttpRequest, textStatus, errorThrown) {       alert(XMLHttpRequest.status);       alert(XMLHttpRequest.readyState);       alert(textStatus);     }});   });

url

类型：String

默认值: 当前页地址。发送请求的地址。

dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

案例：百度搜索提升框

打开百度，我们一边打字会发现出现相关的关键字供你查看：这个时候打开网络查看，发现这个数据是通过ajax的方式动态加载过来的，还能找到这个域名请求的地址：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#q {width: 300px; height: 30px; padding: 5px; border:1px solid red; font-size: 16px;}#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}li a:hover{ background: #f90; color: white; }</style><script>function fn(data) {var oUl = document.getElementById('ul1');var html = '';if (data.s.length) {oUl.style.display = 'block';for (var i=0; i<data.s.length; i++) {html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';}oUl.innerHTML = html;} else {oUl.style.display = 'none';}}window.onload = function() {var oQ = document.getElementById('q');var oUl = document.getElementById('ul1');oQ.onkeyup = function() {if ( this.value != '' ) {var oScript = document.createElement('script');oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';document.body.appendChild(oScript);} else {oUl.style.display = 'none';}}}</script></head><body><input type="text" id="q" /><ul id="ul1"></ul></body></html>

阅读全文

0 0