Ajax技术原理与原生及jQuery实现详解
本文详细解析Ajax（Asynchronous JavaScript and XML）的核心概念，指出其并非新技术而是现有技术的综合应用。重点讲解原生Ajax中XMLHttpRequest对象的创建、Get与Post请求的区别及响应处理机制，并对比介绍jQuery封装的Ajax方法及其表单序列化功能，帮助开发者理解异步通信原理及实际编码实现。
Ajax技术概述与核心概念
一、Ajax概述
1、Ajax即Asynchronous（[ə'sɪŋkrənəs）JavaScript XML的缩写，并非独立新技术，而是对现有技术的综合运用。该技术允许在不刷新页面的情况下向服务器请求额外数据，从而提升用户体验。
2、Ajax的核心组件是XMLHttpRequest对象（简称XHR），由微软首次引入。在XHR问世前，实现Ajax式通信需依赖隐藏框架或内嵌框架等变通手段。
3、XHR提供了与服务器交互的流畅接口，支持异步获取更多信息。这意味着用户点击后无需刷新页面即可获取新数据，即通过XHR对象获取数据后，利用DOM将其插入页面。
4、尽管名称包含XML，Ajax通信与数据格式无关。该技术旨在无需刷新页面即可从服务器获取数据，且获取的数据不一定是XML格式。
原生Ajax与jQuery封装实现
二、操作：原生Ajax与jQuery封装的Ajax
1、原生Ajax：
Ajax的主要作用包括发送请求（设置请求setRequest）和接收响应（getResponse）。
A、原生Ajax发送请求的方式：
Ajax中最关键且固定的部分是HTTP请求。
1) 建立连接：IE7及以上版本均支持XMLHttpRequest。
var xhr = new XMLHttpRequest(); //创建异步请求对象
2) Get请求：格式必须为（url?name1=value1&name2=value2）。
xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接3) Post请求
xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体4) Get与Post请求的区别：
★ Get请求无需设置请求头，而Post请求需要设置请求头。
★ Get通过URL传递数据，而Post数据在send方法中传递。
B、原生Ajax接收响应的方式：
/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
if(xhr.status==200 && xhr.readyState==4){
var result=xhr.responseText;
console.log(result); //输出从服务器中获取到的数据
//接下来就可以对数据进行相应的处理了
}
};C、处理响应数据：
/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};jQuery中封装的Ajax
$.ajax({
type: 请求方式(get/post),
url: "register.php",
data: 发送请求数据,
beforeSend:function(){返回false可以取消本次ajax请求},
success:function(result){ 成功响应后调用 },
error:function(err){ 错误响应时调用 },
complete:function(){ 响应完成时调用(包括成功和失败) }
});jQuery提供了专门用于序列化表单的方法：
$('form').serialize(): //序列化表单(即格式化key=val & key=val);
服务器响应状态监听与处理
三、响应
我们需要监听服务器的响应状态，并对从服务器获取的数据进行相应处理。
1) onreadystatechange是JavaScript中的一种事件，用于监听XMLHttpRequest的状态。
2) readystate：响应状态，返回XMLHTTP请求的当前状态。
|
readyState 状态 |
状态说明 |
|
(0)未初始化 |
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。 |
|
(1)载入 |
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 |
|
(2)载入完成 |
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 |
|
(3)交互 |
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。 |
|
(4)完成 |
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。 |
3) status：服务器的响应码。
常见响应码：200—服务器成功返回网页。
404—请求的网页不存在。
503—服务不可用。
关于服务器响应码的详细信息，请参阅网络传输协议（HTTP协议）。
以上就是本文的内容，如有需要可查看，希望对大家有所帮助。感谢对本站的支持！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18