AJAX-简单示例

最新推荐文章于 2023-04-28 09:58:11 发布

Co_zy

最新推荐文章于 2023-04-28 09:58:11 发布

阅读量380

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Co_zy/article/details/76596059

版权

web前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

一个简单的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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX-简单示例

一个简单的AJAX示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AJAX</title> <script> function getXMLHttpRequest() { try { try{
复制链接

扫一扫