好久没更新了,我回来了---Ajax
2024-10-21 14:22:44
1、Ajax概念以及优势
* 什么是AJAX
* AJAX(Asynchronous JavaScript And XML),(异步 JavaScript 和 XML),中文名:阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。
* AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
* 前端通过与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
* 为什么要使用AJAX
* 更自然、流畅的用户体验,对用户的操作即时响应
* 在不中断用户操作的情况下与Web服务器进行通信
* 更灵敏的响应用户访问,实现近似于桌面应用程序的交互效果
* 通过局部更新页面降低网络流量,提高网络的使用效率
2、同步异步
同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,
只有接收到返回的值或消息后才往下执行其他的命令。
异步,执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,
那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。
3、Ajax 步骤编写
<script>
//创建对象
let xhr = new XMLHTTPRequest(); xhr.open("get/post","url",是否异步true、false);//一般是true不是的话一般人干不出这种事情
xhr.onreadystatechange = function(){
if(xhr.status==200&&xhr.readystate==4)
fun(xhr.responseText);
}
xhr.send();
function fun(){
.....
}
</script>
4、XMLHTTPRequset兼容写法
<script>
let xhr;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr = new XMLHTTPRequest();
}
</script>
5、Ajax返回Json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
let xhr = new XMLHttpRequest();
xhr.open("GET","testJson.php","true");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
let myJsonStr = xhr.responseText;
let myJsonObj = JSON.parse(myJsonStr);
console.log(myJsonObj.name,myJsonObj.age);
}
}
xhr.send();
</script>
<--testJson.php-->
<?php
echo '{"name":"laowang","age":18}';
?>
6、AjaxPost
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="username" id="t1" /><span id="s"></span></br>
<input type="text" name="pwd" />
</body>
</html>
<script>
let t1 = document.getElementById("t1");
let s = document.getElementById("s");
t1.onblur = function() {
//1.创建对象
let xhr = new XMLHttpRequest();
//2.设置连接地址 get方式发送响应
xhr.open("POST", "isUserExistPost.php", "true");
//这句话必须抄 post的请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.设置响应事件
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//5.获取响应字符串
if (xhr.responseText == "1") {
s.innerHTML = "用户名已存在,请重新注册";
} else {
s.innerHTML = "恭喜注册成功";
}
}
} //4.发送 通过send传递参数
//多个参数依然用&组装 "user_name="+ userName +"&user_age="+ userAge ;
xhr.send("username=" + t1.value);
}
</script> <?php
header("Content-type:text/html;charset=utf-8");
//连接数据库
$conn = mysql_connect("localhost","root","root");
//选择数据库
mysql_select_db("xah51901");
//获取请求过来的数据
$name = $_POST["username"];
$reslut = mysql_query("select * from student where stuName = '$name'");
$rows = mysql_num_rows($reslut);
if($rows == 1){
echo "1";
}else{
echo "0";
}
?>
最新文章
- HTML5 之拖放(drag与drop)
- 查看nginx在安装时开启了哪些模块
- 遇到 Line 21: StartTag: invalid element name ios
- 2014北大研究生推免机试(校内)-复杂的整数划分(DP进阶)
- CreateJSのTweenJS、SoundJS、PreloadJS
- Android 监听ListView、GridView滑动到底部
- 自定义上传按钮 <;input type=";file"; name = ";file";/>; (将file隐藏在button下)
- 并发编程: c++11 thread(Func, Args...)利用类成员函数创建线程
- JAVA课程设计-购物车 (201521123101 柏清晔)
- 基于Android的高校饮水宝app
- 搭建第一个spring boot项目
- 剑指offer——栈的压入、弹出序列
- Linux atop 监控系统状态
- <;airsim文档学习>; Street View Image, Pose, and 3D Cities Dataset
- [转帖]盖国强:Oracle 路线图
- Gmail 设置,时区
- VM workstation 与 VM vSphere的区别 [转载]
- idea svn 使用问题
- day8 python学习 集合 深浅拷贝
- Windows10电脑安装macOS Mojave系统的方法(最新版系统,含超详细步骤截图)