好久没更新了,我回来了---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里面手 ...
随机推荐
- command ' cl.exe' failed: No such file or directory解决办法
1.安装C ++编译器 https://pan.baidu.com/s/1D1-tM-mWO4TVLdTrh3k1GA 提取码:ym67 2.找到安装文件夹:Visual C++ Build T ...
- django对layui中csrf_token处理方式及其它一些处理
第一:由于layui官方是没有csrf_token处理机制,所以,在使用layui中post请求,请不要按layui官方提供的两种方法进行设置 官方设置如下: table.render({ elem: ...
- Redis-Cluster分片扩容
redis分片分片场景在业务量相对较小的时候,可以将所有数据都存到一台机器上,只使用redis单机模式,不存在分片问题.如果业务的数据量超过一台物理机器的内存大小时,则会面对扩展问题,需要多台机器去存 ...
- P3335-[ZJOI2013]蚂蚁寻路【dp】
正题 题目链接:https://www.luogu.com.cn/problem/P3335 题目大意 给出\(n\times m\)的网格,每个格子有权值.一个回路在格子的边上,要求有\(2\tim ...
- 浅析 Java 内存模型
文章转载于 飞天小牛肉 的 <「跬步千里」详解 Java 内存模型与原子性.可见性.有序性>.<JMM 最最最核心的概念:Happens-before 原则> 1. 为什么要学 ...
- 使用CEF(三)— 从CEF官方Demo源码入手解析CEF架构与CefApp、CefClient对象
在上文<使用CEF(2)- 基于VS2019编写一个简单CEF样例>中,我们介绍了如何编写一个CEF的样例,在文章中提供了一些代码清单,在这些代码清单中提到了一些CEF的定义的类,例如Ce ...
- Go语言核心36讲(Go语言基础知识三)--学习笔记
03 | 库源码文件 在我的定义中,库源码文件是不能被直接运行的源码文件,它仅用于存放程序实体,这些程序实体可以被其他代码使用(只要遵从 Go 语言规范的话). 这里的"其他代码" ...
- VS2017离线安装QT插件出错:未能正确加载VSIX包
问题现象: 问题已解决,忘记截图了 出现原因:可能是自己离线安装,安装版本与不符合当前VS吧.记得当时下载了一个最新的版本.重新卸载当前插件,再装一个合适版本即可 http://download.qt ...
- JavaScript04
分离绑定事件 使用分离方式绑定元素事件可以使用页面元素与JavaScript代码完全分离,有利于代码分工和维护,是目前开发主流,分为两步: 1.获取需要绑定事件的元素 语法:根据id属性值取元素节点 ...
- 面试题 08.12. N皇后
题目 设计一种算法,打印 N 皇后在 N × N 棋盘上的各种摆法,其中每个皇后都不同行.不同列,也不在对角线上.这里的"对角线"指的是所有的对角线,不只是平分整个棋盘的那两条对角 ...