ajax工作原理及其相关知识

来源：互联网发布：go并发编程实战完整版编辑：程序博客网时间：2024/05/16 16:09

一、什么是ajax？

AJAX 全称是Asynchronous JavaScript and XML，即异步的JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax包含的技术

使用CSS和XHTML来表示
使用DOM模型来交互和动态显示
使用XMLHttpRequest来和服务器进行异步通信
使用JavaScript来绑定和调用

XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

二、ajax原理和XMLHttpRequest对象

工作原理： 通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。
XMLHttpRequest属性：

onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 从服务器进程返回数据的字符串形式
status 从服务器返回的数字代码
status Text 伴随状态码的字符串信息
readyState 对象状态值
- 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
- 1 (初始化) 对象已建立，尚未调用send方法
- 2 (发送数据) send方法已调用，但是当前的状态及http头未知
- 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
- 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

2.1 原生JavaScript

get方式

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><input type="button" value="按钮" id="btn" /><script>var oBtn = document.getElementById('btn');oBtn.onclick = function() {    // 1.创建XMLHttpRequest对象    var xhr = null;    if(window.XMLHttpRequest) {        xhr = new XMLHttpRequest(); //非IE浏览器创建XmlHttpRequest对象     }    else {        xhr = new ActiveObject('Microsoft.XMLHTTP'); //IE浏览器    }    // 2.发送请求    xhr.open('get', 'index.get.php?username=' + encodeURI('黎明') + '&age=30&' + new Date().getTime(), true); // 你的名字： 黎明, 年龄： 30    // 3.提交发送请求    xhr.send();    // 4.等待服务器返回内容    xhr.onreadystatechange = function() {        if(xhr.readyState == 4) {  // readyState==4，说明数据已经发送完毕            if(xhr.status == 200) {                alert(xhr.responseText);            }            else {                alert('出错了， Err:' + xhr.status);            }        }    }}</script></body></html>

post方式

// 文件名index.get.php<?phpheader('content-type:text/html; charset="utf-8"'); error_reporting(0); // 关闭错误报告$username = $_GET['username'];$age = $_GET['age'];echo "你的名字： {$username}, 年龄： {$age}";?>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><input type="button" value="按钮" id="btn" /><script>var oBtn = document.getElementById('btn');oBtn.onclick = function() {    var xhr = null;    if(window.XMLHttpRequest) {        xhr = new XMLHttpRequest();    }    else {        xhr = new ActiveObject('Microsoft.XMLHTTP');    }    xhr.open('post', 'index.post.php', true);    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');    xhr.send('username=aaa&age=30');     xhr.onreadystatechange = function() {        if(xhr.readyState == 4) {            if(xhr.status == 200) {                alert(xhr.responseText);            }            else {                alert('出错了， Err:' + xhr.status);            }        }    }}</script></body></html>

// 文件名index.post.php<?phpheader('content-type:text/html; charset="utf-8"'); error_reporting(0); // 关闭错误报告$username = $_POST['username'];$age = $_POST['age'];echo "你的名字： {$username}, 年龄： {$age}";?>

XMLHttpRequest对象的open方法：有三个参数
- 向服务器提交数据的类型 post或get
- 请求的URL地址和参数
- 传输方式（是否是异步） false同步，true异步，默认为true。

XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

三、ajax优缺点

3.1 优点

减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。
无刷新更新页面，减少用户心理和实际的等待时间，带来更好的用户体验。
使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成本。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

3.2 缺点

ajax干掉了back按钮，即对浏览器后退机制的破坏。
安全问题暴露比以前更多的数据和服务器逻辑
对搜索引擎的支持比较弱
破坏了程序的异常机制

参考文章：

AJAX工作原理及其优缺点
Ajax工作原理

EOF

————————————————- 像小白一样思考！ —————————————————————————

阅读全文

0 0