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

Ajax 详细介绍_ajax

myzbx 2025-10-23 08:37 5 浏览

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);

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...