AJax实现机制及基础应用


一、概念

1、各大技术结合体

AJAX并不是一种新的编程语言,而是集合了XMLJavaScriptCSS+HTMLDOM动态网页技术的结合体。

2、异步更新

AJAX不同于传统的web应用程序,通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

二、实现机制

1用户体验角度:

(1)、传统web应用交互方式:间断的用户体验

点击linkbutton——>提交——>用户等待服务器响应——>查看更新后页面

(2)AJAX交互方式:不间断的良好用户体验

点击linkbutton——>提交——>继续用户操作,无需经历漫长等待——>查看更新后页面

2、技术实现角度:

传统web

AJAX:


3Ajax异于传统web的关键:提交返回数据的方式

传统web

通过表单组织,整张提交到服务器,有服务器解析返回html给浏览器刷新。

AJAX

利用js进行数据获取,提交请求同时创建对象XmlHttpRequest对象,用与接收服务器返回数据。整个过程以文本数据的形式传输,所以实现了不必刷新整个页面信息,仅返回更新部分数据的异步更新效果。大大降低了服务器响应时间。

三、技术核心

1XmlHttpRequest对象

XMLHttpRequest作用:

用于在后台与服务器交换数据。AJAX的异步更新技术,XmlHttpRequest对象起着至关重要的作用。所有现代浏览器均支持 XMLHttpRequest 对象(IE5IE6使用 ActiveXObject)。

XmlHttpRequest对象五步使用法

a、创建对象

b、注册回调函数

c、使用open方法设置和服务器交互的基本信息

d、设置发送数据,开始交互

e、通过回调函数回复响应结果,更新页面

常用属性方法

方法

@H_880_403@ @H_20_404@

描述

@H_880_403@

Open()

@H_880_403@

5个参数,用于指定与服务端交互的http方法(get/post)URL地址及请求信息

@H_880_403@

Send()

@H_880_403@

向服务器发送请求

@H_880_403@

readyState

@H_880_403@

表示XmlHttpRequest对象的状态(04)

@H_880_403@

2Javascript

3DOM

四、优缺点

Ajax应用程序的优势在于:
1.
通过异步模式,提升了用户体验
2.
优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用,减少数据传输时间
3. Ajax
引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载

Ajax的问题

1. 一些手持设备(如手机、PDA)现在还不能很好的支持Ajax;
  2.JavaScript作的Ajax引擎,JavaScript的兼容性尚且不够完善









相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...