Example of jquery ajax cross-origin calling web services using jsonp

Source: Internet
Author: User
Tags httpcontext json web services sub domain to domain

In doing a demo project, you need to php,.net a few people, add together to do a web system. Take into account the language impassability, demo to the urgent. Develop on the way the direct Web uses html+js+asmx services.

The data request and return process is like this:

Understand the above flowchart, in fact, the realization is very simple.

1. Referencing jquery in HTML

2. jquery invokes the remote Web service using AJAX, which needs to be defined as the JSONP format, plus the callback parameter

$.ajax ({
URL: "http://y.com/ceshi.php",
URL: "Http://192.168.3.5:8880/stat.asmx/Login",
DataType: ' Jsonp ',
Data: {
Name: "A",
PWD: "A"
},
JSONP: ' Callback ',
Success:function (Result) {
Alert (json.stringify (result));
},
timeout:3000
});
Which jsoncallback=? is necessary, and requires a parameter combination of the returned JSONP on the server side for this parameter.

Notice here that the real address of the Web service is: the service. Asmx/login parameter. Login is a function name of. Net

3, the server-side to obtain database data, the return value of encapsulation

public void Login (string name, string pwd)
{
Ap. Model.tb_user User = new Tb_user ();
Ap. Bll. Tb_user userbll=new AP. Bll. Tb_user ();
HttpContext.Current.Response.ContentType = "Application/json;charset=utf-8";
String jsoncallback = Checkresponse.getresponse ("callback");
user = Userbll. Getmodel (name, PWD);
String rehtml = Checkresponse.cleaner (Checkresponse.getobjectjson (user));
String returnvalue = "";
returnvalue = returnvalue + (Jsoncallback + "({\" jsondata\ ": \" "+ rehtml +" \ "}));
Return returnvalue;
HttpContext.Current.htm = htm& (returnvalue);
HttpContext.Current.Response.End ();
}

This uses the Newtonsoft serialization component


<summary>
Serializing data to JSON
</summary>
<param name= "Value" ></param>
<returns></returns>
public static string Getobjectjson (object value)
{
return Newtonsoft.Json.JsonConvert.SerializeObject (value);
}

Where the JSONP string may have a special string that needs to be shifted.


<summary>
JSON HTML string escape
</summary>
<param name= "_s" ></param>
<returns></returns>
public static string Cleaner (String _s)
{
if (_s = null) return "";
System.Text.StringBuilder sb = new System.Text.StringBuilder (_s);
Sb. Replace (@ "\", @ "\");
Sb. Replace (@ "", @ "\");
Sb. Replace (@ "" ", @" \ "");
Sb.   Replace (Environment.NewLine, @ "\ n"); Replace the connected \ r \ n
Sb.               Replace ("\ n", @ "\ n"); Single substitution
Sb. Replace ("\ r", @ "\ n");
Return SB. ToString ();
}

You can see that this code is encapsulated according to the callback parameter.

Context. Response.ContentType = "Text/json";
returnvalue = returnvalue + (Jsoncallback + "({\" datata\ ": \" "+ rehtml +" \ "}));


Cross-domain calls are not very difficult things.

Cross-domain related problems and homologous strategies

Domain So troublesome why the browser or the system directly allow not on the line? What is the purpose of the cross domain?

The original intention is primarily browser security policy: homology policy.

JavaScript cannot cross domain because it is restricted by the same origin policy! This refers to the homology strategy, so what is the homology strategy?

Homology strategy (Same Origin Policy), which is a well-known security policy by Netscape. Now all JavaScript-enabled browsers will use this strategy. The homology policy prevents scripts loaded from one domain from getting or manipulating document properties on another domain. In other words, the domain of the requested URL must be the same as the current Web page's domain. This means that browsers isolate content from different sources to prevent action between them.

Why should I use a homology policy?
Answer: Safety! A simple example: a hacker, he used IFRAME to embed the real Bank login page on his page, when you use the real user name, password login, his page can be read through JavaScript to your form input content, so that the user name, password easily hand. The consequences will be very serious!

So what is homology?
The so-called homology refers to domain names, protocols, ports are the same.

Several cases of homology:

1. Different domain names belong to Cross-domain, such as: Www.a.com and www.b.com, in addition www.a.com and www.a.com.cn belong to different domain names.

2. Main domain name and sub domain name (two level domain name, three level domain name, etc.) cross domain, for example: Www.a.com and sub.a.com
Belong to a cross-domain, and sub.a.com and sub1.a.com are also cross domains.

3. The different protocols belong to Cross-domain, such as: Http://www.a.com and https://www.a.com.

4. Different ports, such as: Www.a.com:80 and www.a.com:81.

5.IP and domain names belong to Cross-domain, such as: 123.125.106.16 and t.suchso.com.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.