Home > Developer > JavaScript
Detailed decryption of jsonp cross-origin requests, decryption of jsonp
1. What is a cross-origin request:
A page on server A requests A handler on server B, which is called A cross-origin request.
The test page is:
The handler kimhandler. ashx is as follows:
% @ WebHandler Language = "C #" Class = "KimHandler" %> using System; using System. web; public class KimHandler: IHttpHandler {public void ProcessRequest (HttpContext context) {string msg = "{\" name \ ": \" kim \ ", \" gender \": \ "male \", \ "age \": 24} "; context. response. write (msg);} public bool IsReusable {get {return false ;}}}
Another handler. ashx is as follows:
<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { string callbackName = context.Request.Params["callbackFun"]; string msg = callbackName+ "({\"name\":\"kim\",\"age\":\"18\"});"; context.Response.Write(msg); } public bool IsReusable { get { return false; } }}
2. Ajax cannot implement cross-origin requests
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> </title> <script> var requestUrl =" http://qxw1192430265.my3w.com/kimhandler.ashx "; window. onload = function () {document. getElementById ("btnAjax "). onclick = function () {var xhr = new XMLHttpRequest (); xhr. open ("get", requestUrl, true); xhr. setRequestHeader ("If-Modified-Since", 0); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {var res = xhr. responseText; alert (res) ;}} xhr. send (null );}} </script>
Check the monitor and no request style is returned.
3. Use the script tag to implement cross-origin requests
The test code is as follows:
<!DOCTYPE html>
View the monitor. You can see that a style of request message is returned.
In json format, see
4. Use jsOn the browser side, the read response is data.
The test code is as follows. Note that a handler is replaced.
<!DOCTYPE html>
The background Code shows that
Then look at the monitor.
Found in the browser, pop-up kim has 18
5. Use Jq to implement cross-origin requests(The internal principle is to create a script tag for us)
The Code is as follows:
<! DOCTYPE html>
After clicking the button, you can see the effect and check the monitor again.
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
