首页 > 代码库 > AJAX详解

AJAX详解

2024-11-28 05:32:39   203人阅读

Ajax概述

Ajax全称：Asynchronous Javascript and XML（异步JavaScript和XML）

它并不是Javascript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体（AJAX 不是新的编程语言，而是一种使用现有标准的新方法。）主要有：

Javascript，通过用户或者其他与浏览器相关事件捕获交互行为

XMLHttpRequest对象，通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求

服务器上的文件，以XML，HTML或者JSON格式保存文本数据

其他JavaScript，解释来自服务器的数据，（比如PHP从MySQL获取的数据）并将其呈现到页面上

 

Ajax作用

使用Ajax，可以无刷新状态更新页面，并且实现异步提交，提升用户体验。

 

Ajax优势

不需要插件支持（一般浏览器且默认开启Javascript即可）

用户体验极佳（不刷新网页即可获取可更新的数据）

提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）

减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

 

 Ajax不足之处

前进，后退的功能被破坏（因为Ajax永远在当前页面，不会几率前后页面）

搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解js引起变化数据的内容）

开发调试工具缺乏（相对于其他语言的工具集来说，js或AJax调试开发很少）

 

 

一个简单的Ajax程序的流程（获取一个文件的内容）

第一步：打开浏览器，创建一个ajax对象，ie6及以下new ActiveXObject(‘Microsoft.XMLHTTP‘)，使用try，catch或者使用if进行判断进行兼容性的处理

var xhr = null;
ActiveXObject(‘Microsoft.XMLHTTP‘)
try {
    xhr = new XMLHttpRequest();
} catch (e) {
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}

第二步：调用ajax对象的open方法，这个方法有三个参数，分别表示提交方式 Form-method，提交地址 Form-action，异步（同步）

xhr.open(‘get‘,‘1.txt‘,true);

第三步：提交，发送请求，调用ajax对象的send()方法，相当于Form的submit

xhr.send();

第四步：等待服务器返回内容，请求状态监控，使用ajax对象的onreadystatechange事件，该事件有如下属性：

readyState属性（请求状态）

0 （未初始化）还没有调用open()方法

1 （载入）已调用send()方法，正在发送请求

2 （载入完成）send()方法完成，已收到全部响应内容

3 （解析）正在解析响应内容

4 （完成）响应内容解析完成，可以在客户端调用了

status属性：服务器(请求资源)的状态

返回的内容的形式

responseText：返回以文本形式存放的内容

responseXML：返回XML形式的内容

xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 ) {
        if ( xhr.status == 200 ) {
            alert( xhr.responseText );
        } else {
            alert(‘出错了,Err：‘ + xhr.status);
        }
    }
}

整体代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById(‘btn‘);
            oBtn.onclick = function () {
                var xhr = null;
                try {
                    xhr = new XMLHttpRequest();
                } catch (e) {
                    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
                }

                xhr.open(‘get‘, ‘1.txt‘, true); //在地址栏输入地址
                xhr.send();    //提交

                //等待服务器返回内容
                xhr.onreadystatechange = function() {
                    if ( xhr.readyState == 4 ) {
                        if ( xhr.status == 200 ) {
                            alert( xhr.responseText );
                        } else {
                            alert(‘出错了,Err：‘ + xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>

 

 

 

同步与异步

使用AJax最关键的地方，就是实现异步请求，接受响应及执行回调，那么异步与同步有什么区别呢？

同步：即执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话（我们普通的WEB程序开发基本都是同步的）

异步：可以同时执行多条任务，使用异步模式执行，感觉有多条路线，类似于短信，不会因为看一条短信而停止接受另一条短信

Ajax也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web页面出现假死状态，所以一般Ajax大部分采用异步模式

 

AJAX详解


联系
我们