Ajax与jQuery-CSDN博客

本文链接：https://blog.csdn.net/qq_50437196/article/details/136501850

本文探讨了Ajax如何通过异步更新提高用户体验，对比了传统Web与Ajax在请求方式、事件处理及get/post请求的区别。同时介绍了使用jQuery简化Ajax开发，包括$.ajax()方法和JSON对象的应用。

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

1.Ajax
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果，
操作更方便

2.传统Web与Ajax的差异

差异	方式	说明
发送请求方式不同	传统Web	浏览器发送同步请求
发送请求方式不同	Ajax技术	异步引擎对象发送请求
服务器响应不同	传统Web	响应内容是一个完整页面
服务器响应不同	Ajax技术	响应内容只是需要的数据
客户端处理方式不同	传统Web	需等待服务器响应完成并重新加载整个页面后用户才能进行操作
客户端处理方式不同	Ajax技术	可以动态更新页面中的部分内容不影响用户在页面进行其他操作

3.XMLHttpRequest常用方法

方法	说明
open( String method, String url, boolean async, String user, String password )	创建一个新的HTTP请求
send( String data )	发送请求到服务器端
abort( )	取消当前请求
setRequestHeader( String header, String value )	设置请求的某个HTTP头信息
getResponseHeader( String header )	获取响应的指定HTTP头信息
getAllResponseHeader( )	获取响应的所有HTTP头信息

4.XMLHttpRequest事件
传统Web与Ajax的差异onreadystatechange：指定回调函数
常用属性
readyState：XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象未完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应
4	XMLHttpRequest对象读取响应结束

5.get请求和post请求的区别

步骤	请求方式	实现代码
初始化组件	GET	xmlHttpRequest.open( "GET", url, true );
初始化组件	POST	xmlHttpRequest.open( "POST", url, true ); xmlHttpRequest .setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
发送请求	GET	xmlHttpRequest.send( null );
发送请求	POST	xmlHttpRequest.send( "key=xxx&type=12&year=2016" );

6. 使用jQuery实现Ajax
传统方式实现Ajax的不足
步骤繁琐
方法、属性、常用值较多不好记忆
处理复杂结构的响应数据（如XML格式）比较烦琐
浏览器兼容问题

7.使用$.ajax()发送请求
$.ajax( {
"url" : "url", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
},
"error" : function() { // 请求失败后要执行的代码
}
} );

8.定义JSON对象
var JSON对象 = { "name" : value, "name" : value, …… };
var person = { "name" : "张三", "age" : 30, "spouse" : null };

9.jQuery中的Ajax方法
$.ajax()
$.get()
$.post()
$.getJSON()
.load()
……
可以省略对应的一部分