您的位置: 首页  >  IT文章  >  总结Ajax的一些细节

总结Ajax的一些细节

分类: IT文章 • 2022-06-14 16:08:08

Ajax的总结

  • 主要从Ajax是什么？可以用来干什么？基本要素，优缺点，执行过程，跨域的解决方案等几方面来解释。

Ajax是什么？

  • Ajax主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步刷新，使用ajax原生发送请求主要通过XMLHttpRequest对象实现异步通信的效果。

Ajax的工作原理

  • 简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后利用javascript来操作DOm而更新页面，这其中最关键的一步就是从服务器获得请求数据

Ajax要素

  • 实现原生Ajax的核心就是 XMLHttpRequest
  • Ajax请求的重点内容：
    • 请求方式：get/post
      1、get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。
      2、post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。
    • 响应内容：xhr.responseText;(重点)xhr.responseXML
  • 原理：利用script标签向外发出请求不会被拒绝
  • ajax的优缺点
    • 优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验。
    • 缺点：
      1、ajax不支持浏览器back按钮。
      2、安全问题 AJAX暴露了与服务器交互的细节。
      3、对搜索引擎的支持比较弱。
      4、破坏了程序的异常机制。

Ajax的异步刷新

  • iframe 在一个页面内部嵌入一个子页面
    • name属性表示iframe的名称，用于区分不同的iframe
    • iframe属性frameborder表示子页面的边框
    • width和height分别表示子页面的宽高
    • src属性表示嵌入子页面的url地址
  • 可以通过表单的target属性指向iframe的name属性值，表示响应内容在子页面刷新
     <div ></div>
    <form action="./inner.php" method="post" target="abc">
        用户名：<input type="text" name="username">
        密  码：<input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <iframe width="0" height="0" frameborder="0" name="abc"></iframe>

    <?php 

    $uname = $_POST['username'];
    $pw = $_POST['password'];
    // js中的parent表示父级页面
    if($uname == 'admin' && $pw == '123'){
        echo '<script> parent.document.getElementById("info").innerHTML = "登录成功";</script>';
    }else{
        echo '<script> parent.document.getElementById("info").innerHTML = "用户名或者密码错误";</script>';
    }
        
 ?>

ajax的基本操作步骤

  • 执行过程
       // 1、创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 2、配置发送参数
            xhr.open('get','./data.php');
            // 3、执行发送动作
            xhr.send(null);
            // 4、处理响应
            xhr.onreadystatechange = function(){
                if(xhr.status == 200){
                    if(xhr.readyState == 4){
                        // 在这里才可以获取服务器返回的数据
                        var result = xhr.responseText;
                        if(result === '1'){
                            var info = document.getElementById('info');
                            info.innerHTML = '服务器数据已经返回';
                        }
                    }
                }
            }
  • 封装
       function myajax(type,url,param,callback){
    // 1、创建xhr对象
    var xhr = null;
    if(window.XMLHttpRequest){
        // 标准写法
        xhr = new XMLHttpRequest();
    }else{
        // IE的写法
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 2、准备发送参数
    if(type == 'get'){
        // 处理get请求参数，并且进行编码
        url += '?' + encodeURI(param);
    }
    xhr.open(type,url);
    // 3、执行发送动作
    var data = null;
    if(type == 'post'){
        // 如果是post提交，那么就把参数传递给send
        data = param;
        // post提交必须设置请求头
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    xhr.send(data);
    // 4、处理响应（指定回调函数）
    // 下面的回调函数什么时候执行？不确定的
    xhr.onreadystatechange = function(){
        // 判断响应的状态
        if(xhr.status == 200 && xhr.readyState == 4){
            // 获取响应数据
            var result = xhr.responseText;
            // 调用回调函数
            callback(result);
        }
    }
}

ajax的跨域解决方案

jsonp，是一种解决方案，默认是get请求，如果有需求是post请求的话，可以使用CORS跨域资源共享，客服了ajax只能同源请求的限制，实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨域通信。

浏览器将CORS请求分为俩大类，简单强求和非简单请求

ajax的优点和缺点

  • 优点
    可以实现异步通信的效果，实现局部刷新，带来更好的用户体验，按需获取数据，节约带宽资源。
  • 缺点
    ajax不支持浏览器的back按钮。
    安全问题（暴露了与服务器交互的细节）。
    破坏了程序的异常机制。
    对搜索引擎的支持性比较弱。

相关推荐