对Ajax的认识

最新推荐文章于 2021-10-14 20:42:36 发布

tingting@Wang

最新推荐文章于 2021-10-14 20:42:36 发布

阅读量902

点赞数

本文链接：https://blog.csdn.net/Tingting_Wang152/article/details/88861672

版权

Ajax全称Asynchronous javascript and XML,既异步的js 和 XML。Ajax是不是编程语言，是一种常见交互式网页的网页开发技术，异步刷新技术，用来在当前页面响应不同的请求。

同步机制：请求发出方需等到接收方给出响应后，才能处理其他业务；

异步机制：请求发出方在发出请求后，不需要等到接收方给出响应，就可以处理其他业务；

（同步机制是为了保持数据的一致性；异步为了提高效率，减少等待时间，从而提高用户体验）

ajax包含的技术（基于一下技术的组合）：

1.基于web标准，HTML和CSS；

2.使用DOM进行动态展示和交互；

3.使用XMLHttpRrequest进行来和服务器进行异步通信（异步查询、检索）

4.使用javascript绑定和调用

Ajax的原理：

简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

Ajax伪造：

iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求（不刷新整个URL就能加载不同的信息）

写一个简单粗糙的demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪造AJAX</title>
</head>
<body>
    请输入要嵌入的url：<input type="text" id="urlText"><button onclick="loadPage()">提交</button>
    <br>
    <iframe id="iframePosition" style="width: 100%;height:900px;"></iframe>
</body>
<script>
    function loadPage(){
        var urlText = document.getElementById("urlText").value;
        document.getElementById("iframePosition").src = urlText;
    }
</script>
</html>

原生Ajax：

function myAjax(){
        var httpRequest =new XMLHttpRequest();  //创建XMLHttpRequest对象
        // get方式
        httpRequest.open('get',"url",true);  //true 是否允许异步
        httpRequest.send(null);

        // post方式
        // httpRequest.open('POST',"url",true);  //true 是否允许异步
        // httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8'); //必需
        // httpRequest.send('参数1=a & 参数2=b;'); 

        httpRequest.onreadystatechange = function(){
            if(httpRequest.readyState == 4 && httpRequest.status==200){
                var data = httpRequest.responseText; //响应数据
                console.log(data); 
            }
        }
    }

jquery的Ajax：

 function myHttpRequest(){
        $ajax({
            url: "请求地址",
            type:'POST',  //请求方式, 默认为"GET",注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
            data:{
                username:$('.username').val(),
                password:$('.password').val(),
            }, // 发送到服务器的数据,将自动转换为请求字符串格式,GET 请求中将附加在 URL 后
            dataType:'text',  //预期服务器返回的数据类型xml、html、scropt、json、jsonp、text
            success:function(data){   //成功返回的结果
              if(data.status){
                console.log(data)
              }
            },
            error:function(err){
                console.log(err)
            }
        })
    }

Ajax的优点：

1.页面无刷新，用户体验好；

2.异步通信，具有更加迅速的响应能力；

3.Ajax的原则是"按需所取"，可以最大程度的减少冗余请求和相应对服务器造成的负担；

4.基于标准化的被广泛支持的技术，不需要下载插件和小程序。

Ajax的缺点：

1.Ajax不支持浏览器返回按钮；

2.安全问题，Ajax暴露了与服务器交互的细节；

3.对搜索引擎(浏览器)的支持较弱；

4.破坏了程序的异常机制；

6.一些手持设备（如手机、PDA等）现在还不能很好的支持ajax；

7.如果用户禁用了JS，网站就取不到数据；

8.不易于调试.

tingting@Wang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对Ajax的认识

Ajax全称Asynchronous javascript and XML,既异步的js 和 XML。Ajax是不是编程语言，是一种常见交互式网页的网页开发技术，异步刷新技术，用来在当前页面响应不同的请求。同步机制：请求发出方需等到接收方给出响应后，才能处理其他业务；异步机制：请求发出方在发出请求后，不需要等到接收方给出响应，就可以处理其他业务；（同步机制是为了保持数据的一致性；异步为...
复制链接

扫一扫