AJAX

第一章：AJAX与jQuery

概念：AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。阿贾克斯

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。简言之：是局部刷新技术。异步刷新。

回顾历史：

Web 1.0 sina sohu 用户被动接受新闻
Web 2.0 社区，web群互动环节增加，用户和服务器交互
Web 3.0 自媒体，突出客户的实现，客户也可以成为中心，其他人订阅参与讨论等
Web 4.0 物联网时代自媒体人服务器 +机器交互，机器本身也是参与者。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-As9291jx-1589017347355)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143743804.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rjD07pgw-1589017347359)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143807384.png)]

1.Ajax核心 XMLHttpRequest

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.1 对象的创建

let xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}
else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

1.2 对象的方法

method：http请求的方法有俩get/post,选择就是get/post。

url：就是View层的页面要提交到服务器的请求，一般是Servlet

async:true：异常请求；false:同步请求

方法	描述
open(method,url,async)	创建一个请求
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

1.3 onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK"404: 未找到页面；500：服务器问题

1.4 服务器的响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

2.使用步骤

如何使用ajax，使用有两种：一种是前端的纯粹的使用，node+ajax；一种是后台的，我们关注的是后台。

我们之前增加用户的时候，假设用户名(账户)不能重复，我们之前是没有判断的。

当数据库服务器存在某用户的时候，文本框离开，则报已经存在该用户了；否则，显示可以注册。

创建XMLHttpRequest对象
设置请求信息open(get|post,url,true|false)
向服务器发送请求
让XmlHttpRequest对象接受服务器的响应数据，通过创建的回调函数
编写服务器端处理客户端请求

步骤	请求方式	实现代码
初始化组件	GET	xmlHttpRequest.open( “GET”,url, true );
POST	xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” );
发送请求	GET	xmlHttpRequest.send( null );
POST	xmlHttpRequest.send(“key=xxx&type=12&year=2016” );

get代码实现：

 //1.创建XmlHttpRequest对象,封装一下，封装到一个函数;function createXhr() {if(window.XMLHttpRequest)return new XMLHttpRequest();//如果有，则创建其对象;elsereturn new ActiveXObject("Microsoft.XMLHTTP");}//2.开始实现我们的目标；离开的事件是blur$(function () {//离开的时候，先判断一下；用户名不能为空，实际上应该是正则验证;$("#name").blur(function () {let name=$("#name").val();if(name==null||name==''){//后续使用正则实现$("#nameinfo").html("用户不能为空!").addClass("nameinfo");/*刚才的错误是style里面加了一个html的注释，亏!!!*/}else{//否则，就是输入的不是空了，有值，那这个值就要看看是否存在于数据库了。//2.1 这时候要得到XmlHttpRequest对象;xhr=createXhr();//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值namexhr.open("get","userServletByName?name="+name,true);//2.3.发送请求,get的时候不加东西；xhr.send(null);//2.4当事件改变Ok的时候，响应的函数；xhr.onreadystatechange=function () {//readyState==4;并且状态为200的时候，才OK。if(xhr.readyState==4 && xhr.status==200){//定义变量data，接受异步对象xhr的服务器的响应数据;由Servlet来返回let data=xhr.responseText;console.log(data);//暂停一下;//下面就是根据data响应的数据值做出判断;//服务器端响应给我们，true|false了.data-->文本;我们把它当成了booleanif(data=='true'){$("#nameinfo").html("用户名已经注册").addClass("nameinfo");}else{$("#nameinfo").html("用户名可以注册");$("#nameinfo").css("color","green");}}}}});})

post代码实现：

修改get的2. 3.步骤即可;

 //2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name//xhr.open("get","userServletByName?name="+name,true);xhr.open("post","userServletByName",true);xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必须有;//2.3.发送请求,get的时候不加东西；//xhr.send(null);get 没东西;xhr.send("name="+name);

问题：

1.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSltRVVd-1589017347367)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509155731042.png)]

//向客户端发响应，编码要一致;response.setContentType("text/html;charset=UTF-8");response.setCharacterEncoding("UTF-8");

2.出来2行的问题是需要加判断,并且&&符号；

 if(xhr.readyState==4 && xhr.status==200){代码}

总结一下：

1.了解异步对象XmlHttpRequest

2.了解其四大步骤；

3.通过javaweb代码来实践一下。这个是重点，看视频，一步一步走；

第一章：AJAX与jQuery相关推荐

JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战目录上一章下一章上一个任务/上一节下一个任务/下一节实例链接点我目录任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
ajax通过什么实现,ajax(通过jQuery实现)
使用jQuery实现ajax相对来说方便一点,看w3cschool有几种实现的方法,我就总结一下自己以后会用到的几种方法 $.ajax方法: $.ajax方法里面有很多个参数可以使用,但我这里就写自己 ...
ajax用jquery怎么实现,ajax使用jquery的实现方式
1.jquery的ajax方法. $("#ajaxbtn").click(function(){ $.ajax({ url:"json.do", beforeS ...
北大青鸟 JQuery 制作特效第一章课后简答题
北大青鸟 JQuery 制作特效第一章课后简答题简单三丶打印倒正金字塔直线 <!DOCTYPE html> <html> <head lang="en&q ...
jQuery实战读书笔记（第一章至第四章）
2019独角兽企业重金招聘Python工程师标准>>> 第一章 jQuery 基础 1. 包装器 jQuery对包装器(Wrapper)或包装集(wrapped set)进行操作,即 ...
北大青鸟使用JQuery制作特效第一章（上机练习
北大青鸟使用JQuery制作特效第一章(上机练习练习一丶--统计包含"a"或"A"的字符串个数 <!DOCTYPE html> <htm ...
eazyui ajax传值,jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/x-www-form ...
【前端】第一章前端三要素、前后端分离的演变史
第一章前端三要素.前后端分离的演变史文章目录第一章前端三要素.前后端分离的演变史一.前端三要素结构层(HTML) 表现层(CSS) 行为层(JavaScript) 二.前后端分离的演变史 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...

第一章：AJAX与jQuery

AJAX

第一章：AJAX与jQuery

1.Ajax核心 XMLHttpRequest

1.1 对象的创建

1.2 对象的方法

1.3 onreadystatechange 事件

1.4 服务器的响应

2.使用步骤

第一章：AJAX与jQuery相关推荐

最新文章

热门文章