<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> window.onload = function(){ //绑定click事件 document.getElementById('btnok').onclick = function(){ //模拟ajax //1.穿件ajax对象 var xhr = new XMLHttpRequest(); //2.设置回调函数 xhr.onreadystatechange = function(){ //6.判断与执行 if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } //3.初始化ajax对象 xhr.open('post','http://www.test.com/aajx.php'); //4.设置请求头 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //5.发送ajax请求 xhr.send(null); } } </script> </head> <body> <input type="button" id="btnok" value="获取数据" /> </body> </html>
PHP代码如下所示：
<?php echo "hello ajax";
什么是跨域请求
说明：当我们在某个域名下通过Ajax访问另外一个域名下的文件时，用于受到浏览器限制（同源策略），其不允许我们直接访问远程资源，我们把这种情况就称之为Ajax跨域请求。
官方解析
Ajax技术由于受到浏览器的限制，该方法不允许跨域通信。
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。
解决方案
1）虽然Ajax不允许跨域请求，但是我们的script标签可以实现跨域请求操作
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> function callback(msg){ //msg = 'hello ajax'; alert(msg); } </script> <script language="javascript" src="http://www.test.com/aajax.php?fn=callback" ></script> </head> <body> <input type="button" id="btnok" value="OK" /> </body> </html>
<script language="javascript" src="http://www.test.com/aajax.php?fn=callback" ></script>
这段代码相当于//callback('hello ajax'); 直接调用了上面的函数
PHP代码如下：
<?php $fn = $_GET['fn']; //这里接收的fn 相当于callback $str = "hello ajax"; //把最终返回结果赋值给$str echo $fn.'("'.$str.'")'; //callback("hello ajax")
以上这种的确可以决解ajax跨域请求问题，但是还存在一些不足，当我们刷新页面，系统就会自动弹出服务器端返回结果，这对我们非常的不方便。
通过动态生成script标签决解跨域问题
示例代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> function callback(msg){ //msg = 'hello ajax'; alert(msg); } window.onload = function(){ //绑定按钮click事件 document.getElementById('btnok').onclick = function(){ //1.动态生成script标签 var script = document.createElement('script'); script.src = "http://www.test.com/aajax.php?fn=callback"; //2.追加script标签到head标签中 document.getElementsByTagName('head')[0].appendChild(script); } } </script> </head> <body> <input type="button" id="btnok" value="OK" /> </body> </html>
这种方法是单一数据的情况...