好久没更新了,我回来了---Ajax
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";
}
?>
好久没更新了,我回来了---Ajax的更多相关文章
- 京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新,这两天闲的蛋疼做个京东页面分辨率1366*768,919京东,适应没调!)要文件加关注找我要哦!
- 好久没来了,重出江湖,共享个python34+pyqt+pyserial串口工具源码
真的是好久没来了,写博客对我来说还真是难坚持下来,热度一过就忘了,就算什么时候想起来也懒得去敲一个字,这次真不知道能坚持多久,随心吧,想写写,不想写也不勉强自己. 最近由于工作调试需要自己写了一个带图 ...
- kotlin电商学习记录,好久没来逛逛了
好久没来,一直做毕业设计,用kotlin写一个基于以图搜图的购物app,现在又赶上实习,内容多,时间少,不过前途光明并由贵人指点.加油 kotlin电商学习记录 技术选型 视图层 kotlin-and ...
- 好久没玩docker了,温下手
好久没玩docker了,温下手 安装 Docker Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: yum i ...
- mybatis update数据时无异常但没更新成功;update异常时如数据超出大小限制,造成死锁
没更新的问题原因: sqlSession.commit(); 没执行commit,但官方文档里有这样的描述:“默认情况下 MyBatis 不会自动提交事务,除非它侦测到有插入.更新或删除操作改变了数据 ...
- js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)
js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...
- 好久没玩laravel了,今天玩下Laravel项目迁移步骤
.在新的目录中克隆git远程版本库 .执行composer install安装依赖 .执行php artisan key:generate生成key 好久没玩laravel了,今天玩下Laravel项 ...
- 好久没写原生的PHP调用数据库代码了分享个
好久没写原生的PHP代码调用数据库了 eader("Content-type: text/html; charset=utf-8"); $time=$symptoms=$attr= ...
- vue修改elementUI的分页组件视图没更新问题
转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...
随机推荐
- Python实现一个简单三层神经网络的搭建并测试
python实现一个简单三层神经网络的搭建(有代码) 废话不多说了,直接步入正题,一个完整的神经网络一般由三层构成:输入层,隐藏层(可以有多层)和输出层.本文所构建的神经网络隐藏层只有一层.一个神经网 ...
- Python中open和with open有什么区别?怎么用?
open 打开文件 file=open("文件名","读写模式") 操作文件 代码段 关闭文件 file.close() 注意事项:使用open方法,文件操作完 ...
- 服务器使用matplotlib绘图
Two points: 1. change backend of matplotlib: import matplotlib.pyplot as plt plt.switch_backend('agg ...
- 第十二章 Net 5.0 快速开发框架 YC.Boilerplate --千万级数据处理解决方案
在线文档:http://doc.yc-l.com/#/README 在线演示地址:http://yc.yc-l.com/#/login 源码github:https://github.com/linb ...
- The Data Way Vol.5|这里有一场资本与开源的 battle
关于「The Data Way」 「The Data Way」是由 SphereEx 公司出品的一档播客节目.这里有开源.数据.技术的故事,同时我们关注开发者的工作日常,也讨论开发者的生活日常:我们聚 ...
- 找出某名珍贵药材的生长区域(ArcPy实现)
一.背景 某种珍贵药材生长于山区,通过研究了解到这种药材生长具有严格的生长条件.为了能更好地保护该药材的生长环境,现在需要使用GIS空间分析方法,将药材适合生长区域找出来,以便为该物种保护提供依据. ...
- 基于TLS证书手动部署kubernetes集群
一.简介 Kubernetes是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernetes也叫K8S. K8S是Google内部一个叫Borg的容器集群管理系统 ...
- Java爬虫系列四:使用selenium-java爬取js异步请求的数据
在之前的系列文章中介绍了如何使用httpclient抓取页面html以及如何用jsoup分析html源文件内容得到我们想要的数据,但是有时候通过这两种方式不能正常抓取到我们想要的数据,比如看如下例子. ...
- Perl 编程 基础用法
Perl 编程 标准头部写法 #!/usr/bin/perl -w # 标准的头部写法,-w意为显示警告 变量 $a=$b+10 # $a和$b都不需要定义,拿过来就用 Note: $flag=0 如 ...
- AIbee 笔试
CSS选择器 div+p 选择紧接在div元素之后的所有< p >元素 C++删除数组最后一个元素. 例如[1 2 3 4] 最后变为 [1 2 3] 用splice的删除,增加和替换 a ...