Ajax入门教程（内附源码实例）

最新推荐文章于 2023-05-22 23:12:02 发布

杭州-前端-求内推

最新推荐文章于 2023-05-22 23:12:02 发布

阅读量728

点赞数

分类专栏： ♚Ajax 文章标签： ajax入门教程什么事ajax 同源策略详解表单

本文链接：https://blog.csdn.net/ansenamerson/article/details/71307801

版权

♚Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是 Ajax？

什么是 ajax？

ajax : Asynchronous JavaScript and XML 异步 JavaScript 和 XML，用 javascript 异步形式去操作 xml。

ajax 是用来做什么的？

ajax 要做的事情就是，从某个接口取数据，然后把取出来的数据，根据不同的特性进行不同的处理，然后再将处理后的结果进行进一步的操作，比如说反馈给用户或者进行数据分析。

使用 Ajax 可以做到只更新页面中的一小部分。至于其他内容–标志、导航、头部、脚部、都不用重新加载。只有页面中的一小部分区域会更新，而不必再次加载整个页面。

Ajax 的优势

Ajax 的主要优势就是对页面请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。

你的脚本可以按需加载和创建页面内容，而不会打断用户的浏览体验。利用 Ajax ， web 应用可以呈现出功能丰富、交互敏捷、类似桌面应用般的体验，就像你使用谷歌地图时的感觉一样。

同源策略

在使用 ajax 时，千万要注意同源策略。使用 XMLHttpRequest 对象发送的请求只能访问与其所在的 HTML 处于同一域中的数据，不能向其他域发送请求。此外，有些浏览器还会限制 ajax 请要求使用的协议。比如在 chrome 中，如果你使用 file:// 协议从自己的硬盘里面再加文件，就会看到“跨域请求只支持 THHP 协议”的错误消息。

第一个Ajax程序

var oBtn = document.getElementById('btn');

window.onload = function() {

    var oBtn = document.getElementById('btn');

    //当我点击按钮时候，我要通过`ajax`把`1.tex`里面的内容获取出来
    oBtn.onclick = function() {

        //打开浏览器
        var xhr = new XMLHttpRequest();

        //在地址栏输入地址
        xhr.open('get','1.txt',true);

        //提交
        xhr.send();

        //等待服务器返回内容
        xhr.onreadystatechange = function() {

            if ( xhr.readyState == 4 ) {
                alert( xhr.responseText );
            }

        }

    }
}

3.对象的创建和兼容性处理

异步请求

异步请求有一个很容易被忽略的特性是异步性，就是脚本在发送 XMLHttpRequest 请求之后，仍然会继续执行，不会等待响应返回。为了证明这一点，可以在 request.onreadystatechange 函数和 getNewContent 函数中各添加一个警告框。

现在加载一下页面试试，很可能显示 “Function done” 的警告框会先于 “reponse received” 的警告框出现。这就证明了脚本不会等待 send 的响应，而是会继续执行。

之所以说“很可能”，是因为有时候服务器的响应也会非常快。如果你是从本地硬盘上加载文件，那么在收到响应之前恐怕要等上很长的时间。

为此，如果其他脚本依赖于服务器的响应，那么就要把相应的代码都转移到指定给 onreadystatechange 属性的那个函数中。


function getHTTPObject() {
    var xhr=null;

    try{
        xhr=new XMLHttpRequest();
    }catch(e){
        xhr=new ActiveXObject('Microsoft.XMHTTP');
    }

    return xhr;
}

function getNewContent() {
    var request = getHTTPObject();

    if (request) {
        request.open("GET", 'example.txt', true);
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                alert("reponse received");

                var para = document.createElement('p');
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementsByClassName('new').appendChild(para);
            }
        };
        request.send(null);
    } else {
        alert("sorry, your browser doesn't suppurt new XMLHttpRequest");
    }
    alert('function done');
}

addLoadEvent(getNewContent);

<script type="text/javascript">
window.onload=function(){
    var oBtn=document.getElementById('btn');

    oBtn.onclick=function(){
/*
利用 XMLHttpRequest 创建一个 ajax 对象，然后利用对象的属性和方法去完成一个数据交互的流程

兼容性问题：ie6 及以下不支持 XMLHttpRequest ，用的是 newActiveXObject（'Microsoft.XMHTTP')，这是ie的一个插件
*/

        //首先定义一个对象
        var xhr=null;

        //第一种兼容方式，ie下的兼容：
/*          
在 XMLHttpRequest前面加了 'window.' 在 ie6及 以下才不会报错，这时候 XMLHttpRequest 只是 window下面的一个属性，即使不存在
也不会报错，只会返回undefine，代码如下：
*/
        /*
         if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
         }else{
            xhr=new ActiveXObject('Microsoft.XMHTTP');
         }
        */

        //第二种兼容方式，用异常处理来做兼容
        try{
//代码尝试执行这个块里面的内容，如果有错误，则会执行 catch 里面的代码,并且传入错误信息参数
            xhr=new XMLHttpRequest();
        }catch(e){
            xhr=new ActiveXObject('Microsoft.XMHTTP');
        }

        /*
        open方法参数:
            1.打开方式
            2.地址
            3.是否异步
                异步:非阻塞 前面的代码不会影响后面代码的执行
                同步:阻塞 前面的代码会影响后面代码的执行
        */

        xhr.open('get','1.txt',true);
        //提交
        xhr.send();
        //等待服务器返回内容
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                alert(xhr.responseText);
            }
        }
    }

}
</script>

4.详解表单

<body>

    <!-- 表单：数据的提交 -->
        <!-- action : 数据提交的地址，默认是当前页面 -->
        <!-- method : 数据提交的方式，默认是get方式 -->
            <!-- 1.get -->
                <!-- 把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&amp; -->
                <!-- 进行连接，然后把数据放到url?后面传到指定页面，url长度限制的原因，我们 -->
                <!-- 不要通过get方式传递过多的数据 -->
            <!-- 2.post -->
                <!-- 理论上无限制 -->
        <!-- enctype : 提交的数据格式，默认application/x-www-form-urlencoded -->

    <form action="1.get.php" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
</body>

获取数据

<head>
<title></title>
<script type="text/javascript">
    window.onload=function(){
        var oBtn=document.getElementById('btn');
        oBtn.onclick=function(){

            var xhr=null;

            try{
                xhr=new XMLHttpRequest();
            }catch(e){
                xhr=new ActiveXObject('Microsoft.XMHTTP');
            }


            xhr.open('get','1.txt',true);
            xhr.send();

            //readyState属性：请求状态
                //0：（初始化）还没有调用open方法
                //1：（载入）一调用send方法正在发送请求
                //2：（载入完成）send（）方法以完成，以收到全部响应内容
                //3：（解析）正在解析相应内容
                //4：（完成）响应内容解析完成，可以在客户端调用了

            //onreadystatechange：当状态值 readyState 改变的时候触发
            xhr.onreadystatechange=function(){

                if(xhr.readyState==4){
                    //status:服务器状态，http状态码
                    if(xhr.status==200){
// responseText 这是一个属性，ajax请求返回的数据就被放到了这个属性的下面这里面的所有数据都是字符串类型的
                        alert(xhr.responseText);
                    }else{
                        alert('出错了,Err:'+xhr.status);
                    }
                }
            }
        }

    }
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="Button">
</body>

定时刷新实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src='6ajax.js'></script>
<script type="text/javascript">
    window.onload = function() {
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function() {

            setInterval(function() {
                ajax('get', '6getNews.php', '', function(data) {
                    // JSON 是一个对象，ie 7 以下不支持
                    //利用 JSON.parse 将传进来的数据转换为一个数组
                    var data = JSON.parse(data); 
                    var oUL = document.getElementById('ul1');
                    var html = '';
                    for (var i = 0; i < data.length; i++) {
                        html += '<li><a href="">' + data[i].title + '</a> [<span>' + data[i].date + '</span>]</li>'
                    }
                    oUL.innerHTML = html;
                });
            }, 1000);
        }
    }
</script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="Button">
    <!-- 从后端获取新闻，然后将获取到的新闻放到ul里面，不刷新页面就可以获取到 -->
    <ul id="ul1"></ul>
</body>
</html>

工作中的请求处理get

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
    window.onload=function(){
        var oBtn=document.getElementById('btn');
        oBtn.onclick=function(){

            var xhr=null;

            try{
                xhr=new XMLHttpRequest();
            }catch(e){
                xhr=new ActiveXObject('Microsoft.XMHTTP');
            }

            //get方法出现的问题：
            //  1.缓存问题：在url？后面连接在一个随机数或者时间戳都可以
            //  2.乱码：编码encodeURI
            xhr.open('get','6.get.php?username='+encodeURI('刘伟')+'&age=30&'+new Date().getTime(),true);
            //提交
            xhr.send();


            xhr.onreadystatechange=function(){

                if(xhr.readyState==4){
                    if(xhr.status==200){
                        alert(xhr.responseText);
                    }else{
                        alert('出错了,Err:'+xhr.status);
                    }
                }
            }
        }

    }
</script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="Button">
</body>
</html>

工作中的请求处理post

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
    window.onload=function(){
        var oBtn=document.getElementById('btn');
        oBtn.onclick=function(){

            var xhr=null;

            try{
                xhr=new XMLHttpRequest();
            }catch(e){
                xhr=new ActiveXObject('Microsoft.XMHTTP');
            }

            xhr.open('post','8post.php',true);
            //post方式：数据放在send（）方法里面传递过去
                //如果你在用post传递数据的时候不告诉当前计算机你所传递的数据的格式，计算机就不会处理你传递的
                //信息。通过设置请求头告诉浏览器你所发过去的文档是什么类型。

            //post没有缓存问题，post是用来提交数据的，而提交数据而不会被缓存的，当你从服务器获取的时候它就可
            //能被缓存

            //不存在编码问题
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send('username=leo&age=20');


            xhr.onreadystatechange=function(){

                if(xhr.readyState==4){
                    if(xhr.status==200){
                        alert(xhr.responseText);
                    }else{
                        alert('出错了,Err:'+xhr.status);
                    }
                }
            }
        }

    }
</script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="Button">
</body>
</html>

杭州-前端-求内推

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门教程（内附源码实例）

1.什么是 ajax？ajax : Asynchronous JavaScript and XML 异步 JavaScript 和 XML，用javascript异步形式去操作xml。2.ajax 是用来做什么的？ajax 要做的事情就是，从某个接口取数据，然后把取出来的数据，根据不同的特性进行不同的处理，然后再将处理后的结果进行进一步的操作，比如说反馈给用户或者进行数据分析。
复制链接

扫一扫

专栏目录