总结Ajax的一些细节

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 id="info"></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按钮。

安全问题（暴露了与服务器交互的细节）。

破坏了程序的异常机制。

对搜索引擎的支持性比较弱。

巴特西

总结Ajax的一些细节

Ajax的总结

Ajax是什么？

Ajax的工作原理

Ajax要素

Ajax的异步刷新

ajax的基本操作步骤

ajax的跨域解决方案

ajax的优点和缺点

最新文章

热门文章