vlambda博客
学习文章列表

关于Ajax原理与使用方式,收藏这一篇文章就够了!!

仓库:Github、Gitee

博客:CSDN、掘金

特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系小编授权


每日鸡汤:英雄来来往往,唯有国王屹立不倒!


        大家好!我是你们的老朋友Java学术趴,今天给大家分享全网最全的Ajax局部刷新技术。Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest,接下来给大家详细介绍Ajax局部刷新技术。

Ajax前端技术

xhr是XMLHttpRequest的简称

  • 前端技术:在浏览器中执行的程序都是前端,html、css、js等

  • 后端技术:在服务器中执行的程序,使用Java元语言开发的后端程序。

    servlet、jsp、jdbc、mysql、tomcat等等····

1.全局刷新与局部刷新

1.1全局刷新

  • 概念:使用form、href等发起的请求是全局刷新

  • 用户在发起请求,视图改变了,跳转视图,使用新的数据添加到页面

  • 缺点:

  • 传递数据量比较大,占用网络的宽带

  • 浏览器需要重新的渲染整个页面

  • 用户体验不是很好

1.2局部刷新

  • 概念:在当前页面中,发起请求,获取数据,更新当前网页的dom对象。对视图部分刷新。

  • 特点:

  • 数据比较小,在网络中传输速度快

  • 更新页面内容,使部分页面更新,浏览器不用全部更新

  • 在一个页面中,可以做多个局部刷新

  • 从服务器获取的是数据,拿到更新的视图

2.异步请求对象

异步对象 XMLHttpRequest

在局部刷新中,使用异步请求对象,在浏览器内部发起请求,获取数据

  • 异步对象是在浏览器的内部的一种 JavaScript对象。各大浏览器都能支持异步对象的使用。

    chrom、firework、ie、opper中都可以使用异步对象。在这些浏览器中写法可能不同,但是原理都是一样的。

3. 异步对象XMLHttpRequest介绍

  • Js中的一种对象,使用Js语法创建和使用这个对象

  • var xmlhttp = new XMLHttpRequest();

  • 之后可以使用xmlhttp对象的属性或者函数,进行异步对象的操作

使用异步对象实现局部刷新,异步对象主要负责发起请求,传递请求参数,并从服务端接收数据。

3.1局部刷新需要使用哪些技术:

  • JavaScript :创建XMLHttpRequest对象,调用它的属性或者方法

                        负责创建异步对象,发送请求,更新页面的dom对象。

  • dom : 处理dom,更新 Servlet的数据

  • css:处理视图,更新,美化。

  • servlet : 服务端技术,需要服务端的数据

  • 数据格式 :网络中传输的数据格式,使用json代替了xml

    关于Ajax原理与使用方式,收藏这一篇文章就够了!!

把以上这些技术的综合使用叫做Ajax(阿贾克斯)

4. Ajax介绍

  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法

  • 使用AjAx实现局部刷新

  • AjAx = AsynChronous JavaScript and XML(异步的JavaScript和XML)。

  • synChronous : 异步的意思

  • JavaScript : javaScript脚本,在浏览器中执行

  • and : 和

  • XMl : 一种数据格式

  • AJAX 不单需要前端的技术,同时需要后端(服务器)的配合。服务器需要提供数据,数据 是 AJAX 请求的响应结果。

  • AjAX 是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法。

  • 注意:AjAx只是一种新的技术,多种技术的综合应用,不是一种新的编程语言。 Ajax只是包含了javaScript、dom、css、服务端技术、servlet、jsp、jdbc等,还有 json数据格式。

  • Ajax核心是JavaScript 和 XML。 但是在近些年json技术替代了XML,所以现在的Ajax的核心大部分是 :JavaScript 与 json

5.AJAX异步对象(XMLHttpRequest)实现步骤

  • 第一步 :创建一个异步对象(使用的是JS语言)

var xmlHttp = new XMLHttpRequest();

  • 第二步 :给异步对象绑定事件,onreadstatechange事件,当异步对象发起请求,获取了 数据都会触发这个事件。这个事件需要指定一个函数,在函数中处理状态的变化

 
   
   
 
  1. // 这段代码是以前JS中给函数绑定事件的方式

  2. btn.onclick = function(){

  3. alert("按钮单击");

  4. }

当请求被发送到服务端时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadstatechange事件 。从事件可以指定一个处理函数 function。通过判断 XMLHttpRequest对象的状态,获取服务端返回的数据。

 
   
   
 
  1. // 这段代码是ajax中异步对象绑定事件的方式

  2. xmlHttp.onreadstatechange = function(){

  3. // 处理请求的状态变化;

  4. if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

  5. // 此时说明可以处理服务端的数据,更新当前页面

  6. var data = xmlHttp.responseText;

  7. document.getElementById("name").value = data;

  8. }

  9. }

  • 第三步:初始异步请求对象

例如:

javascript xmlHttp.open("get","loginServlet?name=cyb&password=123",true)

   第四步:使用异步对象发送请求

xmlHttp.send();

怎么获取服务端返回的数据,使用异步对象的属性 responseText

使用格式:xmlHttp.responseText

6. 异步对象的属

XMLHttpRequest 对象有三个重要的属性

6.1属性说明

onreadstatechange属性:一个js函数名 或 直接定义函数,每当 readyState 属性改变时,就会调 用该函数。

6.2 readyState 属性

  • 存在 XMLHttpRequest 的状态,从0到4发生变化

  • 异步对象的属性 readyState 表示异步对象请求的状态变化

  • 0 :创建异步对象时, new XMLHttpRequest ();

  • 1 : 初始化异步请求对象, xmlHttp.open();

  • 2 : 发送请求 , xmlHttp.send();

  • 3 : 从服务端获取带了数据,此时3,注意3是异步对象内部使用,获取了原始数据。

  • 4 : 异步对象把接收到的数据处理完成后,此时开发人员在4的时候处理数据。

    在4的时候,开发人员做什么?更新当前页面。

6.3 status 属性

  • 异步对象的status属性,表示网络请求的状况:

  • 200(请求成功)

  • 404(请求失败)

  • 500(Java代码出现问题)

  • 在当 status == 200 时,表示网络请求成功。此时才可以进行数据的传输处理

6.4 responseText 属性

  • 获取服务端返回的数据,使用异步对象的属性 responseText

xmlHttp.responseText

7. 项目一:全局刷新计算bmi

  • 项目介绍:通过用户输入的信息,计算这个人的bmi,判断bmi的数值在哪个区间,返回测试结果给用户。

  • 通过全局刷新计算bim,不使用Ajax异步对象

关于Ajax原理与使用方式,收藏这一篇文章就够了!!

8.项目二:局部刷新计算bim(使用Ajax异步请求对象)

  • 项目介绍:这个项目和以上所需要完成的请求是一样的,只是实现的方式不同。

  • 这个项目是使用的Ajax异步对象进行的局部刷新原理。

  • 通过局部刷新计算bmi,使用Ajax异步对象完成局部刷新

关于Ajax原理与使用方式,收藏这一篇文章就够了!!

9.项目三:根据ID查询省份(Ajax异步对象实现)

  • 项目介绍:这个是使用的 AJAX异步对象,通过获取用户输入的省份ID,查询到这个省份的名称、省份简称、省份的省会等信息。


  • 这个项目的实现需要有一张省份的数据库表支持。大家可以按照下边的表文件自己新建一个。

    关于Ajax原理与使用方式,收藏这一篇文章就够了!!

  • 下边是这个表文件的建表语句,大家可以参考一下。

    关于Ajax原理与使用方式,收藏这一篇文章就够了!!

  • 运行的结果图:当用输入的id=3的时候的查询结果如下:此时使用的是Ajax进行的局部刷新,不会刷新整个页面。

9.异步请求和同步请求

9.1 异步请求

XMLHttpRequest 对象 open( method , url, true ) 第三个参数 true 表示异步请求 异步请求特点:1)某一个时刻,浏览器可以委托多个异步请求对象发送请求,无需等待请求处理完成。2)浏览器委托异步请求对象工作期间,浏览器处于活跃状态。可以继续向下执行其他命令。3) 当响应就绪后再对响应结果进行处理

9.2 同步请求

XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求 同步请求特点:1)某一个时刻,浏览器只能委托一个异步请求对象发送请求,必须等待请求处理完成。2)浏览器委托异步请求对象工作期间,浏览器处于等待状态。不能执行其他命令。3)不推荐使用。

9.3 异步请求和同步请求对比

  • xmlHttp.open(get/post,url,true) : 异步处理请求。使用异步对象发起请求之后,不用等待数据处理完毕, 就可以执行其他的操作,在send之后执行其他代码。可以同时执行多个异步请求。

  • xmlHttp.open(get/post,url,false) :同步,异步对象必须在处理完成请求,从服务端获取数据之后,才能执行send之后的代码。在任意的。一次只能执行一个异步请求,必须在处理完成之后(也就是必须等待向服务端发送请求,并且服务端将数据发送回来), 才能执行其他的请求处理。

----看完的大佬们可以关注一下小编,会一直更新小技巧,免费分享给大家呦!!!----

点击星球可快速进入小编的Github星球呦。里边还有更多好玩的技术,等待大家去探索