ajax怎么写登录跳转(简述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

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

ajax怎么写登录跳转(简述ajax工作原理)

异步对象是在浏览器的内部的一种 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(阿贾克斯)

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事件,当异步对象发起请求,获取了 数据都会触发这个事件。这个事件需要指定一个函数,在函数中处理状态的变化

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

btn.onclick = function(){

alert(“按钮单击”);

}

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

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

xmlHttp.onreadstatechange = function(){

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

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

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

var data = xmlHttp.responseText;

document.getElementById(“name”).value = data;

}

}

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

例如:

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异步对象

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

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

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

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

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

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

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

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

运行的结果图:当用输入的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之后的代码。在任意的。一次只能执行一个异步请求,必须在处理完成之后(也就是必须等待向服务端发送请求,并且服务端将数据发送回来), 才能执行其他的请求处理。

发表评论

登录后才能评论