Ajax的使用初识

最新推荐文章于 2024-08-15 18:19:19 发布

智人程序猿

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量95

点赞数

文章标签：前端 AJAX

本文链接：https://blog.csdn.net/qq_42775711/article/details/99483578

版权

对于Ajax，是在script标签内进行使用的。

最主要的代码只有以下几行：

// xhr就是浏览器的作用
var xhr = new XMLHttpRequest();
// 打开浏览器，输入网址或者后台处理文件
// ？后面传递参数
// 最后的布尔值决定是否异步操作，推荐true，否则会在send部分出现停留问题。默认也是true，可以不填
xhr.open('GET', 'time.php？id=564', true);
// 发送请求
// send里面也可以传递参数，仅限于POST方法时
xhr.send();
// 等待结果
// 出现变化后即进行处理
xhr.onreadystatechange = function(){
	//这里面写处理函数
}

Ajax采用的机制是给事件传递的不同步骤划分不同的等级的方式

分类如下：

case 1:
//刚注册
var xhr = new XMLHttpRequest();
case 2:
//已经接收到了响应报文的报文头
xhr.open();
case 3:
// 正在下载响应体
// 此时如果获取响应报文的话，可能会不完整，不适合在这里处理响应体
case 4:
//已经完整下载报文，此次响应结束

下面写一个小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX发送GET请求并传递参数</title>
</head>
<body>
	<ul id='list'>
	</ul>
<script>
// 获取Dom对象
var listElement = document.getElementById('list');


//发送请求，获取列表数据


var xhr = new XMLHttpRequest();
// 后面的是我们的处理文件
xhr.open('GET', 'users.php');

xhr.send();

xhr.onreadystatechange = function () {
// 如果状态值不为4，即报文未下载完毕，即退出函数，等待下一次状态变化
	if(this.readyState != 4 ) return;
	// 状态值为4，进行后续操作
	// data存储我们获得的报文，注意需抓化为JSON格式
	var data = JSON.parse(this.responseText);
	// 遍历data，并向我们的Dom对象添加内容
	for(var i=0;i<data.length;i++){
	// 创建新Dom对象
		var liElement = document.creatElement('li');
		// 为新的Dom对象添加内容
		liElement.innerHtml = data[i].name;
		// 将我们创建好的Dom对象添加到ul列表中
		listElement.appendChild(liElement);
	}
}

// var xhr = new XMLHttpRequest();

// //?后面传参数
// xhr.open('GET', 'users.php?id=2');

// xhr.send(null);

// xhr.onreadystatechange = function () {
//     if(this.readyState != 4) return;
//     console.log(this.responseText);
// }
</script>
</body>
</html>

当然，除了GET方法之外，POST方法也可以
但是post方法需要添加一行代码
POST方法对于传递的参数量没有限制，但是比GET方法要慢

 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX发送POST请求</title>
    <style>
        #loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #555;
            opacity: .5;
            text-align: center;
            line-height: 300px;
        }

        #loading::after {
            content: '加载中...';
            color : #fff;
        }
    </style>
</head>
<body>
<div id="loading"></div>
<table border="1">
    <tr>
        <td>用户名</td>
        <td><input type="text" id="username"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="password" id="password"></td>
    </tr>
    <tr>
        <td></td>
        <td><button id="btn">登录</button></td>
    </tr>
</table>
<script>
    var btn = document.getElementById('btn');
    var txtUsername =document.getElementById('username');
    var txtPassword = document.getElementById('password');
    var loading = document.getElementById('loading');

        btn.onclick = function () {
            loading.style.display = 'block';
            var username = txtUsername.value;
            var password = txtPassword.value;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'login.php');
            // 注意，post方法必须添加下面这一行代码
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // xhr.send('username='+username+'&password='+password);
            xhr.send(`username=${username}&password=${password}`);
            xhr.readystatechange = function () {
                if(this.readyState != 4)return;
                loading.style.display = 'none';
                console.log(this.responseText);
            }
        }


</script>
</body>
</html>

智人程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的使用初识

对于Ajax，是在script标签内进行使用的。最主要的代码只有以下几行：// xhr就是浏览器的作用var xhr = new XMLHttpRequest();// 打开浏览器，输入网址或者后台处理文件// ？后面传递参数// 最后的布尔值决定是否异步操作，推荐true，否则会在send部分出现停留问题。默认也是true，可以不填xhr.open('GET', 'time.php...
复制链接

扫一扫