Ajax简单使用与Http协议

2019-12-25  本文已影响0人  1CC4

允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

一、AJAX

1、介绍

AJAX属于异步操作

2、好处：

3、异步刷新技术

二、HTTP协议（超文本传输协议）

HTTP是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。

1、响应模式

2、主要特点

3、请求request

请求行以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本，
格式：Method Request-URL HTTP-Version CRLF

Method：表示请求方法；
Request-URI：表示一个统一资源标识符；
HTTP-Version：表示请求的HTTP协议版本；
CRLF：表示回车和换行（除了作为结尾的CRLF外，不允许出现单独的CR或LF字符）。

4、响应response

格式：HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version：表示服务器HTTP协议的版本；
Status-Code：表示服务器发回的响应状态代码；
Reason-Phrase：表示状态代码的文本描述。

状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

常见状态代码 --状态描述--说明：

三、使用Ajax

1、XMLHttpRequest

XHR对象：是XMLHttpRequest对象的缩写，封装在window对象中，封装了发送AJAX请求、接收响应的属性以及方法。JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力

1、XHR对象的创建：


如果XMLHttpRequest对象存在，则把 xhr 的值设为该对象的新实例。如果不存在，就去检测 ActiveObject 的实例是否存在，如果答案是肯定的，则把微软 XMLHTTP 的新实例赋给 xhr

2、常用方法


3、常用属性

就绪状态是4而且状态码是200，才可以处理服务器数据

四、示例

 <h2>AJAX请求数据</h2>
    <div>
        <p id="title"></p>
        <i id="content"></i>
    </div>

   // 1、创建XMLHttpRequest对象
    const xhr = new window.XMLHttpRequest;
    //2、建立连接 open(请求方式，url地址，是否异步);
    xhr.open('GET', 'http://192.168.0.100:8089/api/list', true);
    // 3、发送请求 send()
    xhr.send();
    // 4、接收响应
    xhr.onreadystatechange = e => {
        // 判断ajax响应状态
        if (e.target.readyState == 4) {//readyState=4：响应的内容解析完毕，可以在客户端使用了--完成
            // 判断是否响应成功
            if (e.target.//xhr.status:获取当前服务器的响应状态  200=>成功
                status == 200) {
                const pElment = document.getElementById('title');
                pElment.innerHTML = e.target.responseText;
            } else {//请求出错将状态码显示出来
                const iEmlent = document.getElementById('content');
                iEmlent.innerHTML = e.target.status;
            }
        }
    }

得到服务器JSON对象：

五、封装调用

let XMLHttpPromiseObj = (method, url, parmas) => {
    return new Promise((resovled, rejected) => {
        // 1、创建XMLHttpRequest对象
        const xhr = new window.XMLHttpRequest;
        //2、建立连接 open(请求方式，url地址，是否异步);        
        xhr.open(method, url, true);
        // 如果想要使用post提交数据,必须添加此行
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 3、发送请求 send()
        xhr.send(parmas);
        // 4、接收响应
        xhr.onreadystatechange = e => {
            // 判断ajax响应状态
            if (e.target.readyState == 4) {//readyState=4：响应的内容解析完毕，可以在客户端使用了--完成
                // 判断是否响应成功
                if (e.target.status == 200) {//xhr.status:获取当前服务器的响应状态  200=>成功
                    let data = e.target.responseText //返回成功的值
                    resovled(data);
                } else {
                    let err = e.target.status //返回失败的响应码
                    rejected(`请求错误：${err}`);
                }
            }
        }
    });
}

<script src="./AjaxModel.js"></script>//引入js文件
<script>
    const contentElment = document.getElementById('content');
    const name = 'admin';
    const passwd = '123';
    const content = `username=${name}&password=${passwd}`;
    //直接使用js的方法
    const xmlObjPromise = XMLHttpPromiseObj('post', 'http://192.168.0.100:8089/api/login', content);
    xmlObjPromise.then(data => {
        contentElment.innerHTML = data;
    }).catch(err => {
        contentElment.innerHTML = err;
    })
</script>

六、工具推荐

上一篇 下一篇

猜你喜欢

热点阅读