ajax理解及应用

最新推荐文章于 2023-07-03 10:09:42 发布

痞子红毛

最新推荐文章于 2023-07-03 10:09:42 发布

阅读量212

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/a1870290027/article/details/121043145

版权

定义

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互。

Ajax的优势和作用

ajax的作用：在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互；

ajax的优势：用户体验好，减轻服务端的压力；

Ajax的请求方式如图

XMLHttpRequest

语法：

 let xhr =new XMLHttpRequest();

描述：创建 ajax对象

open

语法：

xhr.open(method,url,async)

描述：规定请求的类型、URL 以及是否异步处理请求。

send

语法：

xhr.send(string)

描述：将请求发送到服务器。string：仅用于 POST 请求

属性

readyState

语法：

xhr.responseText

描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。

包含的状态值：

(1)0：请求未初始化，还没有调用open

(2)1：请求已经建立，但是还没有发送send

(3)2：请求已经发送

(4)3：请求正在处理中，通常响应中已经有部分数据可以用了

(5)4：响应已经完成，可以获取并使用服务器的响应

status

语法：

xhr.status

描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)

常见状态码：200，304，404，500

responseText

语法：

xhr.responseText

描述：获得来自服务器的响应

事件

语法：

xhr.onreadystatechange  = callback

描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件

实现步骤

(1)创建Ajax对象

(2)Ajax请求的地址与请求方式

(3)发送请求

(4)获取服务器响应给客户端的数据

(5)处理服务器响应数据JSON.parse和JSON.stringify

ajax的get和post传参

get

语法：

xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')

描述：get传参只需要在url地址后按照?key=value格式进行传递

代码案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr">&nbsp;<span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>

    <script>
        let usrObj = document.getElementById('usr');
        let msgObj = document.getElementById('usrmsg');
        //第一步：创建ajax对象：
        let xhr = new XMLHttpRequest();

        usrObj.onblur = function() {
            //第二步：创建请求给ajax对象:  xhr.open('请求方式','请求资源',true/false);
            //true:表示异步
            //false:表示同步 
             xhr.open('get', `/zhuce?uname=${usrObj.value}`, true);

            //注册事件：监听服务端对ajax对象发送的请求的处理状态
            xhr.onreadystatechange = proReuest;

            //第三步：ajax对象将请求发送给服务端:  xhr.send([要发送的参数]);
             xhr.send(`uname=${usrObj.value}`);
        };


        function proReuest() {
            // alert(xhr.readyState);
            //第四步：服务端处理完请求并返回响应给ajax对象
            if (xhr.readyState == 4) { //服务端处理请求并返回响应
                // console.log(xhr.status, 6666);
                //判断http协议的状态码是否为200
                if (xhr.status == 200) {
                    //第五步：ajax对象获取响应并把响应填充到页面相关位置
                    // alert(xhr.responseText);
                    let obj = JSON.parse(xhr.responseText);
                    msgObj.innerHTML = obj.msg;
                    if (obj.status == 200) {
                        msgObj.style.color = 'green';
                    } else {
                        msgObj.style.color = 'red';
                    }
                }

            }
        }
    </script>
</body>

</html>

post

语法1:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send('username=ujiuye&password=123456');

语法2：

xhr.setRequestHeader('Content-Type', 'application/json') 
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))

描述：使用setRequestHeader设置响应头，并传递对应的post参数

代码案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr">&nbsp;<span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>

    <script>
        let usrObj = document.getElementById('usr');
        let msgObj = document.getElementById('usrmsg');
        //第一步：创建ajax对象：
        let xhr = new XMLHttpRequest();

        usrObj.onblur = function() {
            //第二步：创建请求给ajax对象:  xhr.open('请求方式','请求资源',true/false);
            //true:表示异步
            //false:表示同步 
            // xhr.open('get', `/zhuce?uname=${usrObj.value}`, true);
            xhr.open('post', `/zhuce`, true);
            // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  //post请求参数的格式为键值对格式
            xhr.setRequestHeader('Content-Type', 'application/json'); //post请求参数的格式为json格式

            //注册事件：监听服务端对ajax对象发送的请求的处理状态
            xhr.onreadystatechange = proReuest;

            //第三步：ajax对象将请求发送给服务端:  xhr.send([要发送的参数]);
            // xhr.send(`uname=${usrObj.value}`);

            let data = {
                uname: usrObj.value
            }
            xhr.send(JSON.stringify(data))
        };


        function proReuest() {
            // alert(xhr.readyState);
            //第四步：服务端处理完请求并返回响应给ajax对象
            if (xhr.readyState == 4) { //服务端处理请求并返回响应
                // console.log(xhr.status, 6666);
                //判断http协议的状态码是否为200
                if (xhr.status == 200) {
                    //第五步：ajax对象获取响应并把响应填充到页面相关位置
                    // alert(xhr.responseText);
                    let obj = JSON.parse(xhr.responseText);
                    msgObj.innerHTML = obj.msg;
                    if (obj.status == 200) {
                        msgObj.style.color = 'green';
                    } else {
                        msgObj.style.color = 'red';
                    }
                }

            }
        }
    </script>
</body>

</html>

痞子红毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax理解及应用

定义Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互。Ajax的优势和作用ajax的作用：在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互；ajax的优势：用户体验好，减轻服务端的压力；Ajax的请求方式如图XMLHttpRequest语法： let xhr =new XMLHttpRequest();描述：创.
复制链接

扫一扫