Ajax的使用方法

1,什么是Ajax?

Ajax(异步Javascript和XML),是指一种创建交互式网页应用的网页开发技术。

2,Ajax的作用

Ajax可以使网页实现异步更新----即在不更新整个页面的情况下实现对某一部分进行更新。

简单来说Ajax就是用于连接服务器的一种工具。

3, Ajax所包含的技术

Ajax并非一种新的技术,而是几种原有技术的结合体。 以下便是Ajax所包含的技术

(1).使用CSS和XHTML来表示

(2).使用DOM模型来交互和动态显示

(3).使用XMLHttpRequest来和服务进行异步通信

(4).使用javascript来绑定和调用

4,Ajax的工作原理(如图所示)

(1)用户在Web页面上执行了某个操作,比如鼠标单击每个链接或按钮等。

(2)根据用户的操作,触发事件的发生,并调用注册到该事件的JavaScript事件处理函 数。在JavaScript事件处理函数中,需要创建并初始化一个用以向服务器发送异步请求XMLHttpRequest对象,同时指定一个回调函数。当服务器端响应返回时,将自动调用该回调函数。

(3) 服务器收到XMLHttpRequest对象的请求后,根据请求进行一系列的处理。

(4)处理完毕,服务器端向客户端返回所需要的数据,数据格式通常是HTML,XML,JSON。

(5)数据到达客户端之后执行JavaScript回调函数,在回调函数中将处理返回的数据,并将数据显示在用户界面。这时,站在用户的角度来说,用户获得自己操作所需的数据,并看到界面中某部分内容的更新。由于是异步更新,并没有重新加载页面,所以具有很高的用户交互性,用户几乎察觉不到延迟。

5,Ajax的核心

使用的 XMLHttpRequest 对象,但是需要注意的是------不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的

​ 如:IE浏览器使用 ActiveXObject,而其他浏览器则使用 XMLHttpRequest的 javascript 的内建对象

6,Ajax的使用步骤:

(1)、创建xhr, new XMLHttpRequest();

(2)、创建请求, xhr.open(method,url,isAsyn);

(3)、设置回调函数, onreadystatechange();

(4)、发送请求, xhr.send();

7,JSON语法是JavaScript对象表示语法的子集。
l 数据在键值对中
l 数据由逗号分隔
l 花括号保存对象
l 方括号保存数组

例如使用JSON来表示输入的账号及密码,如图所示,注意其中键应当放置在双引号中。

8,Ajax的封装

|----------------------------|-------------------------------------------------|
| 名称 | 值/描述 |
| type | 规定请求的类型(GET或POST)。 |
| url | 规定发送请求的URL。默认是当前页面。 |
| data | 规定要发送到服务器的数据。 |
| timeout | 设置本地的请求超时时间(以毫秒计)。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之 |

相关推荐
独孤九剑打醒他几秒前
【原创开源·航空终极篇】氢能航空动力升级:双燃料掺氢、富氧补气与露天储氢安全模型
前端·架构·开源·硬件工程·能源
律宏阔4 分钟前
阿里云 ESA + Pages 域名部分电脑无法访问
前端
Lank_M8 分钟前
canvas 第一次画字没用上字体,字体却是它要来的
前端
古夕12 分钟前
iframe 授权失败时露出 60000 JSON 的复盘
前端·javascript
古夕15 分钟前
地址变了,页面是空的:一次 Vue Router 菜单切换复盘
前端·vue.js
JavaGuide16 分钟前
推荐一个好用 DeepSeek Harness 插件,直接把 Agent 上下文给可视化了!
前端·后端
数据掘金23 分钟前
白屏故障定位:从资源请求到路由渲染的排查顺序
前端
程序员Sunday27 分钟前
ES Module 和 CommonJS 有什么区别?循环依赖时会发生什么?
前端·javascript·面试
玲珑意34 分钟前
Vue 3 + DAG拓扑排序 + SSE流式人机协同:现代AI工作流编排系统的工程化实践
前端
三十而立洋39 分钟前
TypeScript 7.0 深度解析:新特性、Go 原生编译器及与 TypeScript 6.0 的区别
前端·typescript·前端工程化