一. XMLHTTPRequest对象

最新推荐文章于 2024-06-28 12:02:40 发布

qinjing1225

最新推荐文章于 2024-06-28 12:02:40 发布

阅读量204

点赞数

分类专栏： Js-ajax 文章标签： javascript

本文链接：https://blog.csdn.net/qinjing1225/article/details/104500919

版权

Js-ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax：是对Asynchronous Javascript + XML 的简写，它是无须刷新页面也可以从服务器取得数据的一种方法。总结为以下几方面：

1.负责Ajax的运作核心对象是XMLHTTPRequest（XHR）对象;
2.
3.

Ajax的工作流程

0-4 表示： xhr对象的readyState属性的属性值；该属性表示请求/响应过程的当前活动阶段；

0 UNSENT 未初始化。未发送请求。尚未调用open()方法
1 OPENED 启动。已经调用open()方法，尚未调用send()方法
2 HEADERS_RECEIVED 发送。已经调用send()方法，尚未接到响应（即未返回内容，只返回了响应头部）
3 LOADING 接收部分数据中。（返回内容，数据量大，分批返回）
4 DONE 完成。（数据完全接受完成，可以在客户端使用了）

1.1 XHR的用法

1.1.1 xhr.open();

3个参数：
第一个：发送的请求的类型（get、post等）
第二个：请求的URL;
第三个：是否异步发送请求的布尔值；
false 同步
在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个执行将会一直等待下去，直到收到返回信息才继续执行下去

true 异步
不需要一直等下去，而是继续执行下面的操作，不管其他执行的状态。当有消息返回时系统会进行通知处理，这样可以提高执行的效率。
注意：只能向同一个域中使用相同端口和协议的URL发送请求，如果URL与启动的页面由有任何差异，就会引发安全错误；

1.1.2 xhr.send();

1个参数：
作为请求主体发送的数据；

注意：如果不需要请求主体发送数据，则必须传入null；因为这个参数对有些浏览器是必要的；

1.1.3 readystatechange事件；

只要readyState的值变化一次，就会触发一次readystatechange事件。可以利用这个事件检测每个状态变化后readystate的值；

<body>
    <input type="text" id="username"><span id="tip"></span>
    <input type="button" value="验证" id="btn"/>
    <input type="submit">
    <script>
        btn.onclick = function (){
            // 向后端发送数据，查询名字是否存在
			// 和服务器进行交互
            let xhr = new XMLHttpRequest();
            console.log(xhr.readyState)//0
            xhr.open(
                'post',
                'http://192.168.2.79/backend/php/post.php',
                true
            );
            // 4. 响应触发的事件
            // 监控ajax每一个步骤，ajax每进行一步都会触发这个事件
            console.log(xhr.readyState)//1
            xhr.onreadystatechange = function (){
                if(xhr.readyState === 4){  
                    console.log(xhr.readyState)//2 3 4
                    console.log(xhr.responseText)// '' '可以注册啦' '可以注册啦'        }
            }
            // 只要触发onload，ajax的步骤已经进行到了第五步，也就是xhr.readyState = 4；
			// 数据完全接完成，拿数据做事情了
            xhr.onload = function (){
                console.log('我回来了')
                tip.innerHTML = xhr.responseText;

            }
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            // 3.发送
            xhr.send('user='+username.value);
        };
        </script>
</body>

1.2 HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，怎样操作这两种头部(请求头部和响应头部)信息；

1.2.1 默认情况下，发送xhr请求时，还会发送下列头部信息：

1.2.2 利用setRequestHeader()方法，设置自定义的请求头部信息；

2个参数：
第一个：头部字段的名称；
第二个：头部字段的值；
使用：在调用open()方法之后，调用send()方法之前；
注意：建议使用自定义头部信息，使用默认头部可能会影响服务器的响应；
有的浏览器允许重写默认头部信息，有的则不允许；

 例子1:
 <body>
    <input type="text" id="username"><span id="tip"></span>
    <input type="button" value="验证" id="btn"/>
    <input type="submit">
    <script>
        btn.onclick = function (){
            let xhr = new XMLHttpRequest();
            xhr.open(
                'post',
                'http://192.168.2.79/backend/php/post.php',
                true
            );
             xhr.onload = function (){
                console.log('我回来了')
                tip.innerHTML = xhr.responseText;

            }
            //重写头部信息
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

            xhr.send('user='+username.value);
        };
        </script>
</body>

1.2.3 利用getAllResponseHeaders()方法，拿到所有头部信息；

xhr.getAllResponseHeaders()返回的是格式化的多行文本，如下：

date: Tue, 05 Sep 2017 10:20:59 GMT
server: Apache/2.2.31 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.1.1 mod_ssl/2.2.31 OpenSSL/1.0.2j DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9 Perl/v5.24.0
connection: Keep-Alive
x-powered-by: PHP/7.1.1
content-length: 33
keep-alive: timeout=5, max=100
content-type: text/html;charset=utf-8


例子1:
<body>
    <input type="text" id="username"><span id="tip"></span>
    <input type="button" value="验证" id="btn"/>
    <input type="submit">
    <script>
        btn.onclick = function (){
            let xhr = new XMLHttpRequest();
            xhr.open(
                'post',
                'http://192.168.2.79/backend/php/post.php',
                true
            );
            xhr.onreadystatechange = function (){
              if(xhr.readyState === 4){ 
                   console.log(xhr.getAllResponseHeaders())
                    //date: Tue, 05 Sep 2017 10:16:09 GMT
                    // server: Apache/2.2.31 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.1.1 mod_ssl/2.2.31 OpenSSL/1.0.2j DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9 Perl/v5.24.0
                    // connection: Keep-Alive
                    // x-powered-by: PHP/7.1.1
                    // content-length: 12
                    // keep-alive: timeout=5, max=98
                    // content-type: text/html;charset=utf-8
                }
            }
            xhr.onload = function (){
                tip.innerHTML = xhr.responseText;

            }
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

            xhr.send('user='+username.value);
        };
    
    </script>
</body>

1.3 GET请求

<body>
<input type="text" id="username"><span id="tip"></span>
<input type="button" value="验证" id="btn"/>
<input type="submit">
<script>
    btn.onclick = function (){
        let xhr = new XMLHttpRequest();
        xhr.open(
            'get',
            'http://192.168.2.79/backend/php/get.php?user='+username.value,
            true
        );
        xhr.onload = function (){
            tip.innerHTML = xhr.responseText;

        }
        xhr.send();
    };

</script>

1.4 POST请求

<body>
<input type="text" id="username"><span id="tip"></span>
<input type="button" value="验证" id="btn"/>
<input type="submit">
<script>
    btn.onclick = function (){
        let xhr = new XMLHttpRequest();
        console.log(xhr.readyState)//0
        xhr.open(
            'post',
            'http://192.168.2.79/backend/php/post.php',
            true
        );
        xhr.onload = function (){
           tip.innerHTML = xhr.responseText;

        }
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.send('user='+username.value);
    };

</script>

1.5 封装ajax函数

 function ajax(option){
    //默认值覆盖option；
    let defaluts =  Object.assign({
        url:'',
        method:'get',
        data:'',
        success(){},
        error(){}
    },option);
    //url不能为空；
    if(defaluts.url === ""){
        throw new Error('地址不能为空！')
    }
    let xhr = new XMLHttpRequest();
    //如果是get请求，请求的数据是放在地址栏的？之后
    if(defaluts.method.toLowerCase() === 'get'){
        defaluts.url = defaluts.url +'?'+ defaluts.data
    }
    //启动数据请求；
    xhr.open(defaluts.method,defaluts.url,true);
    //响应接收完毕后，触发onload事件；
    xhr.onload = function(){
        //判断http的请求状态是否成功
        if(xhr.status === 200){
            //请求的数据成功，执行此函数，并且把响应主体的文本传入；
            defaluts.success(xhr.responseText);
        }else{
            //请求的数据不成功，执行此函数，并且把http状态已经状态码传入；
            defaluts.error(xhr.status,xhr.statusText);
        }
    }
    //判断请求数据的方式，post／get

    if(defaluts.method.toLowerCase() === 'get'){
        xhr.send();
    }else if(defaluts.method.toLowerCase() === 'post'){
        //需要自定义头部信息；因为post的请求数据有三种类型：文本、二进制和默认形式(key:value)
       //需要告诉后端传输的是post中的哪一种编码格式
        xhr.setRequestHeader('Content-Type',
		'application/x-www-form-urlencoded');
        //把请求数据主体作为send的参数
        xhr.send(defaluts.data);
    }
}

get和post的区别，讨论的范围的是浏览器

get 方式
http://localhost:8088/backend/php/get.php?user=leo123&password=222
发送数据的方式
在地址栏中?的后面，就是查询信息
key=value&lkey2=value2&key3=value3 成为为queryString
浏览器对地址有长度有限制
所以get的数据会有限制
不安全，发送一些无关紧要的
浏览器好缓存地址

post
http://localhost:8088/backend/php/post.php
发送数据的方式
放在HTTP的请求body（主体）发送的
理论上没有大小限制
服务端会有限制
理论上是安全的
设置请求头：
xhr.setRequestHeader( ‘Content-Type’,
‘application/x-www-form-urlencoded’);

qinjing1225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一. XMLHTTPRequest对象

Ajax：是对Asynchronous Javascript + XML 的简写，它是无须刷新页面也可以从服务器取得数据的一种方法。总结为以下几方面：1.负责Ajax的运作核心对象是XMLHTTPRequest（XHR）对象;2.3.Ajax的工作流程0-4 表示： xhr对象的readyState属性的属性值；该属性表示请求/响应过程的当前活动阶段；0 UNSENT 未初始化。未发送...
复制链接

扫一扫

专栏目录