Ajax基础学习

àì夳堔傛蜴生んèń 2022-09-11 03:28 104阅读 0赞

1.ajax前端技术

​ 前端技术:在浏览器中执行的程序都是前端,HTML,css,js等
​ 后端技术

(1)全局刷新:使用form,href等发起的请求是全局刷新
用户发起请求,视图改变了,使用新的数据添加到页面
缺点:
1.传递数据量比较大,占用网络的带宽
2.浏览器需要重新渲染整个页面
3.用户的体验感不好

(2)局部刷新:在当前页面中,发起请求,获取数据,更新当前页面的dom对象,对视图部分刷新
(异步对象,在浏览器内存中的JavaScript对象,各大浏览器都能支持异步对象
异步对象 XMLHttpRequest

特点:
1.数量比较小,在网络中传输速度快
2.更新页面内容,是部分更新页面,浏览器不用全部渲染视图
3.在一个页面中,可以做多个局部刷新
4.从服务器获取数据,拿到更新视图

2.异步请求对象

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

3.异步对象XMLHttpRequest接收

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

var xhr = new XMLHttpRequest();

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

使用异步对象实现局部刷新,异步对象主要是负责发起请求,传递请求的参数并从服务器端接收数据。(网络操作)。

局部刷新需要的技术

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

2)dom:处理dom,更新select的数据

3)css:处理视图,更新,美化

4)servlet:服务器端技术

5)数据的格式:json。之前是xml

把上面这些技术的综合使用叫做ajax,

4.Ajax

AJAX = Asynchronous Javascript And XML(异步JavaScript和XML),是一种无需重新加载整个页面的情况下,能够更新部分页面的新方法

AJAX不是一种新的语言,是多种技术的综合使用,包含了dom,javascript,jsp,jdbc等

我们使用ajax实现局部刷新

Ajax的核心是JavaScript和xml(json):使用JavaScript操作异步对象XMLHttpRequest和服务器交换使用的json格式。

5.异步对象XMLHttpRequest的属性和方法

1.创建异步对象,使用js语法

  1. var xhr = new XMLHttpRequest();

2.XMLHttpRequest方法

​ open(请求方式,服务器端的访问地址,异步还是同步,true代表异步)

  1. xhr.open("get","login",true)

​ send():使用异步对象发送请求

3.XMLHttpRequest属性

​ readyState属性:请求的状态

​ 0:表示创建异步对象时,new XMLHttpRequest();

​ 1:表示初始异步对象的请求参数,执行open方法

​ 2:表示使用send()方法发送请求。

​ 3:表示使用异步对象从服务器端接收了数据

​ 4:异步对象接收了数据,并在异步对象内部处理完成后

​ status属性:网络的状态,和Http的状态码对应

​ 200:表示请求成功

​ 404:表示服务器端资源未找到

​ 500:服务器内部代码有错误

​ responseText属性:表示服务器端返回的数据

​ 例如:

  1. var data = xhr.responseText;

6.异步对象XMLHttpRequest使用步骤

1)使用js创建异步对象

  1. var xhr = new XMLHttpRequest();

2)给异步对象绑定事件,事件名称onereadystatechange

例如button增加单击事件 onclick

xhr绑定事件

  1. xhr.onreadystatechange = function{
  2. //当事件发生时执行的代码
  3. }

在绑定事件中做什么,根据readyState值做请求

  1. xhr.onreadystatechange = function(){
  2. if(xhr.readyState === 4 && status ===200){
  3. //从服务器端已经获取数据,更新当前的dom对象,完成请求的处理
  4. var data = xhr.responseText;
  5. //更新dom对象
  6. documen.getElementByTd("#mydiv").innerHTML = data;
  7. }
  8. }

3)初始请求的参数,执行open函数

  1. xhr.open("get","loginSerlet",true)

4)发送请求,执行send()

  1. xhr.send()

使用ajax关注的是:

使用异步对象XMLHttpRequest发起请求,接收数据,更新dom对象,

ajax操作中,处理的是数据,从服务器端接收数据,没有视图

​ ctrl+shift+delete清空浏览器缓存

7.同步与异步

看open(请求方式,访问url,boolean是不是异步的)

true:异步请求(相当于可以同时进行多个请求处理,不需要考虑当前的请求是否被响应)

false:同步请求(相当于一次只执行一次请求处理)

发表评论

表情:
评论列表 (有 0 条评论,104人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Ajax基础

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 通过在后台与服