百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

Ajax 详细介绍(ajax示例)

qiyuwang 2025-04-07 18:39 7 浏览 0 评论

1、ajax是什么?

asynchronous javascript and xml :异步的 javascript和xml。
ajax是用来 改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的对象(XMLHttpRequest,一般称之为ajax对象)异步地(当ajax对象向服务器发请求时,浏览器不会销毁当前页面, 用户仍然可以对当前页面做其它的操作)向服务器发请求。然后, 利用服务器返回的部分数据(服务器并不会返回一个新的完整的页面,只返回少量的数据)更新当前页面。 整个过程页面无刷新,不打断用户的操作。



2、ajax对象

(1)获得ajax对象?
因为ajax对象(即XMLHttpRequest对象)没有标准化,要区分浏览器来获得。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}

(2)ajax对象的5个属性
1) onreadystatechange: 绑订事件处理函数, 该函数用来处理ajax对象产生的readystatechange 事件(当ajax对象的readyState属性发生了改变,比如,从0变成了1,就会产生该事件)。
比如:
var xhr = getXhr();
xhr.onreadystatechange = f1;
2) responseText: 获得服务器返回的文本。
3) responseXML: 获得服务器返回的xml文档。
4) status: 获得状态码。
5) readyState: ajax对象的readyState属性有5个值,分别0,1,2,3,4,表示ajax对象与服务器通讯的状态。其中,4表示ajax对象已经获得了服务器返回的所有的数据。

3、编程步骤

3、编程步骤
step1,获得ajax对象
比如:
var xhr = getXhr();
step2, 发请求
方式一: 发送get请求
xhr.open('get', 'check_username.do?username='+ $F('username'), true);
xhr.onreadystatechange=f1;
xhr.send(null);
注意:
true: 表示异步,即发送请求时,用户可以对当前页面做其它的操作。
false:表示同步,即发送请求时,浏览器会锁定当前页面,用户不能做其它的操作。
方式二: 发送post请求
step3, 编写服务器端的处理代码。
一般来说,服务器只需要返回的少量的数据,不需要返回一个完整的页面。
step4, 编写事件处理函数
function f1(){
//获得服务器返回的数据
//更新当前页面
}


4、ajax应用中的编码问题

(1)发送get请求
ie浏览器内置的ajax对象,会使用 gbk编码; 而其它浏览器会使用 utf-8编码。
容器在默认情况下,一般会使用 iso-8859-1去解码,所以,会产生 乱码问题。
如何解决?
step1, 让容器使用utf-8去解码。比如,可以修改tomcat的配置文件 conf/server.xml,添加 URIEncoding="utf-8"。
以上配置的作用是,容器 对所有的get请求中的参数使用utf-8进行解码。
step2, 对请求地址使用encodeURI函数来
进行编码。
(2)发送post请求
所有浏览器内置的ajax对象都会使用 utf-8编码。而服务器默认情况会使用 iso-8859-1去解码,所以会出现乱码问题。
解决方式:

request.setCharacterEncoding("utf-8");

xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type','
application/x-www-url-encoded');

xhr.onreadystatechange=f1;
xhr.send('username=' + $F('username'));
注意:因为按照http协议要求,发送post请求,必须 添加一个content-type消息头。ajax对象默认不会添加这个消息头,所以需要调用 setRequestHeader方法来添加。

5、json (javascript object notation)


json技术借鉴了javascript语言中对象创建的一种语法(javascript object notation),所以命名为 json。 www.json.org
(1)json是什么?
是一种轻量级的数据交换标准。
a,数据交换:
就是将数据转换成一种标准的、与平台无关的数据格式(比如xml)发送给接受方。
b, 轻量级:
json相对于xml而言,所需要的数据更少,并且解析的速度更快。
(2)语法
1)表示一个对象
{属性名称:属性值,属性名称:属性值...}
注意:
a, 属性名称必须使用引号括起来。
b,属性值可以是 string,number,boolean,null,object。
c,属性值如果是字符串,必须使用 引号括起来。
2)表示一个对象组成的数组 [{},{},{}...]
(3)使用json做数据交换
(将服务器的java对象或者java对象组成的集合或者数组转换成json字符串发送给浏览器,然后在浏览器端转换成javascript对象)。
1) java对象 --- > json字符串
利用json官方提供的api来生成相应的json字符串。
JSONObject, JSONArray
2)json字符串 --- > javascript对象
可以使用prototype提供的evalJSON函数。

6、ajax编程中的两个问题
1)缓存问题
当 使用ie浏览器时,ajax对象会检查请求地址,如果地址没有变化, 不会向服务器发请求。
解决方式:
在请求地址后面添加一个随机数
比如:
xhr.open('get', 'getNumber.do?' + Math.random(),true); 或者,也可以改为post方式发请求。
2) 同步请求(扩展知识)
a,什么是同步请求?
当ajax对象再向服务器发请求时,浏览器会锁定当前页面,用户不能对当前页面做其它的操作,必须等待服务器的响应发送回来,浏览器才会向下继续执行。
b,如何发送同步请求?
xhr.open('get/post','...do',false);

相关推荐

微软宣布将于10月份关闭OneDrive组功能

【巴士数码】微软已经宣布将在今年10月关闭OneDrive的组功能。一年多之前,微软已经关闭了用户在OneDrive当中创建组的功能。大大多数用户会发现共享文件夹是一种合适的替代品,而且由于这一点,O...

玩转Win10任务栏:从基础设置到效率神器的全攻略

一、基础操作:解锁任务栏的「隐藏布局」...

文档以只读模式打开的原因及解决方法

当文档以只读模式打开时,可能由多种原因导致。以下是详细的原因分析与对应解决方法,您可根据实际情况灵活选择操作。一、文件属性设置问题(一)Windows系统在Windows系统中,若文件属性被标记...

Windows系统的优化(windows优化设置)

今天给大家讲一讲系统的图标和一些基本的优化。安装了原版系统之后有很多地方需要优化比如桌面图标小箭头,盾牌,休眠占用内存,关闭通知栏。首先我们打开软件这款软件以前就讲到过就是dism++软件,他可以清理...

Win 10偷偷传送用户隐私至微软(win10设备隐私)

自推出以来Win10不断被揭发盗取用户带宽、泄漏WiFi密码等各式各样的私隐问题,令不少网络专家开始留意Win10还隐藏了多少类似的私隐漏洞。最近再有人发现Win10部分功能静静...

OneDrive逆势下调存储空间,不限量存储被取消

日前,微软在周一晚发布的博客文章中表示,由于部分用户存滥用储存功能,所以该公司将取消不限量OneDrive存储服务。不限量用户的最大存储空间将被下调至1TB,定价为6.99美元,对于已存储较多文件和内...

Win10中那些被微软取消的功能(微软公司从9日起停止对windows8的主流服务支持)

很多用户在使用Win10的时候,都会发现一些在Win7系统中的功能被取消了,有的时候想找也找不到。那么到底是那些过去的功能在Win10中被取消了呢?下面我们就简单梳理一下,并且告诉大家解决的办法。Wi...

微软推Win11 Dev 26200.5570预览版:语音打字上线脏话过滤选项

IT之家4月26日消息,微软公司昨日(4月25日)发布博文,邀请Dev频道的WindowsInsider项目成员,测试适用于Windows1124H2的KB50556...

微软VSCode商店发现9款挖矿恶意插件,已安装超30万次

IT之家4月8日消息,科技媒体bleepingcomputer昨日(4月7日)发布博文,报道称安全专家在微软VSCode扩展商店中,发现了9款伪装成开发工具的恶意插件。这些插...

微软Windows 11开始菜单大改版!(windows 11 开始菜单)

根据最新消息,微软正在对Windows11的开始菜单进行重大改版,这一更新将彻底改变其布局和功能。Windows11的开始菜单将从现有的多栏布局改为单栏可滚动视图,所有固定图标和已安装应用都将集中...

OneDrive无限存储空间取消 免费降至5GB

2015-11-0313:35:06作者:徐鹏北京时间11月3日消息,微软在一篇博客文章中称,将取消OneDrive存储服务的不限量空间,原因是部分用户有滥用问题。OneDrive无限存储空间取消...

省出电脑C盘空间!微软悄悄更新:OneDrive终于能卸载了

快科技3月12日消息,近日,微软悄悄地在官方更新了关闭、禁用、卸载Windows自带软件OneDrive的方法。微软Windows系统自带了很多软件和功能,其中有很多我们可能永远都用不上。但这些软件还...

微软关闭OneDrive新建组群功能(windows关闭onedrive)

微软的OneDrive云端储存服务能够让你创建组群(Group),这样当你和团队成员共同从事一个项目的时候能够通过云端协作提升效率,并且组群的文档储存空间还将同你标准的OneDrive分割独立开来。不...

微软为何取消OneDrive无限制容量存储?被75TB占用吓坏

那么为什么微软会取消Office365的无限OneDrive存储呢?“自推出Office365订阅无限制存储服务以来,一小部分用户开始备份多台PC设备,存储众多电影收藏合集和DVR录像。在某些情况下...

Win11必关的5个设置!关闭后电脑流畅到起飞,操作简单不藏私!

Windows11虽然界面炫酷,但默认设置中隐藏了不少“拖慢电脑”的坑!尤其是老电脑用户,用久了卡顿、开机慢、反应迟钝……其实只需关闭几个鸡肋功能,就能让电脑提速50%以上!...

取消回复欢迎 发表评论: