10 AJAX

最新推荐文章于 2023-05-30 21:27:40 发布

参宿_七

最新推荐文章于 2023-05-30 21:27:40 发布

阅读量251

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/Michaelia_hu/article/details/90298906

版权

Java Web 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1. AJAX的作用

2. XMLHttpRequest

3. AJAX重构

4. 使用AJAX的一般结构

一、AJAX

AJAX（Asynchronous Javascript And XML）是一种不刷新整个页面的情况下，与服务器端交互并动态更新当前页面的技术。目前AJAX已经被广泛使用，如百度地图、进度条显示等都是使用了AJAX技术。

传统的web开发每当页面上有数据更改（来自后台的数据），局需要刷新整个界面，这加大了数据流量，AJAX可以在一定条件下才向服务器发送请求，并获得新数据，刷新部分页面。

AJAX一般是前端展示的界面，涉及到CSS/HTML/JS以及额外的XMLHttpRequest。重点就是这个XMLHttpRequest，用它来实现与服务器的交互，而不是每次点击按钮就自动把request对象发送给服务器。而且获得返回的数据也是部分的数据。

二、XMLHttpRequest

XMLHttpRequest其实是一个类，在IE浏览器和非IE浏览器是不同的类名，但是方法属性都是一样的，在js函数中生成这个类：

req=false;//因为js可以不声明对象的类。
if(windows.XMLHttpRequest){
    req=new XMLHttpRequest()；//非ie浏览器
}else if(windows.ActiveXObject){
    try{
        req=new ActiveXObject("Msxml2.XMLHTTP");//IE浏览器的一部分版本
    }catch(e){
        try{
            req=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的另一部分版本
        }catch(e){}
    }
}
if(!req){
    alert("生成req失败");
    return false；
}

XMLHttpRequest类有一些重要的属性与方法：

1. onreadstatechange

这个属性指向一个不但参数的回调方法，就是当请求成功后，用哪个方法处理返回值，因为函数时不带参数的，但是可以使用匿名函数：

req.onreadstatechange=function(){

deal("参数值")

}

2. readyState

这个属性表示获取请求的状态：

0：为初始化 1：正在加载 2：已加载 3：交互中 4：完成（一般都是请求是否处于整个状态再进行后续动作）

在判断完了请求状态后，还要判断http请求返回的状态：就是req.status是不是等于200。

3.open('GET/POST',url,true)

这个方法发送一个请求，一般在url中包含了action的值，这样服务器可以根据action的值调用相应的方法。url中最好还要包含当前的时间，不然网页可能不刷新。true表示当前是异步方式发送的，异步表示不需要接收服务器的响应就可以继续发送其他数据。