加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

伪AJAX

发布时间：2020-12-16 03:03:44 所属栏目：百科 来源：网络整理
导读：“伪”AJAX 由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 !DOCTYPE html html ? ???? head l

“伪”AJAX

由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
?
???? <head lang = "en" >
???????? <meta charset = "UTF-8" >
???????? <title>< / title>
???? < / head>
?
???? <body>
?
???????? <div>
???????????? <p>请输入要加载的地址：<span? id = "currentTime" >< / span>< / p>
???????????? <p>
???????????????? < input? id = "url"? type = "text"? / >
???????????????? < input? type = "button"? value = "刷新"? onclick = "LoadPage();" >
???????????? < / p>
???????? < / div>
?
?
???????? <div>
???????????? <h3>加载页面位置：< / h3>
???????????? <iframe? id = "iframePosition"? style = "width: 100%;height: 500px;" >< / iframe>
???????? < / div>
?
?
???????? <script? type = "text/javascript" >
?
???????????? window.onload =? function(){
???????????????? var myDate? =? new Date();
???????????????? document.getElementById( ‘currentTime‘ ).innerText? =? myDate.getTime();
?
???????????? };
?
???????????? function LoadPage(){
???????????????? var targetUrl? =?? document.getElementById( ‘url‘ ).value;
???????????????? document.getElementById( "iframePosition" ).src? =? targetUrl;
???????????? }
?
???????? < / script>
?
???? < / body>
< / html>

原生AJAX

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。

1、XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
a. void? open (String method,String url,Boolen async)
??? 用于创建请求
????
??? 参数：
??????? method： 请求方式（字符串类型），如：POST、GET、DELETE...
??????? url：??? 要请求的地址（字符串类型）
??????? async：? 是否异步（布尔类型）
?
b. void send(String body)
???? 用于发送请求
?
???? 参数：
???????? body： 要发送的数据（字符串类型）
?
c. void setRequestHeader(String header,String value)
???? 用于设置请求头
?
???? 参数：
???????? header： 请求头的key（字符串类型）
???????? vlaue：? 请求头的value（字符串类型）
?
d. String getAllResponseHeaders()
???? 获取所有响应头
?
???? 返回值：
???????? 响应头数据（字符串类型）
?
e. String getResponseHeader(String header)
???? 获取响应头中指定header的值
?
???? 参数：
???????? header： 响应头的key（字符串类型）
?
???? 返回值：
???????? 响应头中指定的header对应的值
?
f. void abort()
?
???? 终止请求

XmlHttpRequest对象的主要属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a. Number readyState
??? 状态值（整数）
?
??? 详细：
?????? 0 - 未初始化，尚未调用 open ()方法；
?????? 1 - 启动，调用了 open ()方法，未调用send()方法；
?????? 2 - 发送，已经调用了send()方法，未接收到响应；
?????? 3 - 接收，已经接收到部分响应数据；
?????? 4 - 完成，已经接收到全部响应数据；
?
b. Function onreadystatechange
??? 当readyState的值改变时自动触发执行其对应的函数（回调函数）
?
c. String responseText
??? 服务器返回的数据（字符串类型）
?
d. XmlDocument responseXML
??? 服务器返回的数据（Xml对象）
?
e. Number states
??? 状态码（整数），如： 200 、 404. ..
?
f. String statesText
??? 状态文本（字符串），如：OK、NotFound...

2、跨浏览器支持

    • XmlHttpRequest
      IE7+,Firefox,Chrome,Opera,etc.
    • ActiveXObject("Microsoft.XMLHTTP")
      IE6,IE5

    • <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open(‘POST‘,"/test/",true);
            // 设置请求头
            xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘);
            // 发送请求
            xhr.send(‘n1=1;n2=2;‘);
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open(‘get‘,true);
            // 发送请求
            xhr.send();
        }

    </script>

</body>
</html>

基于原生AJAX - Demo
      View Code

jQuery Ajax

jQuery其实就是一个JavaScript的类库，其将复杂的功能做了上层封装，使得开发者可以在其基础上写更少的代码实现更多的功能。

  • jQuery 不是生产者，而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject?

注：2.+版本不再支持IE9以下的浏览器

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同