Ajax、同步和异步、封装、流程

tech2022-07-06  211

Ajax、同步和异步、封装、流程

1.Ajax的作用

实现了在当前页面中显示新的相应内容

2. Ajax的使用流程

创建ajax请求的逻辑代码,并提供给浏览器让用户触发

创建ajax请求的相应处理逻辑代码,并提前给浏览器

注意:

我们只是提供逻辑代码,由浏览器执行。在某个请求的响应结果中提供给浏览器使 用。

3. Ajax的状态码及其含义

0:请求没有发出(在调用open()之前)

1:请求已经建立但是还没有发出(在调用send()之前)

2:请求已经发出正在处理之中(这里通常可以从响应的到内部头部)

3:请求已经处理,响应中有数据可用,但服务器还没有完成响应(开始接收响应,但是没有接收完全)

4:响应已完成,浏览器已经接收到全部的响应内容

Ajax获取响应状态码的获取

ajax.onreadystatechange=function(){}

4.Ajax的特点:

① 一种新的让浏览器发起HTTP请求的技术。

② 浏览器使用Ajax技术发起请求,响应结果不会自主显示而是按照预

先声明的响应结果处理逻辑来显示响应内容,并且是在当前页面显 示。

③ Ajax是一门基于JavaScript的技术,由浏览器解析运行,和服务器

没有关系。

④ 浏览器端的响应结果处理代码是提前给浏览器提供的。

⑤ 简单易用

5. Aajx的异步和同步设置

Ajax同时支持异步和同步的设置,默认是异步的。

异步:

Ajax代码执行后正常执行其他逻辑代码,不需等待响应结果的处理。

同步:

Ajax代码执行后需要等待响应结果,并且触发回调函数的执行,等回调函

数执行完毕后,继续执行其他逻辑代码。

使用:

通过设置Ajax对象的open方法的async参数的值:

true表示异步,默认值

false表示同步。

6.Aajx的响应数据的格式及其处理

格式:

普通java对象对应的json格式:

User user=new User(1,”张三”,”123”,”唱歌”);

“{uid:’1’,uname:’张三’,pwd:’123’,fav:’唱歌’}”

Map集合存储基本类型数据对应的json格式:

HashMap hm=new HashMap();

hm.put(“a1”,”哈哈”);

hm.put(“a2”,”嘿嘿”);

“{a1:’哈哈’,a2:’嘿嘿’}”

list集合类型并存储引用类型数据的Json格式:

list中存储了两个User对象。

“[

{uid:’1’,uname:’张三’,pwd:’123’,fav:’唱歌’},

{uid:’1’,uname:’张三’,pwd:’123’,fav:’唱歌’}

]”

浏览器端获取响应结果及处理:

注意:类型为字符串类型

获取响应数据

var 变量名=ajax对象.responseText;

① 普通字符串数据的处理: 直接使用

② Json格式的字符串处理: 使用eval函数将数据转换为js对象。

7. Jquery对Ajax的封装的使用

实现:

Jquery已经将Ajax完成了封装,我们可以使用Jquery提供的Ajax封装来完成Ajax 功能。

内容:

$.get(“请求url地址”,“请求数据”,回调函数)

$.get(“请求url地址”,“请求数据”,回调函数)

$.ajax({键值对的参数设置}),具体参照API

最新回复(0)