AJAX
一、AJAX的概念和优势
AJAX(Asynchronous Javascript And XML)是异步的javascript和XML
传统网站中,如果需要更新页面内容,必须重载整个网页页面。
ajax是可以在不刷新加载整个页面的情况下,对网页的某部分进行更新。 按需加载
二、XMLHttpRequest
一、解释
AJAX的核心对象是XMLHttpRequest,即AJAX的异步操作,和服务器交互主要依赖该对象
以前的浏览器:
1.负责显示页面和发送请求接收响应(和后端交互)
2.两件事情同一时刻只能做件,没法同时进行
现代浏览器,使用XMLHttpRequest对象
1.可以把浏览器解脱出来,可以让浏览器只负责显示
2.而完成请求的事情由XMLHttpRequest对象负责
3.这样两者各负其责,效率更高,效果更好,用户体验很好,用户永远不会看到浏览器空白。
二、XMLHttpRequest的属性
属性名 | 备注 |
---|---|
onreadystatechange | 当每次状态改变所触发事件处理程序(会4次) |
readyState | readyState |
responseText | 从服务器端返回的数据的字符串形式 |
status | 请求的响应状态。404(未找到) 200(就绪) |
在客户端与服务器的通信过程中,
XMLHttpRequest.readyState 体现着当前请求以及服务端响应的状态。
它的值有
0:初始化,XMLHttpRequest对象还没有完成初始化
1:载入,XMLHttpRequest对象开始发送请求
2:载入完成,XMLHttpRequest对象的请求发送完成
3:解析,XMLHttpRequest对象开始读取服务器的响应
4:完成,XMLHttpRequest对象读取服务器响应结束
xhr.readyState属性值是0、1、2、3、4。其中状态4代表请求已经完成,响应就绪。
----------------------------------------------------------------------------------------------------------
服务器响应完成之后,我们通常会使用 XMLHttpRequest.status代表响应中的数字状态码。
代表着我们的 Ajax 请求的状态成功与否。
200 服务器已经成功处理了请求并响应到网页
404 请求失败,请求所希望得到的资源未被在服务器上发现(一般都是请求路径的错误)
500 服务器遇到错误,无法完成请求
一、ajax异步问题
Ajax的open()方法有3个参数:1、method;2、url;3、boolean;
参数1: get和post两个取值
参数2: 请求路径
参数3: boolean的取值
1. 当该boolean值为true时,服务器请求是异步进行的,也就是脚本执行send()方法后不等待服务器的执行结果,而是继续执行脚本代码;
2. 当该boolean值为false时,服务器请求是同步进行的,也就是脚本执行send()方法后等待服务器的执行结果的返回,若在等待过程中超 时,则不再等待,继续执行后面的脚本代码!
三、编写AJAX的步骤
1、创建XMLHttpRequest对象
var request = new XMLHttpRequest();
2、设置请求参数
request.open(method, url, async);
method: 代表HTTP请求的方法名,比如 GET、POST。
url: 代表着要想向其发送请求的 url。
async: 表示是否异步。true代表异步,false是同步,默认为异步
3、发送请求
request.send();
4、接收响应
request.onreadysatechange = function(){
if(request.readyState==4&&request.status == 200){
alert(request.responseText);//响应结果,就是后端echo回来的数据
}
}
响应结束(request.readyState==4)并且响应成功(request.status == 200)
get请求和post请求的区别?
1. 请求参数书写位置
get: url路径上 xhr.open("get","url?请求参数") 请求参数形式: username =zs & password=12345
post: 写在send()中 xhr.send("username=zs&password=12345")
2. 是否设置请求头
get 不需要
post需要 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
四、编写AJAX的GET
<input type="text" name="username" id="txt"><span></span><br>
<input type="text" name="username" id="pass"><br>
<button>点我注册</button>
---------------------------------------------------------------------------------------------------------
<script>
function $(selector) {
return document.querySelector(selector)
}
// 点击按钮,利用ajax向服务器发送请求
$("button").onclick = function () {
// 第一步:先创建XMLHttpReques一个对象,用来向服务器发起请求
let xhr = new XMLHttpRequest();
// 第二步:设置请求参数,http请求的方法;携带请求参数到后端
xhr.open("get", `01.get.php?username=${$("#txt").value}&userpass=${$("#pass").value}`)
// 第三步:发送请求
xhr.send()
// 第四步:拿到响应的结果,接收响应
xhr.onreadystatechange = function () {
// 响应结束并且响应成功
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
</script>
---------------------------------------------------------------------------------------------------------
<?php
$user=$_GET["username"];
$pass=$_GET["userpass"];
echo "用户名是$user,用户密码是$pass";
?>
五、编写AJAX的POST
<input type="text" name="username" id="txt"><span></span><br>
<input type="text" name="username" id="pass"><br>
<button>点我注册</button>
---------------------------------------------------------------------------------------------------------
<script>
function $(selector) {
return document.querySelector(selector)
}
$("button").onclick = function () {
// 第一步:先创建XMLHttpReques一个对
var xhr = new XMLHttpRequest()
// 第二步:发送请求参数
xhr.open("post", `02.post.php`)携带请求参数到后端
// 第三步:设置请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
//第四步:发送--post请求需要把请求参数写在 send中,但是不能带"""
xhr.send("username=" + $("#txt").value + "&userpass=" + $("#pass").value);
// xhr.send(`username=${$("#txt").value}&userpass=${$("#pass").value}`);
// 第五步:接收响应
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
}
</script>
---------------------------------------------------------------------------------------------------------
<?php
$user=$_POST["username"];
$pass=$_POST["userpass"];
echo "用户名是$user,用户密码是$pass";
?>
六、回调函数
一个函数被作为参数传递给另一个函数。函数B作为函数A的参数,函数B在函数A内部调用,函数B称为函数A的回调函数。
普通函数是按照代码顺序直接调用,而定时器函数,要等待时间,时间到了才去调用这个函数
回调:就是回头调用的意思,上一件事干完,在回头在调用这个函数
比如定时器,就是等待5秒在调用这个函数
1.回调函数有什么作用?可以在函数外部取出函数内部的值()
2.什么时候用return ,什么时候用回调函数
取出函数内部异步代码的结果-------只能用回调函数
<script>
// 函数A作为函数B的参数,在函数B中调用
// 好处,可以在B函数的外面取到B函数内部的值
function B(A) {//第二步走这个函数
A()
}
B(function () {//第一步:先执行这个A = function () { }
console.log(1)//最后执行这个
})
------------------------------------------------------------------------------------------------------
function B(A) {
var x = 10000
A(x)
}
B(function (x) {
console.log(x)
})
--------------------------------------------------------------------------------------------------------
// 概念:函数A作为函数B的参数,在函数B中进行调用
function ajaxget(success) {
// 1. 创建xhr 对象
let xhr = new XMLHttpRequest(); // 2. 设置请求参数
xhr.open("get", "01.php", true); // true-->异步(默认值) false--->同步
// 3. 发请求
xhr.send();
// 4. 拿到响应结果
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
success(xhr.responseText)}}}
// 函数外部取出函数内部 xhr.responseText-----》取出异步代码内部的值一般都采取回调函数
// success === function(){}
ajaxget(function (data) {
console.log(data);
})
</script>
七、ajax的封装
<script>
// 封装一个AJAX的函数
// options传入一个对象
function ajaxtool(options) {
// 创建一个对象
let xhr = new XMLHttpRequest()
// 第一种:如果是get的话
if (options.type.toLowerCase() == "get") {
//携带请求参数到后端,后端去查找
xhr.open("get", options.url + "?" + options.data)
}
// 第二种:如果是post的话
if (options.type.toLowerCase() == "post") {
//携带请求参数到后端
xhr.open("", options.url)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.send(options.data)
}
// 事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
options.success(xhr.responseText);}}}
// 调用函数
ajaxtool({
type: "get",
url: '01.php',
data: "username=zhangsan",
// 这个是真正响应回来的数据
// 本质上想让他拿到函数内部xhr.responseText的值
success: function (data) {
console.log(data);
}
}
</script>
// 本质上:目标:为了实现在函数外部取出函数内部异步代码的结果
三、案例:验证用户名是否可用
思路:
1.用户名输入框需要进行失去焦点事件,失去焦点时向后端发送请求
2.后端接收到请求,接收到请求参数
1.验证以及注册的js文件
<body>
<input type="text" name="username" id="txt"><span></span><br>
<input type="text" name="username" id="pass"><br>
<button>点我注册</button>
</body>
----------------------------------------------------------------------------------------------------------------
<script>
function $(selector) {
return document.querySelector(selector)
}
//默认是false,如果验证成功就修改为true,就在走下面注册的不住
let flag = false;
// 用用户名输入框需要进行失去焦点事件, 失去焦点时向后端发送请求
//后端接收到请求,接收到请求参数,就会拿你的请求参数和数据库的数据进行对比,有的话就不可以用
$("#txt").onblur = function () {
// 创建一个对象帮助我们和服务器连接
let that = this
let xhr = new XMLHttpRequest();
// 设置请求的参数
xhr.open("get", `03checkuser.php?username=${$("#txt").value}`)
// 发送
xhr.send()
// 响应请求
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText)//就是后端echo回来的内容
if (this.responseText.trim() == "1") {
that.nextElementSibling.innerHTML = "可以注册"
that.nextElementSibling.style.color = "green"
flag = true;
} else {
that.nextElementSibling.innerHTML = "不可以注册"
that.nextElementSibling.style.color = "red"}}}}
-------------------------------------------------------------------------------------------------------------
// 先用ajax,发送前端数据,如果前端在库中找到------ 注册 前端只能发请求,后端处理请求,响应结果
// 点击注册按钮,向后端 发送请求,携带几个请求参数到后端--后端接收到你的两个请求参数, 将这两个向数据库中进行插入
$("button").onclick = function () {
// console.log(1)
if (flag) {
let xhr = new XMLHttpRequest();
xhr.open("post", "03register.php")
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.send(`username=${$("#txt").value}&userpass=${$("#pass").value}`)
// console.log(88)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText) }}}}
</script>
2.验证用户名是否可用(php文件)
<?php
header("Content-type:text/html;charset=utf8");
$user=$_GET["username"];
// 和服务器进行连接
$conn=mysqli_connect("localhost","root","root","qianfeng");
if($conn){
// 在数据库中查到
$sql= "select * from student where username='$user'";
//
$res=mysqli_query($conn,$sql);
$num=mysqli_num_rows($res);
if($num==0){
echo "1";//说明库里面没有
}else{
echo "0";
}
}else{
echo "连接失败";
}
?>
3.提交注册信息(php)
<?php
header("Content-type:text/html;charset=utf8");
$user=$_POST["username"];
$pass=$_POST["userpass"];
// 和服务器进行连接
$conn=mysqli_connect("localhost","root","root","qianfeng");
if($conn){
// 在数据库中查到
$sql= "insert into student(username,userpass) values('$user','$pass')";
// 返回布尔值
$res=mysqli_query($conn,$sql);
if($res){
echo "success";
}else{
echo "fail";
}
}else {
echo "connect error";
}
?>