博客

AJAX-简单示例

  • Post author:
  • Post category:其他


一个简单的AJAX示例

这里写图片描述 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script>
        function getXMLHttpRequest() {
            try {
                try{
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){
                    return new ActiveXObject("Msxml2.XMLHTTP");
                }
            } catch(e) {
                    return new XMLHttpRequest();
            }

                }

        function responseAjax(){
            if(myRequest.readyState ==4){
                if(myRequest.status == 200){
                    alert("The server said:"+myRequest.responseText);
                }else{
                    alert("error:"+myRequest.statusText);
                }
            }
        }

        var myRequest = getXMLHttpRequest();
        function callAjax(){
            var lastname = 'Numb';
            var url="http://123.206.17.200/hello.php";
            myRequest.open('GET',url)
            myRequest.onreadystatechange = responseAjax;
            myRequest.send()
        }
    </script>
</head>
<body>
    <button id="btn" onclick="callAjax()">按钮</button>
</body>
</html>

页面很简单,只有一个button,添加了一个onclick事件,有三个函数,分别是


getXMLHttpRequest():

针对不同浏览器,获取XMLHttpRequest实例


responseAjax():

回调函数,当浏览器请求完成后执行,返回服务器返回的数据,responseText


callAjax():

发送服务器请求,open()和send()方法

假设服务器用如下的一个简单PHP文件: 

<?php echo "Hello Ajax caller";?>

如果XMLHttpRequest成功调用了这个文件,responseText属性就会发哦韩字符串”Hello Ajax caller”,如下图


注意:要访问的必须是同域下文件,同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。


什么事跨域访问:在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。


跨域访问可用CORS,以后更新

这里写图片描述


版权声明：本文为Co_zy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。