Jquery Ajax cross-domain invoke ASMX type WebService example

Absrtact: Ajax plays a very important role in the Web 2.0 era, but sometimes it is limited because of the homologous strategy (SOP) (commonly known as cross domain). In this article, we will learn how to overcome the limitations of cooperation. In this paper, we build webservice as the back-end of the test using ASMX, and give the complete front-end call solution and sample code.

Key words: jquery Ajax cross-domain WebService asmx cross-domain

0 problem Analysis

0.1 What is a cross-domain issue.

More and more sites need to collaborate with each other. For example, the online home rental site requires Google Maps support to show the location of a particular rented house. In order to meet this demand, a variety of mashups have emerged. Mashups are Web applications that integrate data or components from different vendors to make them more useful or more user-beneficial. Mashups (or collaboration features) are considered to be an important part of Web 2.0.

Surprisingly, it's not easy to combine asynchronous JavaScript, XML (Ajax), and mashups together. Because of the security restrictions imposed by the browser, it is troublesome to have different widgets on the page communicate with each other. Typically, you can resolve this problem by setting up a proxy on the server side, which is not extensible.

Details of the problem are shown in the chart:

0.2 Problem Solving Ideas

0.2.1 JSONP

JSONP leverages the ability of WEB pages to download scripts from any source. But JSONP has two main limitations: it has no error handling mechanism like Ajax calls, and script tag requests use Get method, where the length is limited. This method is not the focus of this article, please search by yourself for more details.

0.2.2 Proxy method

Ideas please see figure

This article uses vs2013 as an integrated development environment (hereafter referred to as the IDE) and is theoretically not limited by the IDE. The following is a test project to demonstrate the viability of the agent scheme.

1 using ASMX to create an ASP. NET WebService Backend

1.1 New Project

Vs2013->new project->web Visual studio2012->asp.net Empty Web application, named "Crossdomain.backend", the path is arbitrary.

1.2 New ASMX

Right-click on the "Crossdomain.backend" project, new project->web->asmx-> Add button

The code is as follows:

Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Threading;
Using System.Web;
Using System.Web.Script.Services;
Using System.Web.Services;

namespace Crossdomain.backend {//<summary>//
    Summary description for WebService1//
    < /summary>
    [WebService (Namespace = "http://tempuri.org/")]
    [WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
    [System.ComponentModel.ToolboxItem (false)]
    //To the This Web Service to IS Called from script, using ASP. AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebService1:System.Web.Services.WebService
    {
        [WebMethod]
        [Scriptmethod ( Responseformat = Responseformat.json)] public
        int Sum (int a,int b)
        {
            thread.sleep (+);
            return a+b;}}
}

1.3 Summary.

The backend is established and can be debugged on its own.

2 Building the front end

2.1 New Project

Vs2013->new project->web Visual studio2012->asp.net Empty Web application, named "Crossdomain.frontend", the path is arbitrary.

2.2 Creating a File Schema

Schema as shown below

The 2.3 index.html code is as follows:

<! DOCTYPE html>
 

 

 

The 2.4 index.js code is as follows


"Use strict";


$ (document). Ready (function () {
    $ ("#ButtonAjaxRequest"). Click (ajaxcallasmx);
});

var Dtstart;
var dtend;
var administrativelevelstr;
var areaname;

var backendurl = "Http://localhost:5633/WebService1.asmx/Sum";
var proxyurl = "/dotnet/proxy.ashx?";


function Ajaxcallasmx () {
    //displays a matte and blocks user interaction
    $.blockui ({message: ' 
 

 

 

Please note:

1 if the proxy is not used here, there will be a common "cross-domain Error", where the error case is not enumerated, I believe that the reader has encountered a similar problem in this article.

2 The main acts of acting are dotnet/proxy.ashx, and proxy.config files; It is recommended that you place these two files in the same folder. The latest version of this file is detailed in github, download address: Https://github.com/Esri/resource-proxy. The author provides: dotnet/java/php three major versions.



3 Summary

Text to the cross-domain problems of the cause, analysis, solutions, ideas, practice cases were organized. Stay to facilitate the reader less detours, at the same time for their own reference.



4 references

Wang Jiaye, Hu Changchun; improve cross-domain communication with client-side solutions; https://www.ibm.com/developerworks/cn/web/wa-crossdomaincomm/

Javascript:use a Web Proxy for Cross-domain XMLHttpRequest Calls; Https://developer.yahoo.com/javascript/howto-proxy.html



This example code download address: http://download.csdn.net/detail/fanrong1985/9513581