1. 实现原理
AJAX即“AsynchronousJavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。（来源百度百科）。
其中核心是JavaScript脚本，然而JavaScript为了安全，所以在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
这样一来就会产成不同域名与域名间页面不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在abc.youdomain.com下的页面，不能向edf. youdomain.com提交Ajax请求(如图)，等等。
2 服务器端功能编写
如何实现：下是请求的PHP代码。很简单，就是一个输出功能。。。
AjaxRequest.php
1 <?php
2 /**
3 * 实现不同域名间数据请求
4 *
5 * Project: Tiwer && PHP Developer Framework
6 *
7 * Site: http://wgw8299.cnblogs.com/
8 *
9 * Author: wgw8299 && Tiwer <wgw8299(AT)163.com>
10 *
11 * $Id: AjaxRequest.php 241 2010-09-28 08:14:01 wgw8299 $
12 *
13 * Copyright (C) 2008-2009 Tiwer All Rights Reserved.
14 */
15
16 /* Input Data */
17 echo "Hello World! My is Different Domain Ajax Request Data";
18
19 ?>
2 /**
3 * 实现不同域名间数据请求
4 *
5 * Project: Tiwer && PHP Developer Framework
6 *
7 * Site: http://wgw8299.cnblogs.com/
8 *
9 * Author: wgw8299 && Tiwer <wgw8299(AT)163.com>
10 *
11 * $Id: AjaxRequest.php 241 2010-09-28 08:14:01 wgw8299 $
12 *
13 * Copyright (C) 2008-2009 Tiwer All Rights Reserved.
14 */
15
16 /* Input Data */
17 echo "Hello World! My is Different Domain Ajax Request Data";
18
19 ?>
Domain.html 域名中转文件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>域名文件</title>
6 <script language="JavaScript" type="text/javascript">
7 <!--
8 /* Set Current Domain */
9 document.domain = "youdomain.com";
10
11 /* defin XMLHttpRequest Array Object */
12 var requestArray = [
13 function() { return new XMLHttpRequest(); },
14 function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
15 function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
16 ];
17
18 /* Get New Compatible XMLHttpRequest Object */
19 function GetDomainRequest() {
20 for( var i = 0; i < requestArray.length; i++ ) {
21 try {
22 var factory = requestArray[i];
23 return factory();
24 } catch(e) {
25
26 }
27 }
28 return null;
29 }
30 //-->
31 </script>
32 </head>
33 <body>
34 </body>
35 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>域名文件</title>
6 <script language="JavaScript" type="text/javascript">
7 <!--
8 /* Set Current Domain */
9 document.domain = "youdomain.com";
10
11 /* defin XMLHttpRequest Array Object */
12 var requestArray = [
13 function() { return new XMLHttpRequest(); },
14 function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
15 function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
16 ];
17
18 /* Get New Compatible XMLHttpRequest Object */
19 function GetDomainRequest() {
20 for( var i = 0; i < requestArray.length; i++ ) {
21 try {
22 var factory = requestArray[i];
23 return factory();
24 } catch(e) {
25
26 }
27 }
28 return null;
29 }
30 //-->
31 </script>
32 </head>
33 <body>
34 </body>
35 </html>
客户端编写
现实Ajax数据 index.html
1
<!
DOCTYPE html
PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
2 < html xmlns = " http://www.w3.org/1999/xhtml " >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />
5 < title > Ajax Sub Domain Request </ title >
6 < script language = " JavaScript " src = " ./js/jquery.js " type = " text/javascript " ></ script >
7 < script language = " JavaScript " type = " text/javascript " >
8 <!--
9 /* Set Domain */
10 document . domain = " youdomain.com " ;
11 var serverUrl = " temp.youdomain.com " ;
12
13 /* Ajax Global Objcet */
14 var ajax = {};
15
16 $( function (){
17 $( " #ajaxIframe " ) . attr( " src " , " http:// " + serverUrl + " /server/Domain.html " )
18 });
19
20 /* Ajax Request Event */
21 function ajaxDomain() {
22 var request = window . frames[ " ajaxIframe " ] . GetDomainRequest();
23 ajax = request;
24
25 /* Ajax Object Is Null */
26 if ( ajax != null ) {
27 ajax . onreadystatechange = stateChange;
28 ajax . open( " GET " , " http:// " + serverUrl + " /server/AjaxRequest.php " );
29 ajax . send( null );
30 }
31 }
32
33 /* AjaxChage Info Show */
34 function stateChange() {
35 if ( ajax . readyState == 4 ) {
36 if ( ajax . status == 200 ) {
37 $( " #AjaxDateShow " ) . text(ajax . responseText);
38 } else {
39 alert( ' Error! Please Check Your Server Data Request... ' );
40 }
41 }
42 }
43 // -->
44 </ script >
45 < style type = " text/css " >
46 # AjaxDateShow{border:solid 1px #666;background-color:#9CC;height:30px;width:600px;line-height:30px;color:#C00;font-weight:bold;}
47 </ style >
48 </ head >
49 < body >
50 < center >
51 < iframe name = " ajaxIframe " id = " ajaxIframe " style = " display:none " ></ iframe >
52 < p >< a href = " # " onClick = " ajaxDomain(); return false; " > Click Ajax Request </ a ></ p >
53 < div id = " AjaxDateShow " ></ div >
54 < br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />
55 < h4 >< a href = " http://wgw8299.cnblogs.com/ " > Copyright (C) 2008 - 2009 Tiwer All Rights Reserved . </ h4 >
56 </ center >
57 </ body >
58 </ html >
59
2 < html xmlns = " http://www.w3.org/1999/xhtml " >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />
5 < title > Ajax Sub Domain Request </ title >
6 < script language = " JavaScript " src = " ./js/jquery.js " type = " text/javascript " ></ script >
7 < script language = " JavaScript " type = " text/javascript " >
8 <!--
9 /* Set Domain */
10 document . domain = " youdomain.com " ;
11 var serverUrl = " temp.youdomain.com " ;
12
13 /* Ajax Global Objcet */
14 var ajax = {};
15
16 $( function (){
17 $( " #ajaxIframe " ) . attr( " src " , " http:// " + serverUrl + " /server/Domain.html " )
18 });
19
20 /* Ajax Request Event */
21 function ajaxDomain() {
22 var request = window . frames[ " ajaxIframe " ] . GetDomainRequest();
23 ajax = request;
24
25 /* Ajax Object Is Null */
26 if ( ajax != null ) {
27 ajax . onreadystatechange = stateChange;
28 ajax . open( " GET " , " http:// " + serverUrl + " /server/AjaxRequest.php " );
29 ajax . send( null );
30 }
31 }
32
33 /* AjaxChage Info Show */
34 function stateChange() {
35 if ( ajax . readyState == 4 ) {
36 if ( ajax . status == 200 ) {
37 $( " #AjaxDateShow " ) . text(ajax . responseText);
38 } else {
39 alert( ' Error! Please Check Your Server Data Request... ' );
40 }
41 }
42 }
43 // -->
44 </ script >
45 < style type = " text/css " >
46 # AjaxDateShow{border:solid 1px #666;background-color:#9CC;height:30px;width:600px;line-height:30px;color:#C00;font-weight:bold;}
47 </ style >
48 </ head >
49 < body >
50 < center >
51 < iframe name = " ajaxIframe " id = " ajaxIframe " style = " display:none " ></ iframe >
52 < p >< a href = " # " onClick = " ajaxDomain(); return false; " > Click Ajax Request </ a ></ p >
53 < div id = " AjaxDateShow " ></ div >
54 < br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />
55 < h4 >< a href = " http://wgw8299.cnblogs.com/ " > Copyright (C) 2008 - 2009 Tiwer All Rights Reserved . </ h4 >
56 </ center >
57 </ body >
58 </ html >
59
原创作者：Tiwer
文章出处：http://wgw8299.cnblogs.com/
关于作者：专注于互联网技术研究与开发、企业信息化解决方案。现主要从事PHP, WinForm、ASP.NET、JavaScript、UI、CSS、Linux/Uinx、C++,Google Android等方面的项目开发、架构工作。
版权说明:本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
