`

jquery中使用ajax jsonp的方法和注意事项

jsonpjQueryAjaxjsonJavaScript 
阅读更多

今天帮同事调试了下jquery中使用ajax jsonp方式，导致众多问题的原因是没有理解jquery中jsonp的本质。

查看了jquery源码后才知道他是添加脚本方式，但添加是的直接执行的方法，这个方法是jquery动态生成的，通过参数传递到后台的，后台通过request获得并以该参数值作为方法名，把json数据当成变量，加载完srcipt标签后直接执行该函数。

例如：

jsonp1251707322751({"name":"lava","nick":"\u6bd4\u76ee\u9c7c","contact":{"MSN":"lavaguo#msn.com","email":"guo.feng#zol.com.cn","website":"http:\/\/www.zol.com.cn"}})

 

jsonp1251707322751就是jquery动态生成的方法名，jsonp1251707322751()就是执行这个方法，里面的json就是参数了。

所以后台直接返回一个json是无法解析的，而且方法名必须是jquery动态生成的，如果是自己定义的则无法打开链接，火狐下报错为：

Access to restricted URI denied" code: "1012
 xhr.open(type, s.url, s.async);\n

请求url格式为http://xxx?callback=?"，后端request获取参数为callback
下面是引用了网上的一个测试页面

 

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<script type="text/javascript">
function aa()
{
	alert("aa message!");
}
function do_jsonp() {
    $.getJSON("http://active.zol.com.cn/guofeng/profile2.php?callback=?",
    function(data) {
        $('#result').val('My name is: ' + data.nick);
    });
}
</script>
<a href="javascript:do_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="3"></textarea>
</body>
</html>
 
分享到：
| struts2 Validator 整合freemarker 取得Fi ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里，由于同源策略的限制，浏览器禁止了不同源之间进行AJAX通信，但JSONP（JSON with Padding）作为一种巧妙的方式，允许我们绕过这个限制，实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...

    jQuery插件jQuery-JSONP开发ajax调用使用注意事项

    jQuery-JSONP是一个支持 JSONP 调用的 jQuery 插件，使用它是因为它支持出错时的 ajax 回调，而 jQuery 的 $.ajax 不支持，我们已经在实际项目中使用，在开始使用时遇到了2个问题，在这里记录并分享一下。

    jquery下利用jsonp跨域访问实现方法.docx

    jQuery提供了`.ajax()`和`.getJSON()`两个方法来实现JSONP。下面将详细解释这两个方法以及JSONP的工作原理。 1. **jQuery的`.ajax()`方法：** 在提供的代码示例中，`$.ajax()`方法用于发起一个跨域GET请求。设置`...

    jQuery使用JSONP实现跨域获取数据的三种方法详解

    使用jQuery提供的接口，开发者可以很容易地实现JSONP跨域请求，具体方法包括$.ajax()、$.getJSON()和$.getScript()等。在实际使用过程中，需要注意回调函数名的正确传递和处理，以及确保服务器端正确响应JSONP请求。...

    jQuery Ajax使用心得详细整理及注意事项

    以下是对jQuery AJAX使用的一些关键知识点和注意事项的详细整理： 1. **URL长度限制**：在IE7及以下版本的浏览器中，使用GET请求时，URL的长度有限制（约2083个字符）。如果预期URL可能超过这个长度，应使用POST...

    跨域访问解决方法-jsonp

    本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding"，它并不是JSON的一种新格式，而是一种利用动态创建`&lt;script&gt;`标签来绕过同源策略的技巧...

    jQuery中JSONP的两种实现方式详解

    在jQuery中，我们可以通过设置`dataType`参数为`"jsonp"`来指定使用JSONP。同时，我们需要指定`jsonp`参数，它指定了服务器返回的JSON数据包裹的函数名。例如： ```javascript $.ajax({ url: '...

    jQuery-ajax示例含客户端和服务端源码（可运行

    在jQuery中，`$.ajax()`函数是进行异步请求的核心方法。它的基本语法如下： ```javascript $.ajax({ url: 'server-side-script', type: 'GET'或'POST', dataType: 'json'或'html'等, data: {key1: value1, key2...

    利用jquery Ajax验证重复

    通过使用jQuery提供的`$.ajax()`方法，我们可以轻松地发送异步请求并处理服务器响应。 #### 三、使用$.ajax()进行用户名重复验证 ##### 3.1 基本原理 在用户输入用户名的过程中，我们可以通过监听输入框的变化...

    asp.net+jquery Jsonp使用方法

    主要有两种方式：使用`getJSON`方法和使用`ajax`方法。 使用`getJSON`方法的代码如下： ```javascript var url = "xxx.aspx?p1=1&p2=2&callback=?"; $.getJSON(url, function(data) { alert("value1：" + data....

    Ajax,JQuery达内培训笔记

    #### Ajax开发注意事项 1. **GET请求缓存问题**：IE浏览器可能缓存GET请求，导致数据不更新。解决方法包括： - 在URL中添加时间戳或其他唯一标识符。 - 使用POST请求替代。 2. **字符编码问题**： - 确保服务器...

    jQuery中异步交互技术详细指南

    本文将详细介绍`jQuery.ajax()`的使用方法及其相关参数，并通过实际示例帮助读者更好地理解和掌握这项技术。 #### `jQuery.ajax()`概述 `jQuery.ajax()`是jQuery中最强大的AJAX函数，它允许开发者通过HTTP请求加载...

    jQuery Ajax()方法使用指南

    在本文中，我们将深入探讨jQuery的$.ajax()方法及其重要参数和注意事项。 首先，$.ajax()方法允许开发者自定义几乎所有的HTTP请求细节，包括URL、数据、请求类型（GET或POST）、是否异步执行以及期望的响应类型。...

    自己封装的一个ajax的小工具

    在压缩包中的`ajax_util.js`文件很可能是这个自定义Ajax工具的源代码，而`readme.txt`文件可能包含了使用说明、示例代码或者关于工具的一些额外信息，例如如何引入、如何调用其方法、注意事项等。 总的来说，这个小...

    15天学会jQuery

    3. jQuery与React：了解在React中使用jQuery的注意事项，以及如何在React组件中合理使用jQuery功能。 第十一至十五天：实战项目 1. 实战演练：通过创建实际的网页应用，将所学的jQuery知识运用到实际开发中。 2. ...

    jquery 1.4.4 + 帮助文档

    1. 函数索引：包含了所有jQuery方法的详细说明，包括参数、返回值、示例和注意事项，方便快速查找和理解。 2. 事件处理：列举了所有可用的事件绑定函数，如click()、mouseover()等，以及如何使用它们来响应用户行为...

    jQuery各版本API帮助文档

    每个版本的API帮助文档详细列出了各个函数、方法和对象的使用方式，包括参数、返回值、示例代码和注意事项。开发者可以根据具体需求查阅相应版本的文档，找到最佳实践和解决方案。 总的来说，这个jQuery API帮助...

    jQuery1.3中文手册

    - **readme.txt**：通常包含关于文件的说明、安装或使用指南，可能包含了使用CHM文件的注意事项或版本信息。 通过深入学习这份**jQuery 1.3中文手册**，开发者可以更好地掌握jQuery的核心功能，提高前端开发效率，...

    JQury实现Ajax跨域访问

    jQuery的`$.getJSON()`和`$.ajax()`方法可以通过设置`dataType`为'jsonp'来实现JSONP请求。 3. **CORS(Cross-Origin Resource Sharing)** CORS是一种更现代且安全的跨域访问方式，它需要服务器端的支持。服务器...

Magicbox
Global site tag (gtag.js) - Google Analytics