简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > AJAX的操作与相关函数的封装——2019年1月18日
Blogger Information
Blog 40
fans 1
comment 0
visits 32432
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
AJAX的操作与相关函数的封装——2019年1月18日
李明伟的博客
Original
628 people have browsed it

AJAX的定义：

       1. Ajax: 用户与服务器之间进行异步交互

       2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞

           例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待

       3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可

           所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞

       

       4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步


       5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等


       6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现


——以异步验证表单为例写AJAX

前端页面布局——

<form action="admin/check01.php" method="POST" name="login">
<p>
<label for="email">邮箱:</label>
<input type="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<button>登录</button>
<!-- 占位符:显示提示信息 -->
<span id="tips" style="color:red"></span>
</p>
</form>

第一步——获取所有节点

var login = document.forms['login'];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');

第二步——创建ajax请求对象（ajax部分开始）

var request = new XMLHttpRequest();

第三步——编写请求成功后的回调处理（这个例子是将php中返回的值添加入tips中）

request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)    
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息               
tips.innerHTML = this.responseText;
}
}

第四步——设置请求参数

request.open('POST', 'admin/check01.php', true);

第五步——添加表头信息（只有post方法需要）

request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

第六步——发送请求（ajax部分结束）

request.send('email=' + email.value + '&password=' + password.value);

第七步——完善其他功能（不再详细说明）

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax原理与应用</title>
</head>
<body>
<!-- 
        1. Ajax: 用户与服务器之间进行异步交互
        2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞
            例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待
        3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可
            所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞
        
        4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步

        5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等

        6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现
     -->

<!-- 下面以异步表单验证为例,学习Ajax -->

<!-- check.php: 传统的同步方式处理 -->
<!-- check01.php: Ajax异步处理 -->

<h2>用户登录</h2>
<form action="admin/check01.php" method="POST" name="login">
<p>
<label for="email">邮箱:</label>
<input type="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<button>登录</button>
<!-- 占位符:显示提示信息 -->
<span id="tips" style="color:red"></span>
</p>
</form>

<!-- 异步Ajax验证 -->
<script>
// 获取表单对象与控件
var login = document.forms['login'];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');
// 验证邮箱
email.onblur = function () {
//1. 创建ajax请求对象
var request = new XMLHttpRequest();

//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)    
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息               
tips.innerHTML = this.responseText;
}
}

//3. 设置请求参数
request.open('POST', 'admin/check01.php', true);

//4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

//5. 发送请求
request.send('email=' + email.value + '&password=' + password.value);
}

// 用户修改信息时,清空提示信息
email.oninput = function () {
tips.innerHTML = '';
}


// 验证密码
password.onblur = function () {
//1. 创建ajax请求对象
var request = new XMLHttpRequest();

//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)    
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息               
tips.innerHTML = this.responseText;
}
}

//3. 设置请求参数
request.open('POST', 'admin/check01.php', true);

//4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

//5. 发送请求
request.send('email=' + email.value + '&password=' + password.value);
}

// 用户修改信息时,清空提示信息
password.oninput = function () {
tips.innerHTML = '';
}


// 上面的邮箱和密码的验证有很多重复代码, 可以通过将公共代码封装到函数用,实现代码复用,请自己完成

btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登录成功,正在跳转...';
setTimeout(function (){
location.href = 'admin/index.php';
}, 2000);
} else {
tips.innerHTML = '邮箱和密码不能为空';
}
return false;
}

</script>

</body>
</html>

在此案例中可以封装一个关于ajax的函数

function a(tips,data,url){
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(this.readyState === 4 && this.status === 200){
tips.innerHTML = this.responseText;
}
}
request.open('POST',url,true);
request.setRequestHeader('content-type','pplication/x-www-form-urlencoded');
request.send(data);
}

总结：ajax是一种页面异步刷新技术，它的使用步骤较为复杂，需要多次练习。

Correction status：qualified

Teacher's comments：只有总结？？？下次再这样写就不算合格了，课后记得要多练习
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！