This article describes how to configure multiple domain names for Apache and then use jsonp (JSON with padding) to solve the JSON cross-domain problem.
Before reading this article, we recommend that you refer to the second advanced JSON Ajax method to transmit JSON data.
1. Configure multiple domain names in Apache
Find httpd. conf In the conf directory of Apache, and add the following content at the end of the file:
# Declaring virtual host filtering rules
Namevirtualhost *: 80
# Localhost
<Virtualhost *: 80>
Servername localhost
DocumentRoot "D: \ XAMPP \ htdocs \ www"
</Virtualhost>
# Virtual host test.mw.com
<Virtualhost *: 80>
Servername test.mw.com
DocumentRoot "D: \ XAMPP \ htdocs \ test.mw.com"
</Virtualhost>
The first is to ensure that the original localhost can continue to work, and the second is the newly added domain name test.mw.com.
Then modify the host file (in c: \ windows \ system32 \ drivers \ etc \)
Added:
# Test.mw.com
127.0.0.1test.mw.com
Note that you must restart the apache service after modifying httpd. conf.
Copy the json2.php in the json advanced second Ajax method to the d: \ XAMPP \ htdocs \ test.mw.com directory, and then enter the URL http://test.mw.com/json2.php in the browser.
The running result is as follows:
In the browser, we can see that the JSON string description shown above has successfully added a new domain name for Apache, and then we will try out the cross-domain name JSON problem.
Change "json2.php" in "$. Post (" json2.php ", {}, function (data) {" in json2.html to "success. After clicking the button in json2.html, you can find that the operation is ineffective.
Use firebug in Firefox to view the detailed Ajax response process after clicking the button. You can see that the Ajax request information has been sent to the server (that is, 127.0.0.1: 80), but due to security issues, the data returned by the server is blocked.Cross-origin problems.
Ii. jsonp -- solve the JSON cross-origin Problem
Using jsonp (JSON with padding) can solve the JSON cross-domain problem, jsonp principle can access the http://zh.wikipedia.org/zh-cn/JSONP,Simply put, it is used.<SCRIPT>Open policies owned by tags (compared with same-domain policies). The following describes how to use jsonp.
Jsonp can be used in two steps:
First, in the HTML file
$. Post ("http://test.mw.com/json2.php", {}, function (data ){
Change
$. Getjson ("http://test.mw.com/json2.php? Format = JSON & jsoncallback =? ", {}, Function (data ){
Second, the final
Echo $ article_json;
Change
Echo $ _ request ['jsoncallback']. "(". $ article_json .")";
After modifying these two locations, you can solve the JSON cross-domain problem.
The example program is also provided below, which is divided into json2.php and json2.html, and a button on json2.html. After pressing the button, an Ajax request is sent to obtain the cross-domain JSON data returned by json2.php. Pay attention to the comparison with the code in the previous article "JSON advanced second Ajax transmission of JSON data.
1. json2.php
<? PHP // By morewindows (http://blog.csdn.net/MoreWindows) $ article_array = array (Array ("ID" => "001", "title" => "php accessing MySQL database elementary ", "Link" => "http://blog.csdn.net/morewindows/article/details/7102362"), array ("ID" => "001", "title" => "php accessing MySQL database intermediate smarty technology ", "Link" => "http://blog.csdn.net/morewindows/article/details/7094642"), array ("ID" => "001", "title" => "php advanced Ajax technology for MySQL database access ", "Link" => "http://blog.csdn. Net/morewindows/article/details/7086524 "),); $ article_json = json_encode ($ article_array); // echo $ article_json; echo $ _ request ['jsoncallback']. "(". $ article_json. ")";?>
2.json2.html // By morewindows (http://blog.csdn.net/MoreWindows)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <HTML xmlns =" http://www.w3.org/1999/xhtml ">Use firebug in Firefox to view the detailed Ajax response process after clicking the button. You can see that JSON data after cross-origin is received.
If you are interested, you can try this method again:
Run http://test.mw.com/json2.php
Echo $ _ request ['jsoncallback']. "(". $ article_json .")";
Change
Echo "showdata ($ article_json )";
Then
$ (Document). Ready (function (){...}
Change
Function showdata (data) {var g_jsonstr = eval (data); var ilen = g_jsonstr.length; var detailhtml = ""; for (VAR I = 0; I <ilen; I ++) {var divhtml = '<Div id = \ "Div _' + I + '\" onmouseenter = \ "onmouseenterdivinfo (this, \ ''+ g_jsonstr [I] ['link'] + '\'); \" onmouseleave = \ "onmouseleavedivinfo (this); \"> '; divhtml + = 'You can also get the data. (If you move the cursor to the title, a prompt will not be triggered ).
In addition, there is a small question about JSON:
$array1 = array("a", "b");$array2 = array('001'=>"a", '002'=>"b");$json1 = json_encode($array1);$json2 = json_encode($array2);echo $json1 . "<br />";echo $json2 . "<br />";Output
["A", "B"]
{"001": "A", "002": "B "}
This indicates that $ json1 is an array and $ json2 is an object. Upload $ json1 and $ json2 to the JS Code. $ json1.length is valid, but $ json2.length is undefined. Readers can compare the differences between the array $ article_array in json2.php and the previous one.
At this point, all three advanced sections of JSON are completed. The following lists the directories for your reference:
1. JSON advanced Article 1 use JSON in PHP and JavaScript
2. JSON advanced Article 2 transmitting JSON Data Using ajax
3. JSON advanced Article 3 Apache multi-domain name and JSON cross-domain problem (jsonp)
Reprinted please indicate the source, original address: http://blog.csdn.net/morewindows/article/details/7235992
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
