Ajax、jQuery 和 JSONP

Question

似乎我可以使用 jQuery 的 getJSON 方法从不同的域获取 JSON 数据（请参阅：http://docs.jquery. com/Getjson）。但是，这仅适用于 HTTP GET。

如果我需要 POST 某些内容并获取 JSON 响应怎么办？我该如何在 jQuery/Ajax 中做到这一点？

Answer 1

自版本 1.6.1 起，无法在所有浏览器中仅使用 jQuery 从客户端向远程服务器发送 POST 请求。如果您尝试向与文档不同的域中的服务器发出任何类型的 XHttpRequest，某些浏览器将无法完成它。对远程服务器的 JSONP 请求是通过创建脚本标记来处理的，该脚本标记的 src 是添加了查询参数的 API url，包括回调方法名称。因为脚本可以从任何域加载，所以这是可行的，但它限制了您只能进行 GET 请求。远程主机返回脚本的主体，即对生成的 javascript 对象调用的回调。 jQuery 通常会为您创建回调函数，并从中调用您在 getJSON 方法参数中提供的匿名回调函数。

有一些新兴标准，CORS 和 UMP（另请参阅比较），一些浏览器支持，但不是以标准化方式（IE 的做法有所不同）。有插件为那些支持 CORS 的浏览器提供部分支持。不知道它们的工作效果如何，除非浏览器支持，否则它们将无法工作。

Answer 2

其他答案并不完全正确。如果您可以控制服务器，这是可能的。

看：
W3C - 跨源资源共享
http://www.w3.org/TR/cors/

本质上，客户端发送一个“飞行前”选项 HTTP 请求，如果从服务器收到正确的响应，则继续执行常规操作。 （网上有很多例子......除非你需要我，我不会详细介绍）。

我知道这可能不适用于所有情况（例如，我不确定 IE5/5.5 是否支持此功能...但我相信 IE6 可以）...但是如果您正在开发 HTML5 应用程序，并且您可以控制服务器，这对您来说可能是一种可能性。

注意：顺便说一句 - 当然，考虑到我更喜欢 JSONP 的选项。更少出错。

编辑：这里似乎有很多混乱，所以让我举一个例子来说明如何使用 .NET / WCF 来做到这一点（我认为其中一些来自某处的一篇文章，而它的其他部分是内部开发的...所以如果其中一些来自其他地方，我提前道歉，因为没有给予应有的信任）：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace YourNamespaceHere
{
    using System;
    using System.Web; 
    using System.Collections;

    public class CrossOriginModule : IHttpModule {
        public String ModuleName {
            get { return "CrossOriginModule"; } 
        }    

        public void Init(HttpApplication application) {
            application.BeginRequest += (new EventHandler(this.Application_BeginRequest));
        }

        private void Application_BeginRequest(Object source, EventArgs e) {
            HttpApplication application = (HttpApplication)source;
            HttpContext context = application.Context;
            CrossOriginHandler.SetAllowCrossSiteRequestOrigin(context);
        }

        public void Dispose() 
        {
        }
    }

   public class CrossOriginHandler : IHttpHandler
    {
        #region IHttpHandler Members
        public bool IsReusable
        {
            get { return true; }
        }

        public void ProcessRequest(HttpContext context)
        {
            //Clear the response (just in case)
            ClearResponse(context);

            //Checking the method
            switch (context.Request.HttpMethod.ToUpper())
            {
                //Cross-Origin preflight request
                case "OPTIONS":
                    //Set allowed method and headers
                    SetAllowCrossSiteRequestHeaders(context);
                    //Set allowed origin
                    //This happens for us with our module:
                    SetAllowCrossSiteRequestOrigin(context);
                    //End
                    context.Response.End();
                    break;

                default:
                    context.Response.Headers.Add("Allow", "OPTIONS");
                    context.Response.StatusCode = 405;
                    break;
            }

            context.ApplicationInstance.CompleteRequest();
        }
        #endregion

        #region Methods
        protected void ClearResponse(HttpContext context)
        {
            context.Response.ClearHeaders();
            context.Response.ClearContent();
            context.Response.Clear();
        }

        protected void SetNoCacheHeaders(HttpContext context)
        {
            context.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
            context.Response.Cache.SetValidUntilExpires(false);
            context.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
            context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            context.Response.Cache.SetNoStore();
        }
        #endregion

        public static void SetAllowCrossSiteRequestHeaders(HttpContext context)
        {
            string requestMethod = context.Request.Headers["Access-Control-Request-Method"];

            context.Response.AppendHeader("Access-Control-Allow-Methods", "GET,POST");

            //We allow any custom headers
            string requestHeaders = context.Request.Headers["Access-Control-Request-Headers"];
            if (!String.IsNullOrEmpty(requestHeaders))
                context.Response.AppendHeader("Access-Control-Allow-Headers", requestHeaders);
        }

        public static void SetAllowCrossSiteRequestOrigin(HttpContext context)
        {
            string origin = context.Request.Headers["Origin"];
            if (!String.IsNullOrEmpty(origin))
                context.Response.AppendHeader("Access-Control-Allow-Origin", origin);
            else
                //This is necessary for Chrome/Safari actual request
                context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
        }
    }
}

并且在 Web.config 中：

  ...
  <system.webServer>
     ...
     <modules runAllManagedModulesForAllRequests="true">
     ...
           <add name="CrossOriginModule" preCondition="managedHandler" type="YOURNANMESPACEHERE.CrossOriginModule, ASSEMBLYNAME" />
    </modules>
    <handlers>
           <add name="CrossOrigin" verb="OPTIONS" path="*" type="YOURNAMESPACEHERE.CrossOriginHandler, ASSEMBLYNAME" />
    </handlers>
  </system.webServer>

Answer 3

简而言之：JsonP是一种仅限于GET请求的跨域技术。

Answer 4

1. 测试.php

<?php   fire query
        $row = array();
        while($queryresults){
          $row['id'] = '$queryresults['idfield']';
          $row['name'] = '$queryresults['namefield']';
          $row['marks'] = '$queryresults['marksfield']';
         $output[] = $row;
         }
echo json_encode( $output ); //json array
?>

1. 文档准备就绪

$.getJSON('test.php?query=query,function(data) {    
    $.each(enq_data, function(i,data){
          $('.anydiv').append('<div class="row">'+data.id+data.name+data.marks+'</div>');
    });
});