AJAX笔记

最新推荐文章于 2022-11-14 23:02:45 发布

原创最新推荐文章于 2022-11-14 23:02:45 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了AJAX技术的基本概念及其在改善用户体验方面的应用。通过异步请求服务器数据并局部更新页面内容，避免了整个页面的重新加载。文章详细阐述了如何创建AJAX对象，以及GET和POST两种请求方式的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX技术

在传统的前端页面与后端处理逻辑中，我们往往需要通过一个form将前端的数据提交给后端处理逻辑之后，经处理再跳转到另一个页面。但是，这种交互体验在某些时候却并不好，比如：当我们在某个注册页面进行注册时，可能发现该账号已经被注册。这时，我们便需要某些提醒信息，提醒我们更换账号。但是，如果依照传统的技术，我们只有当通过form提交了所有的注册信息之后才能收到一个来自后端的提醒，并且此时页面已经发生了跳转。

但是今天要讨论的AJAX技术很好的解决了这个问题。AJAX是asynchronus javascript and xml（异步JavaScript和xml）的缩写，是一种浏览器内置的用于改善用户体验的特殊对象。它在使用时异步向服务器发送请求，服务器送回少量数据，JavaScript利用这些数据更新页面，而没有必要进行刷新。

AJAX的使用

（1）如何获取AJAX对象？

既然AJAX对象是浏览器内置的一种特殊的对象，所以我们在使用时也得按照对对象的使用方式进行创建：

对于非IE浏览器而言：

var xhr=new XMLHttpRequest();

对于IE浏览器而言：

var xhr=newActiveXObject('Microsoft.XMLHttp');

所以获取AJAX对象的核心代码如下：

var xhr=null;
if(window.XMLHttpRequest){
    var xhr=new XMLHttpRequest();
}
else{
    var xhr=new ActiveXObject('Microsoft.XMLHttp');
}

(2)AJAX的请求方式：

a.get方式

ajax的请求是使用open方法，该方法描述如下：

open(String methodname,String url,boolean isAny);
          //isAny表示是采取同步（false），还是采取异步（true）

则get方式发送请求如下：

xhr.open('get','check_usr.do?uname=name',true);
          xhr.onreadystatechange=f;
          xhr.send(null);

          //针对返回数据进行处理的回调函数
          var f=function(){
              //...
          }

b.post方式

post的方式与get主要存在两点的不同之处：

需要添加一个消息请求头

可以将参数放在send方法中

如下：

xhr.open('get','check_usr.do',true);
	xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
	xhr.onreadystatechange=f;
	xhr.send('uname=name');

	//针对返回数据进行处理的回调函数
	var f=function(){
	    //...
	}

（3）回调函数

回调函数，其实就是在后端返回数据时被调用来进行处理的函数。

（4）AJAX对象的常用属性：

onreadystatechange：绑定一个回调函数。该函数用来处理一个readystatechange事件。

responseText：服务器返回的文本数据。

responseXML：服务器返回的xml文档。

status：服务器返回的状态码。

readyState：表示AJAX对象与服务器通信的状态，分别为0、1、2、3、4。